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.
WidthPixelsRemsScaleSASS variable
2px0.125rema$spacing-xx-small
4px0.25remb$spacing-x-small
8px0.5remc$spacing-small
16px1remd$spacing-medium
32px2reme$spacing-large
48px3remf$spacing-x-large
64px4remg$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]({{ site.baseurl }}{% link foundations/responsive.md %}#breakpoints) (xs, sm, md, lg or xl).

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

Padding

WidthTopRightBottomLeftVert.Horiz.
0pt--0pr--0pb--0pl--0pv--0ph--0
a
xx-small
pt--apr--apb--apl--apv--aph--a
b
x-small
pt--bpr--bpb--bpl--bpv--bph--b
c
small
pt--cpr--cpb--cpl--cpv--cph--c
d
medium
pt--dpr--dpb--dpl--dpv--dph--d
e
large
pt--epr--epb--epl--epv--eph--e
f
x-large
pt--fpr--fpb--gpl--fpv--fph--f
g
xx-large
pt--gpr--gpb--gpl--gpv--gph--g

Margin

WidthTopRightBottomLeftVert.Horiz.
0mt--0mr--0mb--0ml--0mv--0mh--0
a
xx-small
mt--amr--amb--aml--amv--amh--a
b
x-small
mt--bmr--bmb--bml--bmv--bmh--b
c
small
mt--cmr--cmb--cml--cmv--cmh--c
d
medium
mt--dmr--dmb--dml--dmv--dmh--d
e
large
mt--emr--emb--eml--emv--emh--e
f
x-large
mt--fmr--fmb--gml--fmv--fmh--f
g
xx-large
mt--gmr--gmb--gml--gmv--gmh--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:

<ul class="list list--unstyled">
{% assign spacingVars = site.data.sass.nice-design-system.items | where_exp: "item","item.context.name contains 'spacing-'" %}
{% for item in spacingVars %}
<li><code>${{ item.context.name }}</code> ({{ item.resolvedValue }}px)</li>
{% endfor %}
</ul>

Usage

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

.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);
    }
}