CSS Documentation

Rows

All columns are contained within vertical rows. Rows handle clearing the columns and centering the layout. They also apply the max-width setting so the grid is only fluid up to a certain point. To create a row, use the .row class.

<div class="row">
  <div class="column-6">...</div>
  <div class="column-6">...</div>
</div>

Once you've filled out a row with columns, you'd need to use another row to start another set of columns. For example, this would create two rows with columns contained within them.

<!-- Wrong: -->

<div class="row">
  <div class="column-6">...</div>
  <div class="column-6">...</div>
  <div class="column-4">...</div>
  <div class="column-4">...</div>
  <div class="column-4">...</div>
</div>

<!-- Right: -->

<div class="row">
  <div class="column-6">...</div>
  <div class="column-6">...</div>
</div>
<div class="row">
  <div class="column-4">...</div>
  <div class="column-4">...</div>
  <div class="column-4">...</div>
</div>

Rows can pretty much only contain columns or other rows.

<!-- Wrong: -->

<div class="row">
  <h1>...</h1>
  <p>...</p>
  <div class="column-6">...</div>
  <div class="column-6">...</div>
</div>

<!-- Right: -->

<div class="row">
  <h1>...</h1>
  <p>...</p>
</div>
<div class="row">
  <div class="column-6">...</div>
  <div class="column-6">...</div>
</div>

Columns

Columns are created using the .column-[n] class, where n is the number of grid units the column should span. For example, if you want to create a 3 unit column, you would use a .column-3 class.

<div class="row">
  <div class="column-1">...</div>
  <div class="column-2">...</div>
  <div class="column-3">...</div>
  <div class="column-6">...</div>
</div>

Notice how there aren't any .first, .last, or .omega classes. The column gutters are created using margin-left which is reset on the first column using :first-child.

Nested Columns

Columns can be nested infinitely by adding .row classes within columns. Basically, just remember that all columns must be wrapped in .row classes, even when nested.

<div class="row">
  <div class="column-6">
    <div class="row">
      <div class="column-3">
        <div class="row">
          <div class="column-1"></div>
          <div class="column-1"></div>
          <div class="column-1"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Prefix & Suffix

Prefixes and suffixes add extra horizontal padding to columns, creating some negative space between or around them.

To add some space to the left of the column add a .prefix-[n] class, where n is the number of grid units the space should take up.

<div class="row">
  <div class="column-5">...</div>
  <div class="column-5 prefix-2">...</div>
</div>

To add some space to the right add a .suffix-[n] class.

<div class="row">
  <div class="column-5">...</div>
  <div class="column-5 suffix-2">...</div>
</div>

By default, prefixes and suffixes only work on top level columns. To use prefixes and suffixes on nested columns generate the grid using the command line tool:

$ shelves --nested-prefixes --nested-suffixes

Push & Pull

Pushes and Pulls shift columns around visually, allowing the source to remain the same. This is great for SEO or mobile content heirarchy. The classes pretty much always mirror each other, meaning you push a column to take the place of another, which is pulled in the other direction.

To move a column to the right add a .push-[n] class, where n is the number of grid units the column should shift. And .pull-[n] shifts the column to the left.

<div class="row">
  <div class="column-8 push-4">Content on the Right</div>
  <div class="column-4 pull-8">Sidebar on the Left</div>
</div>

By default, pushes and pulls only work on top level columns. To use pushes and pulls on nested columns generate the grid using the command line tool:

$ shelves --nested-pushes --nested-pulls

Visibility Helpers

Use these visibility helper classes to show and hide content based on the device resolution. Obviously, this should be used sparingly, but sometimes it is necessary.

<div class="visible-mobile">Visible only on Mobile Devices</div>
<div class="hidden-desktop">Visible on everything but Desktop Devices</div>