Add automatic vertical spacing modifier for main wrapper #1493
Conversation
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1493
CHANGELOG.md
Outdated
| @@ -408,14 +408,14 @@ changelog](./docs/contributing/versioning.md#updating-changelog). | |||
|
|
|||
| ([PR #1367](https://github.com/alphagov/govuk-frontend/pull/1367)) | |||
|
|
|||
| - Simplify `.govuk-main-wrapper` logic to avoid the need for large modifier in most cases. | |||
| - Add new main wrapper modifier to avoid the need for large modifier in most cases. | |||
There was a problem hiding this comment.
This change note will be removed so I've just done the bare minimum to make this history make sense.
|
I talked to Mark and we think to make the 'opt-in' @36degrees my gut feeling is that this feels really clunky and I'm had me double guessing if we should have this additional class, maybe it is OK for people like Pay to have to override the unwanted spacing since they need to have custom CSS classes anyway. |
| @@ -57,7 +57,7 @@ | |||
| // spacing without the need for the `l` modifier, but it is available in | |||
| // instances where there may be empty elements that would be difficult to | |||
| // remove. | |||
| .govuk-main-wrapper:first-child, | |||
| .govuk-main-wrapper--auto-spacing:first-child, | |||
There was a problem hiding this comment.
I think it might help to clear up some of the confusion if we expand on the comment to say that this bit of code ensures the correct margin when there are no other elements like breadcrumbs or back link above the main container
There was a problem hiding this comment.
I think the comment is slightly out of date as it still talks about the :first-child as if it's always applied.
What about:
// Using the `govuk-main-wrapper--auto-spacing` modifier should apply the
// correct spacing depending on whether there are any elements (such as a back
// link or breadcrumbs) before the `.govuk-main-wrapper` in the
// `govuk-width-container`.
//
// If you need to control the spacing manually, use the
// `govuk-main-wrapper--l` modifier instead.?
NickColley
changed the title
NickColley
force-pushed
the
change-automatic-main-wrapper-behaviour-to-modifier
branch
from
83cddbf to
6ac9180
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1493
CHANGELOG.md
Outdated
| @@ -298,13 +298,17 @@ You can now add attributes like classes, rowspan and colspan to table row header | |||
|
|
|||
| [Pull request #1367: Allow for classes, rowspan, colspan and attributes on row headers](https://github.com/alphagov/govuk-frontend/pull/1367). Thanks to [edwardhorsford](https://github.com/edwardhorsford). | |||
|
|
|||
| ### Use page wrappers without a modifier | |||
There was a problem hiding this comment.
@m-green this updates how the page wrapper works
There was a problem hiding this comment.
Some minor tweaks from me - mainly to make sure we match the language in https://design-system.service.gov.uk/styles/layout/.
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1493
We have found relying on `:first-child` alone is a breaking change.
NickColley
force-pushed
the
change-automatic-main-wrapper-behaviour-to-modifier
branch
from
e6a4f35 to
f68c0c1
Compare
NickColley
deleted the
change-automatic-main-wrapper-behaviour-to-modifier
branch
We have found relying on
:first-childalone for automatic spacing can be a a breaking change.So we have changed this implementation slightly to be opt-in.
We intend to change the guidance (non-blocking v3) alphagov/govuk-design-system#887, users can then remove this class easily if they do not need the custom spacing.
Closes #1479
Previous pull request: #1371