<%= 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
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.
- The Beatles
- Velvet Underground
- The Doors
- Spice Girls
Grid
24-column grid originally based on Bootstrap
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:
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
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
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
Add .primary
class to make the button the main (highlighted) button.
Disabled buttons
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.