Typography
The type is built on BLAH.
Heading 1 Small
Heading 2 Small
Heading 3 Small
Heading 4 Small
Heading 5 Small
Heading 6 Small
Paragraphs
This is a paragraph. Here's a link.
Code section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies felis in orci
viverra commodo. Quisque varius posuere elit. Cras consectetur augue non nulla porta
feugiat. Praesent at nibh vitae lorem lacinia iaculis. Nam in lorem massa. Cras suscipit
quam a dolor dictum aliquam sit amet id turpis. Mauris orci massa, eleifend eget sem a,
hendrerit ultricies augue. Ut urna nibh, dignissim at faucibus in, condimentum nec lacus.
Unordered List
- List item
- List item
- List item
Ordered List
- List item
- List item
- List item
Example Code Block (with <pre>)
<h1>Heading 1 <small>Small</small></h1>
<h2>Heading 2 <small>Small</small></h2>
<h3>Heading 3 <small>Small</small></h3>
<h4>Heading 4 <small>Small</small></h4>
<h5>Heading 5 <small>Small</small></h5>
<h6>Heading 6 <small>Small</small></h6>
<p>Paragraphs look like this.</p>
<code>Code section</code>
Grid System
The grid system is mobile up, built around 3 different screen sizes: mobile (<768px), tablet (<1025px), and desktop (>1024px). There are 12 columns, so the screen can easily be split in half, thirds, quarters, or sixths.
Grids need to be wrapped in .container and .row block elements (div, main, section, header, etc).
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
.col-md-12
.col-md-2 .col-md-offset-1
.col-md-2 .col-md-offset-2
.col-md-2 .col-md-offset-3
Buttons
Buttons are kept simple: default, bordered, and disabled. By default, they collapse to full width at mobile screen sizes.
Inverted containers
Use an inverted fluid container with a nested regular container for a full-width inverted section.
Note that buttons do not automatically adjust when in an inverse container, so you may wish to use bordered buttons.
Forms
Form styling is very similar to the regular grid system. Define .form-row (for extra spacing between rows) and .col-* classes, one per input. Styling on form elements is automatic, with no classes needed.
Tables
Default table styling (comes automatically with <table>,
<thead>/<tbody>/<tfoot>, <tr>,
and <td>/<th>.
| Column header 1 | Column header 2 | Column header 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
| Footer 1 | Footer 2 | Footer 3 |
You can add alternating stripes by adding .striped.
| Column header 1 | Column header 2 | Column header 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
| Footer 1 | Footer 2 | Footer 3 |
You can remove the cell borders by adding .borderless. Note that row borders
are not removed.
| Column header 1 | Column header 2 | Column header 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
| Footer 1 | Footer 2 | Footer 3 |
Utilities
There are a number of utilities available to use. These can be used as classes or as mixins.
Text alignment
.u-text-left
.u-text-center
.u-text-right
Text modifications
.u-text-italic
.u-text-bold
.u-text-monospace
.u-text-uppercase
.u-text-lowercase
.u-text-capitalize
Floating (Note: floating utilities use !important to avoid specificity issues)
.u-pull-left
.u-pull-right
Cards
Everyone could use a good card every now and again. Here's ours.
Card header
Some card text. This is supposed to be a paragraph, for, you know, whatever.
Card with image
Card with Text
Here's a subheader!
And some more text!