Grid

We use a 12-column grid with a default grid-gutter of 16px. Columns that add-up to more than 12 automatically get some space in-between. So you can use grids for dayz 'yo.

Spacing modifiers

You can change the spacing in-between each block with the following modifiers to .row

ClassDescription
.row--collapse
.row--collapse@{small,medium,large}
Remove gutters
.row--largeGutter
.row--largeGutter@{small,medium,large}
Gutters will have the equivalent spacing of 32px
.row--xlargeGutter
.row--xlargeGutter@{small,medium,large}
Gutters will have the equivalent spacing of 64px

Size modifiers

Columns are constructed with the following naming pattern: .column-{1-12}. If you'd like to present different block widths on certain breakpoints, you can use the following: .column-{1-12}@{small,medium,large}.

You can chain these classes together for unique widths based on our global breakpoints: .column-8@small column-6@medium column-4@large.

Alignment modifiers

You can use alignment properties attached to .row from the Flex utility.

Source order modifiers

Depending on the screen-size, you may need to adjust the order of illustrations and/or text. You may use the .column--first or .column--last modifier attached directly to a specific .column.

ClassDescription
.column--first
.column--first@{small,medium,large}
Column will appear first on specified size regardless of DOM position.
.column--last
.column--last@{small,medium,large}
Column will appear last on specified size regardless of DOM position.