Limiting content width when using wider page layouts

[edwardhorsford]

Raising this as it's something we've come across and perhaps other teams would too.

My service is about to move to a wider default page width - 1200px. We do this to accommodate our service's needs and take advantage of our users having more screen real estate.

In moving to 1200px width, it means lines of content inside a 2/3 column now become too long.

The design system site itself solves this by setting max width on specific elements.

We've done similar, but set a fixed width of 722px for all elements.

Should these max-widths on content lines be set by default?

Suggestion:

Given the design system supports other widths, I wonder if one of the following might happen:

1. Review guidance on width in grid system - would be good to mention explicitly that services will need to limit content lines.
2. Include styles to limit specific items to no more than x width.

NB - the design system has 'Limiting width of content' - but this is not specific about textual content - which could possibly be covered separately.

Detail

As well as the elements the design system site limits, we're also considering following elements:

• legend,
• label,
• govuk-hint,
• input,
• textarea,
• select,
• govuk-details__summary,
• govuk-details__text,
• govuk-inset-text,
• govuk-panel__body,
• govuk-warning-text__text

[edwardhorsford]

I've gone through the design system site, and I think these are the classes a team might want to set a max width on:

.govuk-heading-s,
.govuk-heading-m,
.govuk-heading-l,
.govuk-heading-xl,
.govuk-body,
.govuk-body-l,
.govuk-body-s,
.govuk-caption-m,
.govuk-caption-l,
.govuk-caption-xl,
.govuk-link,
.govuk-list,
.govuk-label,
.govuk-hint,
.govuk-input,
.govuk-fieldset__legend,
.govuk-fieldset__heading,
.govuk-accordion__section-heading,
.govuk-textarea,
.govuk-details__summary,
.govuk-details__text,
.govuk-error-message,
.govuk-error-summary__title,
.govuk-inset-text,
.govuk-panel__title,
.govuk-panel__body,
.govuk-warning-text__text,
.govuk-phase-banner__content,
.govuk-select,
.govuk-table__caption,

Spitballing: I wonder if it's possible to provide a macro or something for targeting these?

govuk-inset-text is a bit awkard as it targets the component and not the contents - which might not need limiting. But since the component doesn't expose anything else, it would have to do.

Edit: Table / summary list items should also probably be included, but I'm not sure if that would break layout or not.

[chrimesdev]

In the NHS.UK frontend, we have something known as a "reading width" utility class, which does this. We did some research a while back and found the optimum amount of characters for reading was around 70-80 characters per line, so calculated the max-width with our typography sizing. This would probably work for components too.

You can see the reading width guidance and example here: https://beta.nhs.uk/service-manual/styles-components-patterns/layout#utility-classes

The code can be found here: https://github.com/nhsuk/nhsuk-frontend/blob/master/packages/core/utilities/_reading-width.scss and https://github.com/nhsuk/nhsuk-frontend/blob/master/packages/core/tools/_mixins.scss

Don't know if you'd find this approach useful, rather than having apply a max width to each of the components. I suppose this gives a bit more control to the user.

[NickColley]

Thanks for sharing that @AdamChrimes, very useful.

A related feature request has come up before too: https://github.com/alphagov/govuk-frontend/issues/760

[edwardhorsford]

@AdamChrimes thanks, good to see I'm not alone in wanting this.

In my case I've gone for pixels rather than ems because I also want things to align visually - and using ems I think you'd have headings wider than than body.

Applying max-width to the classes is easier for me as it means touching less of our templates - but we should consider whether a utility class would be more appropriate. Or scoping the changes to children of a parent container.

---

Doing this has thrown up that I need to do:

.govuk-input:not([class*="govuk-input--width-"]),

As the fixed width classes have the same specificity as govuk-input. For preference I think they should probably be more specific / use !important.

It's also highlighted some issues in our service where we were using one of the above classes to get the css, but on a non content-containing element (eg using govuk-body on a div).