Our grid is split into 12 columns and three sizes; xs, sm and lg. xs represents feature phones, sm represents all smart/touch devices, lg represents desktop devices. Our grid is based on the grid from twitter bootstrap, but we've made the gutters optional and more flexible.
This example uses gutters and varying column widths depending on device size.
.container.grid-demo .row.xs-g.lg-g .col-4 .sub .col-4 .col-8 .sub .col-8 .row.sm-g.lg-g .col-12.sm-4 .sub .col-12.sm-4 .col-12.sm-8 .sub .col-12.sm-8
.container.grid-demo .row .col-12.sm-6.lg-2 .sub .col-12.sm-6.lg-2 .col-12.sm-6.lg-2 .sub .col-12.sm-6.lg-2 .col-12.sm-6.lg-2 .sub .col-12.sm-6.lg-2 .col-12.sm-6.lg-2 .sub .col-12.sm-6.lg-2 .col-12.sm-6.lg-2 .sub .col-12.sm-6.lg-2 .col-12.sm-6.lg-2 .sub .col-12.sm-6.lg-2
.container.grid-demo .row .col-4 .sub .col-4 .col-8 .sub .col-8 .row .col-12.sm-6.lg-4 .sub .col-12.sm-4.lg-4 .col-12.sm-6.lg-8 .sub .col-12.sm-8.lg-8
The gutter is enabled on a row-level and is explicitly enabled for xs, sm, and lg. If a row has a gutter enabled for a size, the contents of that row may not exceed 12 columns, and the contents should not span multiple lines.
For the gutters to work, your columns MUST have the base 'col-X' class.
.container.grid-demo .row.xs-g.sm-g.lg-g .col-1 .sub .col-1 .col-1 .sub .col-1 .col-1 .sub .col-1 .col-1 .sub .col-1 .col-1 .sub .col-1 .col-1 .sub .col-1 .col-1 .sub .col-1 .col-1 .sub .col-1 .col-2 .sub .col-2 .col-2 .sub .col-2 .row.xs-g.sm-g.lg-g .col-4 .sub .col-4 .col-4 .sub .col-4 .col-4 .sub .col-4
.container.grid-demo .row .col-4 .sub .col-4 .col-3.col-offset-2 .sub .col-2.col-offset-3 .col-2.col-offset-1 .sub .col-1.col-offset-2
.container.grid-demo .row .col-8.col-push-4.lg-push-0 .sub .col-8.col-push-4.lg-push-0 .col-4.col-pull-8.lg-pull-0 .sub .col-4.col-pull-8.lg-pull-0
.container.grid-demo .row .col-3 .sub .col-3 .col-2 .sub .col-2 .col-6 .sub .col-6 .col-1 .sub .col-1
.container.grid-demo .row .col-12 .sub .col-12
.container.grid-demo .row .col-6 .sub .col-6 .col-6 .sub .col-6
.container.grid-demo .row .col-3 .sub .col-3 .col-3 .sub .col-3 .col-3 .sub .col-3 .col-3 .sub .col-3
.container.grid-demo .row .col-1 .sub .col-1 .col-1 .sub .col-1 .col-1 .sub .col-1 .col-1 .sub .col-1 .col-1 .sub .col-1 .col-1 .sub .col-1 .col-1 .sub .col-1 .col-1 .sub .col-1 .col-1 .sub .col-1 .col-1 .sub .col-1 .col-1 .sub .col-1 .col-1 .sub .col-1