We’re using a 12-column grid system based off of the Neat framework by Thoughtbot. Column width classes are provided to quickly build basic grid layouts that default to 100% width on mobile. For nested grids or more nuanced responsiveness, use the build in Neat Sass mixins.

Column classes

.col-1 .col-2 .col-3 .col-4 .col-5 .col-6 .col-7 .col-8 .col-9 .col-10 .col-11 .col-12

.col-8
.col-4

Shift classes

.shift-1 .shift-2 .shift-3 .shift-4 .shift-5 .shift-6 .shift-7 .shift-8 .shift-9 .shift-10 .shift-11 .shift-12

.col-8 .shift-2

Example Grid Box with Multiple Rows

.col-12
.col-6
.col-6 .end-row
.col-4
.col-8 .end-row
.col-3
.col-9

Notes

  1. If a grid box needs to contain more than one row, the class .end-row is required on the last item of each row.