Layout

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid1
30px
grid2
60px
grid2
60px
grid2
60px
grid2
60px
grid2
60px
grid2
60px
grid2
60px
grid2
60px
grid2
60px
grid2
60px
grid2
60px
grid2
60px
grid2
60px
grid2
60px
grid2
60px
grid2
60px
grid2
60px
grid3
90px
grid3
90px
grid3
90px
grid3
90px
grid3
90px
grid3
90px
grid3
90px
grid3
90px
grid3
90px
grid3
90px
grid3
90px
grid4
120px
grid4
120px
grid4
120px
grid4
120px
grid4
120px
grid4
120px
grid4
120px
grid4
120px
grid5
150px
grid5
150px
grid5
150px
grid5
150px
grid5
150px
grid5
150px
grid6
180px
grid6
180px
grid6
180px
grid6
180px
grid6
180px
grid7
210px
grid7
210px
grid7
210px
grid7
210px
grid8
240px
grid8
240px
grid8
240px
grid8
240px
grid9
270px
grid9
270px
grid9
270px
grid10
300px
grid10
300px
grid10
300px
grid11
330px
grid11
330px
grid11
330px
grid12
360px
grid12
360px
grid13
390px
grid13
390px
grid14
420px
grid14
420px
grid15
450px
grid15
450px
grid16
480px
grid16
480px
grid17
510px
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.