Grid

The grid is 15 columns with a 21 px gutter that matches the body text font size. The grid applies the gutter to either side of the column. The container is centrally aligned to the viewport.

Breakpoint Container Width
Small540 px
Medium720 px
Large840 px
Extra Large960 px

Grid

Fields

At the lg breakpoint 862 px the grid splits into two fields of 4 columns and 10 columns. The second field is offset by one column.

Vertical spacing

Spacing is derived from the line-height of body text which is 32 px. This is extrapolated in a scale to make use of Bootstrap’s SASS map.

Scale Size Ratio to line-height
1 8 px Quarter
2 16 px Half
3 32 px
4 48 px One and a half
5 64 px Double
6 128 px Quadruple
7 256 px Eight times

Page Margins

The container is centred using auto margin. Nothing novel. The main text block applies a technique derived from book layout whereby the the page margins are in proportion to each other.

The bottom margin is twice that of the top margin using the vertical spacing units .mt-6 and .mt-7. At the moment this margin is fixed at all breakpoints.