REQ: Utility classes scoped to breakpoints

[paulmsmith]

Utility classes are very useful, they save us needing to write new scss/css selectors to tweak spacing but by default they apply across all 'breakpoints'.

Often as components go from being stacked on small viewports to being laid out in columns for larger viewports, it would be helpful to be able to declaratively adjust that spacing.

For example: .nhsuk-u-margin-bottom-0--from-desktop or .nhsuk-u-margin-bottom-0--until-desktop

[paulmsmith]

As they'd generate a bunch of css perhaps they could be optionally configured in settings? So they are only outputted to css when needed.

[edwardhorsford]

I've certainly come across this need before - though have typically made a custom class then and used the media query mixins to do what I needed.

A risk with these might be that they don't get used?

[paulmsmith]

A risk with these might be that they don't get used?

Yeh, I thought about that. Maybe a Sass setting variable $nhsuk-responsive-utilites or something would prevent them being outputted to the compiled css by default.

[colinrotherham]

GOV.UK Frontend includes *-from-desktop classes:
https://design-system.service.gov.uk/styles/layout/#desktop-specific-grid-classes

I could update our grid styles to pick them up as a freebie?

They've deprecated govuk-grid-row() though and we use it in one place:

https://github.com/search?q=org%3Anhsuk+govuk-grid-row%28&type=code
https://github.com/search?q=org%3ANHSDigital%20govuk-grid-row%28&type=code

Not necessarily a problem

[colinrotherham]

Ahh so the NHS grid layout uses $at: tablet $at: desktop unlike GOV.UK Frontend

So from mobile and up, the class .nhsuk-grid-column-one-quarter kicks in later at desktop (not tablet)

But I've given it a go in #1154 and it's all working 🙌

.nhsuk-grid-column-one-quarter-from-tablet
.nhsuk-grid-column-one-third-from-tablet
.nhsuk-grid-column-one-half-from-tablet
.nhsuk-grid-column-two-thirds-from-tablet
.nhsuk-grid-column-three-quarters-from-tablet
.nhsuk-grid-column-full-from-tablet