Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Allow creating custom width containers and using them with template #1626

Merged
merged 5 commits into from
Nov 4, 2019
Merged

Allow creating custom width containers and using them with template #1626

merged 5 commits into from
Nov 4, 2019

Commits on Nov 4, 2019

  1. Allow govuk-width-container mixin to accept a width 

    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.
    @hannalaakso
    hannalaakso committed Nov 4, 2019
    Configuration menu
    Copy the full SHA
    64db381 View commit details
    Browse the repository at this point in the history

  2. Allow classes to be set on template container 

    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
    hannalaakso committed Nov 4, 2019
    Configuration menu
    Copy the full SHA
    789eb42 View commit details
    Browse the repository at this point in the history

  3. Add an example of creating a custom page width 

    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
    hannalaakso committed Nov 4, 2019
    Configuration menu
    Copy the full SHA
    349fb6c View commit details
    Browse the repository at this point in the history

  4. Update changelog

    @hannalaakso
    hannalaakso committed Nov 4, 2019
    Configuration menu
    Copy the full SHA
    4be4565 View commit details
    Browse the repository at this point in the history

  5. Test output of @mixin govuk-width-container

    @hannalaakso
    hannalaakso committed Nov 4, 2019
    Configuration menu
    Copy the full SHA
    8b8415d View commit details
    Browse the repository at this point in the history