From 9c447a9abb45df2765a8878237c97e44dc103a3e Mon Sep 17 00:00:00 2001 From: Patrick Cartlidge Date: Fri, 24 Jun 2022 16:13:58 +0100 Subject: [PATCH 1/2] Add static spacing override classes to overrides New spacing override classes which use the static spacing at all viewports. The existing spacing override classes use the responsive spacing helper, and so will have different spacing at different viewports. These helper classes are used in components in govuk_publishing_components and the option to use not-responsive spacing would be useful in specific areas of GOV.UK. --- src/govuk/overrides/_spacing.scss | 59 ++++++++++++++++++++++++------- 1 file changed, 47 insertions(+), 12 deletions(-) diff --git a/src/govuk/overrides/_spacing.scss b/src/govuk/overrides/_spacing.scss index 7c21fa64d8..1113077043 100644 --- a/src/govuk/overrides/_spacing.scss +++ b/src/govuk/overrides/_spacing.scss @@ -2,6 +2,8 @@ /// @group overrides //// +// stylelint-disable declaration-no-important + /// Directions for spacing /// /// @type Map @@ -14,25 +16,27 @@ $_spacing-directions: ( "left" ) !default; -/// Spacing override classes +/// Generate responsive spacing override classes /// /// Generate spacing override classes for the given property (e.g. margin) -/// for each point in the spacing scale. +/// for each point in the responsive spacing scale. /// /// @param {String} $property - Property to add spacing to (e.g. 'margin') /// -/// @example scss -/// .govuk-\!-margin-0 { -/// margin: 0; -/// } +/// @example css +/// .govuk-\!-margin-4 { +/// margin: 15px !important; +/// } /// -/// .govuk-\!-margin-top-1 { -/// margin-top: [whatever spacing point 1 is...] -/// } +/// @media (min-width: 40.0625em) { +/// .govuk-\!-margin-4 { +/// margin: 20px !important; +/// } +/// } /// /// @access private -@mixin _govuk-generate-spacing-overrides($property) { +@mixin _govuk-generate-responsive-spacing-overrides($property) { // For each point in the spacing scale (defined in settings), create an // override that affects all directions... @each $scale-point, $scale-map in $govuk-spacing-responsive-scale { @@ -52,7 +56,38 @@ $_spacing-directions: ( } } +/// Generate static spacing override classes +/// +/// Generate spacing override classes for the given property (e.g. margin) +/// for each point in the non-responsive spacing scale. +/// +/// @param {String} $property - Property to add spacing to (e.g. 'margin') +/// +/// @example css +/// .govuk-\!-static-margin-4 { +/// margin: 20px !important; +/// } +/// +/// @access private +@mixin _govuk-generate-static-spacing-overrides($property) { + @each $spacing-point in map-keys($govuk-spacing-points) { + .govuk-\!-#{$property}-static-#{$spacing-point} { + #{$property}: govuk-spacing($spacing-point) !important; + } + + @each $direction in $_spacing-directions { + + .govuk-\!-#{$property}-#{$direction}-static-#{$spacing-point} { + #{$property}-#{$direction}: govuk-spacing($spacing-point) !important; + } + } + } +} + @include govuk-exports("govuk/overrides/spacing") { - @include _govuk-generate-spacing-overrides("margin"); - @include _govuk-generate-spacing-overrides("padding"); + @include _govuk-generate-responsive-spacing-overrides("margin"); + @include _govuk-generate-responsive-spacing-overrides("padding"); + + @include _govuk-generate-static-spacing-overrides("margin"); + @include _govuk-generate-static-spacing-overrides("padding"); } From 959aa4debd78e2648c454b33fc741f638dd39e0d Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 2 Aug 2022 10:06:24 +0100 Subject: [PATCH 2/2] Document in CHANGELOG --- CHANGELOG.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 18037dab14..8ee3ae2ba3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,22 @@ Components that have been updated to support this syntax are: This was added in [pull request #2734: Update various components to be callable](https://github.com/alphagov/govuk-frontend/pull/2734). +#### Use new override classes to apply static spacing + +You can now use static spacing override classes to apply spacing from [the static spacing scale](https://design-system.service.gov.uk/styles/spacing/#static-spacing) to elements of your design. + +The new classes start with: `govuk-!-static` 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. + +For example: + +- `govuk-!-static-margin-9` will apply a 60px margin to all sides of the element at all screen sizes +- `govuk-!-static-padding-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 + +This was added in [pull request #2672: Add static spacing override classes](https://github.com/alphagov/govuk-frontend/pull/2672). Thanks to [Patrick Cartlidge](https://github.com/patrickpatrickpatrick) for this contribution. + ### Deprecated features #### Remove deprecated `govuk-header__navigation--no-service-name` class in the header