The Grid System

Responsive comes, not with one but with 4 tiers of 12 column fluid grids in three variants that allow for granular control over layout across all devices. The system has been written from an entirely mobile first perspective with each level overwriting the previous one as the viewport width scales up.

To prevent content hitting the side of the viewport by standard all grids would be wrapped in a div with the class .container. This constrains the grid to 95% of the viewport width up to a maximum of 1140px.

Right-to-Left Language Support

Adding the attribute dir="rtl" to the html tag will reverse the order of columns and all other column overload behaviour to allow for right-to-left languages.

Fixed Layout

To disable the default fluid grid behaviour and force the grid into a non-responsive layout do the following:

Remove the <meta name="viewport" /> meta tag from the head of your document.
Add the class .fixed to the container.
Use .col-xs-{number} range on the columns.

Heads Up!

The grid system is designed to be used as a wrapping scaffold only. All custom styling should be added to elements within each column. Doing otherwise could break your layout.

Media Queries

The media queries specifying breakpoints are as follows:

Level	Selector	Width
Extra small (initial)	`.col-xs-{number}`	Up to 48em (768px at 16px/1em)
Small	`.col-s-{number}`	48em to 62em (768px to 992px at 16px/1em)
Medium	`.col-m-{number}`	62em to 75em (992px to 1200px at 16px/1em)
Large	`.col-l-{number}`	75em and over (1200px at 16px/1em)

Design guidelines (rendered as png's) for the default grid at maximum widths of 1140px and 970px are available for download here.

Examples

Basic

Here is a very basic example of the grid system. In this example the columns are styled using the .col-s-{number} tier meaning that on viewport widths below 48em (768px at 16px/1em) the columns will collapse to a horizontal layout.

<div class="row">
    <div class="col-s-12">
        12
    </div>
</div>
<div class="row">
    <div class="col-s-11">
        11
    </div>
    <div class="col-s-1">
        1
    </div>
</div>

No Gutter

Adding the class .no-gutter to a row triggers the gutterless column layout.

<div class="row no-gutter">
    <div class="col-s-12">
        12
    </div>
</div>
<div class="row">
    <div class="col-s-11">
        11
    </div>
    <div class="col-s-1">
        1
    </div>
</div>

Padded

Adding the classes .no-gutter .pad-gutter to a row triggers the padded column layout similar to that of Bootstrap.

<div class="row no-gutter pad-gutter">
    <div class="col-s-12">
        <div>12</div>
    </div>
</div>
<div class="row">
    <div class="col-s-11">
        <div>11</div>
    </div>
    <div class="col-s-1">
        <div>1</div>
    </div>
</div>

Fixed

In this example the columns will persist their width from the base view all the way up. This is performed using the .col-xs-{number} tier system.

<div class="row">
    <div class="col-xs-6">
        6
    </div>
    <div class="col-xs-6">
        6
    </div>
</div>

Nesting

Nesting is supported. Add a new .row class to a div to designate a new level.

<div class="row">
    <div class="col-s-6">
        6
        <div class="row">
            <div class="col-s-6">
                6
            </div>
            <div class="col-s-6">
                6
            </div>
        </div>
    </div>
    <div class="col-s-6">
        6
        <div class="row">
            <div class="col-s-6">
                6
            </div>
            <div class="col-s-6">
                6
            </div>
        </div>
    </div>
</div>

Resizing

In this example the grid from each tier is being overwritten as the viewport scales up.

<div class="row">
    <div class="col-xs-6 col-s-4">
        6
    </div>
    <div class="col-xs-6 col-s-4">
        6
    </div>
    <div class="col-xs-12 col-s-4">
        6
    </div>
</div>

Offsetting Columns

Columns can be offset by each column width.

Use classes .offset-{range}-{number} to push by column width.

<div class="row">
    <div class="col-xs-4">4</div>
    <div class="col-xs-4 offset-xs-4">4</div>
</div>
<div class="row">
    <div class="col-xs-4 offset-xs-4">4</div>
</div>

Ordering Columns

The order of columns can be flipped by combining classes .push-{range}-{number} and .pull-{range}-{number}.

<div class="row">
    <div class="col-xs-4 push-xs-8">4</div>
    <div class="col-xs-8 pull-xs-4">8</div>
</div>

Resets

Each tier comes with a .reset-{range} and .reset-{range}-only class which allows you to reset the flow of the layout as the viewport scales. This allows you to perform more complicated layouts with relative ease.

<div class="row">
    <div class="col-s-3 col-m-6">
    </div>
    <div class="col-s-3 col-m-6">
    </div>
    <div class="col-s-3 col-m-6 reset-m">
    </div>
    <div class="col-s-3 col-m-6">
    </div>
</div>