Foundations

The 8-Point Grid

We use a 12 column grid. As the screen size responds the grid reduces to 6 columns and then 4 columns. Design for different screen sizes rather than specific devices. Multiples of 8 are used to define dimensions, padding, and margin of elements.


The lowest spacing value available to use is 4px, this is half the base value of 8px.
 Only multiples of 8 are to be used in spacing e.g. 16, 24, 32 and not multiples of 4 e.g. 20, 28, 36.

Spacing

Grids

320px

375px

576px

620px

768px

992px