Responsive spacing

Grid

The Design System uses an 8 pixel grid. This defines the width, height and spacing of all components and patterns we use.

Sizes are multiples of 8 pixels. This is to make sure the components we create in the Design System fit on the grid and align on the page.

Responsive spacing scale

The Design System uses a responsive spacing scale. This is for consistent use of spacing which adapts to different screen sizes.

The scale is made up of 10 spacing units. Each unit has a specific size for use on large and small screens.

Example of spacing applied to Design System components

Why we use this scale

Using the scale ensures the spacing of components and patterns is consistent on digital sites or services.

The scale’s range is enough to balance interactive elements with white space. This helps to define the structure and visual hierarchy in all compositions.

The scale adapts to different screen sizes. Responsive margins and padding are smaller on small screens than on a large screen such as a desktop computer. This helps to optimise the use of space on different devices.

Using the scale in your project

Most Design System components have responsive spacing baked into them, so that Design System components will be spaced appropriately relative to each other when you use them.

Override classes

The Design System provides spacing override classes that you can add to any element to give it responsive spacing rules for margins or padding. The class names for these follow a naming convention.

class="ds_!_{type}{direction}--{unit}"

• ds_ is the prefix used throughout the Design System to namespace styles so that conflicts are minimised.
• !_ indicates that this is an override and uses the !important flag in the CSS
• {type} could be either margin or padding depending on the spacing type you want to add.
• {direction} specifies which direction to set the override for. Permitted values are top, bottom, left and right. If a direction is not provided the override will be applied to all directions.
• {unit} indicates which unit in the spacing scale to use, from 0 to 9.

There are very many spacing override classes, structured according the the naming convention, and it would be overkill to document them all. Here are some examples of override classes and descriptions of what they do.

Margin on all sides

class="ds_!_margin--3"

This will apply a margin of 3 spacing units on all sides of the element, which is 24px on all screen sizes.

Margin on one side

class="ds_!_margin-bottom--8"

This will apply a margin of 8 spacing units to the bottom of the element, which is 48px on small screens and 64px on larger screens.

Padding on one side

class="ds_!_padding-top--4"

This will apply padding of 4 spacing units to the top of the element, which is 24px on small screens and 32px on larger screens.

Multiple overrides used together

class="ds_!_margin-bottom--4  ds_!_margin-top--2"

Multiple spacing overrides can be used together. Here an element is given a margin of 2 spacing units on top and a margin of 4 spacing units on the bottom.

Responsive spacing mixins

If you are authoring your own Sass/SCSS you can use the Design System’s responsive spacing mixins to add the responsive spacing rules to your CSS.

There are two mixins, one for margins and one for padding. They are used the same way and both use the same parameters.

@include ds_responsive-margin(unit, direction, important, tuning)

@include ds_responsive-padding(unit, direction, important, tuning)

• unit indicates which unit in the spacing scale to use, from 0 to 9.
• direction specifies which direction to set the spacing for. Permitted values are top, bottom, left and right.
• important is an optional parameter that tells the mixin to add the !important flag. By default it is false.
• tuning is an optional parameter for an adjustment to the final value. It is typically used to compensate for the addition of a border.

Usage example: the Design System’s horizontal rule

This is the SCSS code for the Design System’s horizontal rule, illustrating how to use the responsive spacing mixins.

/// [1] compensate for border
hr {
    border: none;
    border-top: 1px solid $ds_colour__grey--medium;

    @include ds_responsive-margin(4, top);
    @include ds_responsive-margin(4, bottom, false, -1px); /// [1]
}

This is the output of that code.

hr {
  border: none;
  border-top: 1px solid #b3b3b3;
  margin-top: 1.5rem;
  margin-bottom: calc(1.5rem + -1px);
}

@media (min-width: 768px) {
  hr {
    margin-top: 2rem;
  }
}

@media (min-width: 768px) {
  hr {
    margin-bottom: calc(2rem + -1px);
  }
}