Allow creating custom width containers and using them with template #1626
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1626
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1626
NickColley
reviewed
Oct 31, 2019
hannalaakso
force-pushed
the
extend-width-container-mixin
branch
from
3d1c70d
to
c2266d3
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1626
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1626
36degrees
reviewed
Nov 4, 2019
hannalaakso
force-pushed
the
extend-width-container-mixin
branch
from
b178440
to
dd95356
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1626
NickColley
reviewed
Nov 4, 2019
| @@ -4,7 +4,34 @@ | |||
|
|
|||
| ### New features | |||
|
|
|||
| #### Allow attributes to be set on `<body>` of template | |||
| #### Create custom width container classes | |||
There was a problem hiding this comment.
Very good work on the CHANGELOG, nice 👍
NickColley
approved these changes
Nov 4, 2019
Default the width to `$govuk-page-width`. Default the units to pixels if no unit is specified. The mixin can be used for creating custom width container classes which can be used for setting the width of both the main page content and for the header and footer.
This is necessary for setting custom width classes to override `.govuk-width-container`. Follow the naming of header and footer which have `containerClasses` which are "Classes that can be added to the inner container, useful if you want to make the header/footer full width."
hannalaakso
force-pushed
the
extend-width-container-mixin
branch
from
dd95356
to
1fe97a2
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1626
Set it on the template, header and footer containers. I’ve used BEM for the custom class name as it feels clearer and in the spirit of what this is doing (creating something based on the default width class), although actually nothing is being inherited from `.govuk-width-container`. There’s a difference in how the header and footer treat `.govuk-width-container`: footer hardcodes the class whereas header overrides it with `containerClasses`. As nothing is being inherited from `.govuk-width-container` don't pass it again unnecessarily, only `.govuk-width-container—wide`.
hannalaakso
force-pushed
the
extend-width-container-mixin
branch
from
1fe97a2
to
8b8415d
Compare
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR:
govuk-width-containermixin to accept a width. It defaults to$govuk-page-widthso thatgovuk-width-containerclass will continue to function as before. The mixin defaults to pixels if no unit is specified..govuk-width-containerby default. I called the new template optioncontainerClassesfollowing the naming in the header and footer which havecontainerClasses. These are "Classes that can be added to the inner container, useful if you want to make the header/footer full width."app.scssas doing so feels clearer and in the spirit of what this is doing (creating something based on the default width class), although actually nothing is being inherited from.govuk-width-container. Note that there’s a difference in how the header and footer add thegovuk-width-containerclass: footer hardcodes the class whereas header overrides it withcontainerClasses. As nothing is being inherited from.govuk-width-containerI'm not passing it again unnecessarily to the header.Tested on:
🍏 Chrome
🍏 FF
🍏 IE11
🍏 IE8
Fixes #1567
Additionally, we'll be able to fix alphagov/govuk-design-system#798 when this PR is released.