Extending govuk-width-container mixin

[Dawdre]

I am currently attempting to modify the $govuk-page-width variable. It is 960px !default.

My goal is to have a BEM modifier on the govuk-width-container. Something like govuk-width-container--wide. I am conditionally applying this via our spring freemarker templating engine. Our desire is to have a wider content space for our large tables with lots of data. Things are becoming squished.

I am looking for a way, whilst avoiding completely copy pasting the code inside your own _width-container.scss and creating a whole new "page-width" variable and mixin that does exactly the same thing apart from passing in a different base value. Without being able to override the current "baked-in" mixin that compiles to min-width: 1020px it appears to be very tricky to do.

Solution 1 I have created my own "measurements" file in my project's directory where I am importing settings/all to gain access to your own _measurements.scss and also importing objects/all to gain access to the govuk-width-container mixin. I then reassign $govuk-page-width:

This only partly works. The new value gets passed through to the max-width property, but it does not get passed into:

govuk-media-query($and: "(min-width: #{($govuk-page-width + $govuk-gutter * 2)})")

As suspected this breaks the expected behaviour. The content pushes up against the window due to the new max-width being wider than the original 1020px breakpoint.

Solution 2 Setting the $govuk-page-width variable in my main.scss. e.g.
$govuk-assets-path: "../../govuk-frontend/govuk/assets/"; $govuk-page-width: 1200px; // import ALL GOVUK components @import '../public/assets/govuk-frontend/govuk/all';

But I feel this goes against modular Sass and doesn't feel maintainable. This also doesn't completely solve my problem as I have now set 1200px across my whole app. I only want it for my modifier class - govuk-width-container--wide.

I could just make a new variable and wrap it in some logic and only apply it when my modifier class is present but that will still not change the fact that if I don't reassign the base $govuk-page-width: 960px !default at some point I will always get the 1020px breakpoint and it will break the expected behaviour.

Are there any suggestions for extending or modifying your mixins and functions for this specifically and generally speaking?

Many thanks

[NickColley]

We're going to make it so you can:

• use the govuk-width-container mixin and specify a width
• will need to work for modifying the with containers within the header and footer
• this will be documented in Sass docs for now

This'll also help us solve this issue too: https://github.com/alphagov/govuk-design-system/issues/798

Thanks for raising.

[Dawdre]

Thanks for your response. Glad I could be helpful :)