Skip to content

Commit

Permalink
Document static spacing override classes
Browse files Browse the repository at this point in the history
Static spacing override classes are being introduced to GOV.UK Frontend (alphagov/govuk-frontend#2672).

Document the new classes so that users know how they work, and how they compare to the existing responsive spacing override classes.
  • Loading branch information
36degrees committed Jul 29, 2022
1 parent 4909b71 commit 0701a89
Showing 1 changed file with 13 additions and 3 deletions.
16 changes: 13 additions & 3 deletions src/styles/spacing/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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"}) }}
Expand Down

0 comments on commit 0701a89

Please sign in to comment.