Add static spacing override classes

[owenatgov]

Proposal

Add spacing override classes (eg: govuk-!-margin-bottom-6) that use the static spacing scale rather than the responsive spacing scale.

The desired outcome would be a way to use the classes in such a way that they don't default to the smaller spacing size when moving to mobile. How this might look:

<div class="govuk-!-margin-bottom-6--non-responsive">
...
</div>

The above element would have a bottom margin of 30px across both desktop and mobile instead of moving down to 20px on mobile.

Context

On govuk, we've recently been doing some work to set a new design tone that provides a better experience on smaller devices. We'll be able to see this soon in the launch of the new homepage design. Something we've run into however is that there are instances where we want to maintain spacing across screen sizes in order to both create a consistent experience for users and to adhere to good designs across screen sizes.

We are struggling to meet our needs in a positive way presently. For example, we try to use our govuk heading component in as many places as possible. The bottom margin for this component is handled by a helper in our govuk components repo to create consistent spacing across our components. This spacing helper uses the margin override classes, as seen above, to minimise CSS weight sent to our users, however that means that we're stuck with the responsive spacing by default when it's not always what we want. The best way we've been able to work out to manage this presently is to create custom classes that use the non-responsive govuk-spacing mixin, something we want to avoid doing as we'd be serving extra CSS to our users.

This solution would give us more flexibility in our designs, allowing us to build on top of the design system to create designs that are suitable to the level of information density on govuk whilst still consuming the design system in a positive way.

[36degrees]

Moved to blocked – we still need to write the changelog entry, which we want to do either at the same time or after we write the guidance (alphagov/govuk-design-system#2244).