Layout Styles

These are styles that drive the layout of the site. They are based on a 12 column grid with a width of 960px.

The Grid

Details

Columns col-* must be wrapped in a container with a class of row.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Predefined grid classes like .row and .col-* are available for quickly making grid layouts.

Example

col-1

col-12

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

col-2

col-4

col-2

col-4

Code Sample

<div class="row">
  <div class="col-2">...</div>
  <div class="col-4">...</div>
  <div class="col-2">...</div>
  <div class="col-4">...</div>
</div>

Grid Offsets

Use the offset for the grids to offset a column from the edge the container, or to increase the spacing between columns in the layout.

col-9 push-3

col-3

col3 push-6

<div class="row">
  <div class="col-9 push-3">...</div>
</div>
<div class="row">
  <div class="col-3">...</div>
  <div class="col-3 push-6">...</div>
</div>