<%= title %>

<%= description %>

Repeatable sections

You can basically put whatever markup you want inside of .demo-content > .container, but note that it will live inside a responsive (fluid) page and should be built accordingly. We are showing repeatable sections and subsections as options for you in organizing your content.

Your demo content can contain sample code, the output from the code, and explanation of how it works, multiple examples, links out to more documentation, etc. Code samples should be in Github Gists.

Repeatable subsections

Subsection subtitle

This is a .subsection. The text is inside a .subsection-body. Title and Subtitle use the regular .title and .subtitle classes respectively. The subtitle should be on a block level element like a <p> element. Both should be inside an element (preferably a <header> with the subsection-header class.

Repeatable subsections

Subsection subtitle

This content does not have a max width on it, it's inside a grid column. Any wider than this, and the line length of the body copy looks bad.

Grid

24-column grid originally based on Bootstrap

24
1
23
2
22
3
21
4
20
5
19
6
18
7
17
8
16
9
15
10
14
11
13
12
12

How to use the grid

General Markup

Every grid row has a wrapper div with class .row. This wrapper class contains only grid columns as direct children. The grid columns follow this class nomenclature:

Column Classes

There is a set of column classes for a range of breakpoints. This grid is mobile first, in that you add a column class for the smallest breakpoint at which you need columns, and then override at larger breakpoints if you need the layout to change at those breakpoints.

The breakpoints are actually set in relative units, but labelling in px below makes this fast to understand:

  • 320px and below: Everything is 100% wide unless you otherwise override.
  • 321-540px: .col-xs-1, .col-xs-2, ... .col-xs-24
  • 541px-768px: .col-sm-1, .col-sm-2, ... .col-sm-24
  • 769px+: .col-md-1, .col-md-2, ... .col-md-24

The number in the class indicates how many columns the div should span.

Examples

Resize your browser and note how these change:

.col-xs-12, .col-md-6
.col-xs-12, .col-md-6
.col-xs-12, .col-md-6
.col-xs-12, .col-md-6
.col-sm-8
.col-sm-8
.col-sm-8

Note: If you want a column with a solid background, you will need to put the background on a child element of the column class. These are fluid columns with fixed-width gutters, so the gutters are built off of the padding on the column classes.

Tables

Table caption
Song Artist Album Genre Last played
Love Her Madly The Doors L.A. Woman Classic Rock 21 Feb, 2015
Hurt Johnny Cash American Ⅳ Country 12 Feb, 2015
Good Times Bad Times Led Zeppelin Led Zeppelin Classic Rock 01 Jan, 2015
I Know it's Over The Smiths The Queen is Dead Alternative Rock 30 Jan, 2015

Controls

Buttons

Elements

Class

.button

Please don't use .button, unless you really have to. If you do, you MUST add all relevent accessibility information. It might look like a button, but it is not a button.

Button states

Primary buttons

.button.primary

Add .primary class to make the button the main (highlighted) button.

Disabled buttons

.button.disabled

Add the disabled attribute to make the button disabled. This is only valid on actual controls, such as button, input, fieldset, etc. If you are using a fake button (such as <a class="button">, then you should use the .disabled class. Note, that this isn’t really a button and not really disabled, so use with extreme caution and add the required accessibility information.

Inputs

Disabled inputs

Invalid inputs

Selects