.small
Makes the text of this element smaller.
.large
Makes the text of this element larger.
.hide
Hides an element.
.quiet
Tones down the font color for this element.
.loud
Makes this elements text black.
.highlight
Adds a yellow background to the text.
.added
Adds green background to the text.
.removed
Adds red background to the text.
.first
Removes any left sided margin/padding from the element.
.last
Removes any right sided margin/padding from the element.
.top
Removes any top margin/padding from the element.
.bottom
Removes any bottom margin/padding from the element.
Styling Forms
div.error
Creates an error box (red).
div.notice
Creates a box for notices (yellow).
div.success
Creates a box for success messages (green).
Creating a Grid
<div class="container">
<div class="span-24">
The header
</div>
<div class="span-4">
The first column
</div>
<div class="span-16">
The center column
</div>
<div class="span-4 last">
The last column
</div>
<div class="span-24">
The footer
</div
</div>
.append-x
Appends x number of empty columns after a column.
.prepend-x
Preppends x number of empty columns before a column.
.push-x
Pushes a column x columns to the left. Can be used to swap columns.
.pull-x
Pulls a column x columns to the right. Can be used to swap columns.
.border
Applies a border to the right side of the column.
.colborder
Appends one empty column, with a border down the middle.
.clear
Makes a column drop below a row, regardless of space.
.showgrid
Add to container or column to see the grid and baseline.