Space

Space is a key component of design, not an accidental gap which appears between components. It helps users understand how components relate to each other, and find and focus on the content they want to consume.

A series of space values enables more efficient design decision making. The space palette comprises multiples of the body font size of 18px.

These values can be combined to create fluid spaces whose size depends on the browser’s current viewport width. This is a very code-efficient way to ensure designs always make the most of the available screen space and feel at home on any device.

To see this in action, resize your browser window and watch the red squares below scale at different rates.

CSS custom properties

Underpinning the fluid space system is a set of calculations made by CSS custom properties. Using the CSS lock technique, these fluid space units can be used with the following syntax:

.c-component {
  padding: var(--space-s);
}

However, this syntax should be avoided if at all possible. Unless there are calc() calculations to be made (calc(var(--space-xs) + 10px)), you should use the SCSS or utility class syntax. This provides a sensible fallback for older browsers.

SCSS mixin

Fluid space is exposed via a number of mixins. As IE support is required and CSS Custom Properties are doing most of the heavy lifting in this fluid system, we need to be able to fallback to sensible defaults, without including an absurd number of media queries, as is usually achieved with CSS locks.

There is a space() mixin that allows you to pass a property and up to four arguments. These map directly to the padding/margin shorthand arguments of top, right, bottom, and left:

.c-component {
  @include padding('s', 0);
}

There are also mixins for the four direction properties:

.c-component {
  @include margin-left('s');
}

Space units can also be interpolated to give a sliding scale from smaller to larger screens. This example runs the top margin between 'small' and 'medium', the right & left as 'large', and the bottom as 4rem:

.c-component {
  @include margin('s-m', 'l', 4rem);
}

Source → Compiled

Utility classes

As well as custom properties, space units can be applied using utility classes, with one set for padding and another for margins.

<div class="u-margin-bottom-s"></div> // Small margin bottom
<div class="u-pad-y-l"></div> // Large padding top and bottom
<div class="u-margin-bottom-l-xl"></div> // Large to Extra Large margin bottom