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:

• The majority of devices have a screen width and height with at least one side being divisible by 8 - helping the UI look in proportion
• Even though some Apple devices don’t fit in to this category they recommend using an 8px x 8px grid https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/image-size-and-resolution/#designing-high-resolution-artwork

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

To copy any of the text values to your clipboard, click on the cell containing your required value.