From 0701a8913a487ce4ac3030e2095c435f4ec52688 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 29 Jul 2022 13:07:26 +0100 Subject: [PATCH] Document static spacing override classes Static spacing override classes are being introduced to GOV.UK Frontend (https://github.com/alphagov/govuk-frontend/pull/2672). Document the new classes so that users know how they work, and how they compare to the existing responsive spacing override classes. --- src/styles/spacing/index.md.njk | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/styles/spacing/index.md.njk b/src/styles/spacing/index.md.njk index a3e79986aa..c378ae3f0e 100644 --- a/src/styles/spacing/index.md.njk +++ b/src/styles/spacing/index.md.njk @@ -179,11 +179,11 @@ margin-top: govuk-spacing(-3); ## Overriding spacing -Occasionally, you might need to make minor adjustments like adding or removing spacing to elements of your design. You can use the responsive spacing override classes for this. +Occasionally, you might need to make minor adjustments like adding or removing spacing to elements of your design. You can use the spacing override classes for this. -### Using the override classes +### Responsive spacing override classes -The spacing override classes start with: `govuk-!-`, followed by either `margin-` or `padding-`, and then a spacing unit number. +The responsive spacing override classes start with: `govuk-!-`, followed by either `margin-` or `padding-`, and then a spacing unit number. To apply spacing in a single direction, include `left-`, `right-`, `top-`, or `bottom-` just before the spacing unit. @@ -193,6 +193,16 @@ For example: - `govuk-!-padding-right-5` will apply 15px of padding to the right side of the element on small screens, increasing to 25px on large screens - `govuk-!-margin-0` will remove all margins at all screen sizes +### Static spacing override classes + +The static spacing override classes work the same way as the responsive spacing override classes, but start with `govuk-!-static`. + +For example: + +- `govuk-!-static-margin-9` will apply a 60px margin to all sides of the element at all screen sizes +- `govuk-!-static-right-5` will apply 25px of padding to the right side of the element at all screen sizes +- `govuk-!-static-margin-0` will remove all margins at all screen sizes, same as `govuk-!-margin-0` + ### Examples {{ example({group: "styles", item: "spacing", example: "spacing-scale-padding", html: true, open: false, size: "l"}) }}