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.
By standard all grids are wrapped in a div with the class .container
which constrains the grid to 95% of the viewport width up to a maximum of 1140px.
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.
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.
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.
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 push-xs-right">
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-[size]-[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-[size]-[number]
and .pull-[size]-[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-[size]
and .reset-[size]-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>