Spacing

Introduction

Keep a consistent vertical and horizontal rhythm between elements on a page.

Spacing values should be applied both within a component and between components/sections of a page. Built in components come with spacing built in but can be overridden with classes where appropriate.

Spacing scale

Our spacing is set out on a non-linear scale, to avoid ambiguity between adjacent values: it should be obvious which value to use in each use-case.

spacing is based off a 4px baseline
default spacing is provided within typography, grid and all components
use CSS classes or SASS variables in code rather than pixel values directly.

Pixels	Rems	Scale	SASS variable
2px	0.125rem	a	`$spacing-xx-small`
4px	0.25rem	b	`$spacing-x-small`
8px	0.5rem	c	`$spacing-small`
16px	1rem	d	`$spacing-medium`
32px	2rem	e	`$spacing-large`
48px	3rem	f	`$spacing-x-large`
64px	4rem	g	`$spacing-xx-large`

CSS classes

Typography, components, containers and grids have built in spacing, but sometimes it is necassary to override this default spacing. This can be done via CSS helper classes for overriding margin and/or padding.

These classes are named using the format:

{property}{sides}--{size}

Where:

{property} is either m (for margin) or p (for padding)
{sides} is one of t / r / b / l or h / v for horizontal/vertical
{size} is either 0 or one of a - g from the spacing scale above.

For example pv--e or mt--0.

Responsive

Use the following format for classes to change spacing across break points:

{property}{sides}--{size}-{breakpoint}

Where {breakpoint} is one of our breakpoints (xs, sm, md, lg or xl).

For example pb--c-md or mh--0-sm.

Padding

Width	Top	Right	Bottom	Left	Vert.	Horiz.
0	`pt--0`	`pr--0`	`pb--0`	`pl--0`	`pv--0`	`ph--0`
a xx-small	`pt--a`	`pr--a`	`pb--a`	`pl--a`	`pv--a`	`ph--a`
b x-small	`pt--b`	`pr--b`	`pb--b`	`pl--b`	`pv--b`	`ph--b`
c small	`pt--c`	`pr--c`	`pb--c`	`pl--c`	`pv--c`	`ph--c`
d medium	`pt--d`	`pr--d`	`pb--d`	`pl--d`	`pv--d`	`ph--d`
e large	`pt--e`	`pr--e`	`pb--e`	`pl--e`	`pv--e`	`ph--e`
f x-large	`pt--f`	`pr--f`	`pb--g`	`pl--f`	`pv--f`	`ph--f`
g xx-large	`pt--g`	`pr--g`	`pb--g`	`pl--g`	`pv--g`	`ph--g`

Margin

Width	Top	Right	Bottom	Left	Vert.	Horiz.
0	`mt--0`	`mr--0`	`mb--0`	`ml--0`	`mv--0`	`mh--0`
a xx-small	`mt--a`	`mr--a`	`mb--a`	`ml--a`	`mv--a`	`mh--a`
b x-small	`mt--b`	`mr--b`	`mb--b`	`ml--b`	`mv--b`	`mh--b`
c small	`mt--c`	`mr--c`	`mb--c`	`ml--c`	`mv--c`	`mh--c`
d medium	`mt--d`	`mr--d`	`mb--d`	`ml--d`	`mv--d`	`mh--d`
e large	`mt--e`	`mr--e`	`mb--e`	`ml--e`	`mv--e`	`mh--e`
f x-large	`mt--f`	`mr--f`	`mb--g`	`ml--f`	`mv--f`	`mh--f`
g xx-large	`mt--g`	`mr--g`	`mb--g`	`ml--g`	`mv--g`	`mh--g`

SASS variables

As well as CSS classes, we provide SASS variables for use in custom components:

the variables are unitless
use these variables rather than pixel values directly
use the variables for things like widths, heights, margins, paddings and borders
wrap in em or rem functions to convert to relative units.

The variables are:

$spacing-xx-small (2px)
$spacing-x-small (4px)
$spacing-small (8px)
$spacing-medium (16px)
$spacing-large (32px)
$spacing-x-large (48px)
$spacing-xx-large (64px)

Usage

These SASS variables should be used in custom components to ensure consistent spacing:

Spacing example

.component {
    border-top: em($spacing-xx-small) solid $colour-border;
    margin: rem($spacing-medium 0 $spacing-large);
    padding: rem($spacing-medium);

    @include mq($from: md) {
        margin: rem($spacing-large 0);
    }
}

Edit on GitHub

This site is no longer maintained