Responsive spacing

About the responsive spacing scale

Design System components and patterns use a responsive spacing scale so that spacing is consistent across different screen sizes.

The responsive spacing scale increases in multiples of 8 pixels because the Design System uses an 8-pixel grid for the sizing and spacing of components and patterns.

The scale has 10 spacing units (or ‘base units’) with sizes for small and large screens. Large screens are 768px and above.

The sizes of spacing scale units on small and large screens

Spacing unit	Small screens	Large screens
0	0px	0px
1	8px	8px
2	16px	16px
3	24px	24px
4	24px	32px
5	32px	40px
6	40px	48px
7	40px	56px
8	48px	64px
9	56px	72px

Responsive spacing Sass mixins

If you’re writing your own Sass or SCSS, you can use the Design System’s responsive spacing Sass mixins to add the responsive spacing rules to your CSS.

There are 2 mixins, one for margins and one for padding.

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

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

The parameters used in the mixins are:

• unit – 0 to 9 in the spacing scale
• direction – either top, bottom, left or right
• important – optional boolean parameter to add the !important flag, which is false by default
• tuning – optional parameter for small changes to the final value

Example of using a mixin

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

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

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

The code output is:

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

Overriding spacing

We recommend that you follow the Design System’s spacing scale.

You can use spacing override classes if you need to make small changes like adding or removing margins or padding to elements.

Spacing override classes in the Design System CSS use the following structure.

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

The parameters are:

• ds_ prefix – used in all the Design System's CSS classes
• !_ – indicates that this is an override and uses the !important flag in the CSS
• type – either margin or padding
• direction – top, bottom, left, right or omit to apply to all directions
• unit – 0 to 9 on the spacing scale

For example, use:

• class="ds_!_margin--0" to remove all margins at all screen sizes
• class="ds_!_margin--3" to apply a 24px margin on all sides of the element, on all screen sizes
• class="ds_!_margin-bottom--8" to apply a 48px margin to the bottom of the element on small screens, increasing to 64px on larger screens
• class="ds_!_padding-top--4" to apply 24px padding to the top of the element on small screens, increasing to 32px on larger screens

You can apply 2 or more spacing overrides together. For example,

class="ds_!_margin-bottom--4 ds_!_margin-top--2" applies margins of 2 spacing units on top and 4 spacing units on the bottom.