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.

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

[SPIKE] Update to simplified grid layout from GOV.UK Frontend #1154

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

colinrotherham
Copy link
Contributor

Description

This PR is a spike into the simplified grid layout used by GOV.UK Frontend as part of:

I'll follow up with our Sass modules migration in #1137 to see how we can lift-and-shift various govuk-* mixins and functions via @use rather than maintain our own copy


Based on work by @36degrees in the following PRs:

Checklist

colinrotherham and others added 8 commits February 21, 2025 17:47
This is to be consistent with other functions which are namespaced under the govuk prefix.

We keep grid-width as a deprecated alias which we can remove in the next major version.

See: alphagov/govuk-frontend#1090

Co-authored-by: Oliver Byford <[email protected]>
Wrapping the row functionality up in a mixin offers little other than the ability to use a custom name, but we’re not sure there’s a need for users to do that.

Simplify the code by deprecating the mixin and just using the code to create the concrete class directly.

See: alphagov/govuk-frontend#1090

Co-authored-by: Oliver Byford <[email protected]>
The class names generated by the mixin are not flexible enough, as the width is just appended to the class name. In spiking how we might add an extended grid we found the generated class names a little yoda-ish, for example `govuk-grid-column--at-desktop-one-quarter` (bonus points if you actually read that in Yoda’s voice).

Moving the class naming out of the mixin and doing it within the objects layer is also more consistent with the rest of Frontend, and means that users who do use the grid mixins directly don’t have to fit with the constraints of our class name structure.

See: alphagov/govuk-frontend#1090

Co-authored-by: Oliver Byford <[email protected]>
Inspired by “desktop specific grid classs” in: alphagov/govuk-frontend#1094
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant