Layout

Grid
Paddings and Margins

The Grid

We use a grid that has no gutters, which makes it simpler than traditional CSS grids. 34 columns is the widest column, but there can be an unlimited number of columns per row.

The .column class is only needed if the columns are floating. .grid* classes can be used for applying standard widths anywhere.

Make sure to clearfix on the columns’ parent.

grid1
30px

grid2
60px

grid3
90px

grid4
120px

grid5
150px

grid6
180px

grid7
210px

grid8
240px

grid9
270px

grid10
300px

grid11
330px

grid12
360px

grid13
390px

grid14
420px

grid15
450px

grid16
480px

grid17
510px

grid18
540px

grid19
570px

grid20
600px

grid21
630px

grid22
660px

grid23
690px

grid24
720px

grid25
750px

grid26
780px

grid27
810px

grid28
840px

grid29
870px

grid30
900px

grid31
930px

grid32
960px

grid33
990px

grid34
1020px

Paddings and Margins

There are three default padding/margin sizes and sass variables:

$defaultUnit:: 30px
$narrowUnit:: 20px
$thickUnit:: 60px

Anything outside of the defaults can be specified, but should be used sparingly

The pink area has narrow padding.

The pink area has normal padding.

The pink area has thick padding.

This has narrow bottom margin.

This has normal bottom margin.

This has thick bottom margin.

Content with no margin offset by the above margin.