Spacers

Spacers, the final frontier.


Spacers

Spacers are what we use to define the gaps between elements on the page. We use an 8px spacing system. A comprehensive guide to the 8px spacing system by Bryn Jackson can be found here: https://spec.fm/specifics/8-pt-grid

Here’s a handy little summary:

Spacer values:

  • tiny: 8px
  • small: 16px
  • medium: 24px
  • large: 48px
  • huge: 72px

The values have been picked so that developers and designers can look at designs and interfaces and know the gaps between elements without the need to measure them.

How we use spacers

Spacer values can be obtained by using the getSpacer($size) function, where $size is the english term for the size required.

  • To add medium padding to an element: padding: getSpacer(medium);
  • To add a tiny negative margin: margin: -1 * getSpacer(tiny);

Utility classes

All our spacing values are available as utility classes for margin and padding:

  • To add a large margin-top to an element: <h1 class="gg-u-mt-large">
  • To add a small padding-left to an element: <h1 class="gg-u-pl-small">

margin: auto is also available as a utility class:

  • To add margin: auto to both left and right: <h1 class="gg-u-mlr-auto">
  • To add margin: auto to all sides of an element: <h1 class="gg-u-m-auto">

Design Tokens

Sass JSON Less Value
$gg-grid-unit gg-grid.unit @gg-grid-unit 8px
$gg-spacer-fine gg-spacer.fine @gg-spacer-fine 4px
$gg-spacer-huge gg-spacer.huge @gg-spacer-huge 72px
$gg-spacer-large gg-spacer.large @gg-spacer-large 48px
$gg-spacer-medium gg-spacer.medium @gg-spacer-medium 24px
$gg-spacer-small gg-spacer.small @gg-spacer-small 16px
$gg-spacer-tiny gg-spacer.tiny @gg-spacer-tiny 8px