-
Notifications
You must be signed in to change notification settings - Fork 320
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update padding of govuk-main-wrapper #1073
Conversation
CHANGELOG.md
Outdated
@@ -12,6 +12,12 @@ | |||
|
|||
([PR #N](https://github.com/alphagov/govuk-frontend/pull/N)) | |||
|
|||
- Update padding of govuk-main-wrapper |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not 100% sure this is a breaking change, but we have not really figured out if rhythm changes should count as a breaking change...
@dashouse I've had another look at this, I think we could ship this as a fix, I'm not sure it's risky enough to be a breaking change. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree. Sshhhippit! 🚀
Will update the branch... |
86e8574
to
026848a
Compare
After a discussion on the GOV.UK Design System Backlog (alphagov/govuk-design-system-backlog#64 (comment)) I looked into the spacing above the h1 to make it equal with the spacing underneath, which is more inline with GOV.UK.
I have made a manual adjustment that increases the padding of
govuk-main-wrapper
by 10px on tablet and up only.From:
30px tablet and up > 20px mobile
To:
40px tablet and up > 20px mobile
This breaks the responsive spacing scale intentionally as we are looking to replicate the margin of
govuk-heading-xl
(50px > 30px) whilst accommodating the margin-bottom / white space of the the back link / breadcrumbs (~10px).From tablet, 40px padding-top on
govuk-main-wrapper
+ 10px margin-bottom of back link = 50px.On mobile, 20px padding-top on
govuk-main-wrapper
+ 10px margin-bottom of back link = 30pxThis now equals
govuk-heading-xl
(50px > 30px)Before (GOV.UK | GOV.UK Frontend)
After (GOV.UK | GOV.UK Frontend)