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 |
|---|---|
| Small | 540 px |
| Medium | 720 px |
| Large | 840 px |
| Extra Large | 960 px |
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.