Skip to content

Use grid module for StandardLayout, introduce vertical rules#15428

Open
frederickobrien wants to merge 6 commits intomainfrom
grid-api-for-standard-layout
Open

Use grid module for StandardLayout, introduce vertical rules#15428
frederickobrien wants to merge 6 commits intomainfrom
grid-api-for-standard-layout

Conversation

@frederickobrien
Copy link
Contributor

@frederickobrien frederickobrien commented Feb 25, 2026

What does this change and why?

This refactors the StandardLayout to use the grid module, hopefully making it easier to reason with and style. This is with one eye on header standardisation work by @guardian/articles-and-publishing as well as a potential revamp of the interactive layout (see #15358).

As part of this I've had a stab at introducing verticalRules to the grid module, allowing for lines to be added if they're wanted. This first pass at it feels a bit clunky - something that's pure CSS using :before or some such would be nice - but it works by god.

Context

Screenshots

Before After
image image
image image
image image

@frederickobrien frederickobrien self-assigned this Feb 25, 2026
@frederickobrien frederickobrien added the maintenance Departmental tracking: maintenance work, not a fix or a feature label Feb 25, 2026
@frederickobrien frederickobrien added this to the Visuals milestone Feb 25, 2026
@frederickobrien frederickobrien force-pushed the grid-api-for-standard-layout branch from c8e046d to b0f4bf5 Compare February 25, 2026 16:56
@github-actions
Copy link

github-actions bot commented Feb 25, 2026

@frederickobrien frederickobrien changed the title Use Grid API for StandardLayout Use grid API for StandardLayout Feb 25, 2026
@frederickobrien frederickobrien force-pushed the grid-api-for-standard-layout branch from bb14535 to b752a6f Compare February 27, 2026 14:21
@frederickobrien frederickobrien changed the title Use grid API for StandardLayout Use grid module for StandardLayout, introduce vertical rules Feb 27, 2026
@frederickobrien frederickobrien force-pushed the grid-api-for-standard-layout branch 3 times, most recently from ab9a1c2 to 0646448 Compare March 3, 2026 12:27
@frederickobrien frederickobrien marked this pull request as ready for review March 3, 2026 12:27
@github-actions
Copy link

github-actions bot commented Mar 3, 2026

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@frederickobrien frederickobrien force-pushed the grid-api-for-standard-layout branch from 81a91f8 to e67e85c Compare March 3, 2026 14:32
display: block;
padding-top: 6px;
${grid.column.right};
grid-row: 1 / span 999;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
grid-row: 1 / span 999;
grid-row: 1 / -1;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

maintenance Departmental tracking: maintenance work, not a fix or a feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants