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 https://github.com/nhsuk/nhsuk-frontend/pull/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

[frankieroberto]

Is it worth considering reversing this and having the grid classes kick in at tablet+ width, and adding these instead:

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

I have a hunch that people’s expectations are that the default would be for the grid to kick in earlier?

Would be a breaking change though... 🤔

[frankieroberto]

Also the -from-xxx suffixes have the potential for ambiguity and confusion (or is that just me?). Would -on-xxx be clearer? or -xxx-only or -xxx-and-yyy?

[colinrotherham]

For comparison, I've opened a reverse version using ~-from-tablet~ -from-desktop

It would be a breaking change but aligns with GOV.UK Frontend

• https://github.com/nhsuk/nhsuk-frontend/pull/1296

[edwardhorsford]

I think it would probably be better to have grids working from tablet rather than desktop - but it's also potentially an annoying breaking change. As I understand it it was likely done as it suited what the NHS.UK website needed.

[paulmsmith]

I was originally referring to some of the utility classes and making them scoped to breakpoints such as nhsuk-u-margin-bottom-0--from-desktop

[edwardhorsford]

Good point @paulmsmith. @frankieroberto perhaps make a new issue for the point you raise?