<%= 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. The style guide below shows styles we have already built for you. We will be adding to this over time. Please let us know (file an issue in the repo) if you need any styles that might be useful to other developers, so that we know which items to prioritize.

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.

Typography

Semantic class headings

.headline
.heading
.subheading
.title
.subtitle
.caption
.caption-alt
.subcaption

Heading elements

h1 element

h2 element

h3 element

h4 element

h5 element
h6 element

p element

Longform type: p, ul, ol tags

Suspendisse id libero et nisi fringilla convallis. Suspendisse at eros quis augue consequat efficitur. Quisque mollis enim ligula, eu tincidunt dolor feugiat ut. Donec nec libero sodales, semper risus vel, tempor purus.

  • Bread
  • Butter
  • Hamsters
  • Everyone has the right to freedom of opinion and expression; this right includes freedom to hold opinions without interference and to seek, receive and impart information and ideas through any media and regardless of frontiers.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis leo at maximus vehicula. Aliquam sed hendrerit lacus, nec placerat est. Nulla tincidunt dapibus orci. Nulla facilisi. Ut eu pellentesque nunc. Duis elementum eleifend purus sed rhoncus. Donec at dolor id diam sodales accumsan.

  1. The Beatles
  2. Velvet Underground
  3. The Doors
  4. Spice Girls

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