Grids are based on 12 columns with 15px margin on each side (resulting in 30px gutter) – as specified by Bootstrap's fully responsive grid system.
Three primary grids have been used on the screens and components used throughout this document. The Primary Grid, Large Grid, and Wider Grid will be referenced in the Page Types when outlining max-width, column-width, and alignment.
Standard grids
Primary grid
For screen size <= 768px
For all screen sizes below 768px, use a 4-column mobile grid with 15px margins and 30px gutters (standard bootstrap).
Large grid
For screen size > 768px
The primary content grid is the Large grid size from bootstrap – with a max width of 960px. This keeps body copy line length short enough for comfortable reading. Use this for all body copy containers.
Wider grid
For screen size > 768px
Certain full width elements are allowed to break the 960 max width and continue to scale up with the browser. Those elements (header, footer, elements on the home page and landing pages) have content containers that are allowed to grow past the 960px Large size and adapt to the Wider grid size – maxing out the container width at 1140px.
Spacing
All spacing in the entire design system is based off of 8px increments. 8, 16, 24, 32, etc. The spacing has all been calculated based off of a soft grid.
Example of how all spacing and measurements are in increments of 8.
