Skip to content

Add tablet specific grid column widths #1154

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.

Sign up for GitHub

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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add tablet specific grid column widths #1154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ae166e6
Add tablet specific grid classes
colinrotherham Feb 21, 2025
9588ca3
Add changelog entry
colinrotherham May 12, 2025
0e9de01
Update examples
colinrotherham May 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,18 @@ We've added styling for a blue button, to be used for login buttons, for example

This was added in [pull request #992: Add NHS login buttons](https://github.com/nhsuk/nhsuk-frontend/pull/992).

#### Add tablet specific grid column widths

We've added new classes to define different grid behaviour for the tablet and desktop breakpoints. For example, you can make a column one-half on tablet but expand to two-thirds on desktop sized screens.

```html
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-one-half-from-tablet nhsuk-grid-column-two-thirds">
<!-- Component -->
</div>
</div>
```

#### Add Nunjucks macro option configs

We've added `macro-options.json` files to share component options with ports of NHS.UK frontend and the design system website.
Expand Down
13 changes: 12 additions & 1 deletion app/components/all.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,8 +185,9 @@
}) }}
</li>
</ul>

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
<div class="nhsuk-grid-column-two-thirds-from-tablet nhsuk-grid-column-one-half">

{% call card({
"heading": "If you need help now, but it’s not an emergency",
Expand All @@ -195,6 +196,10 @@
<p class="nhsuk-card__description">Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.</p>
{% endcall %}

</div>

<div class="nhsuk-grid-column-two-thirds-from-tablet nhsuk-grid-column-one-half">

{{ card({
"href": "#",
"clickable": "true",
Expand All @@ -203,6 +208,12 @@
"description": "A quick guide for people who have care and support needs and their carers."
}) }}

</div>
</div>

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">

{{ card({
"imgURL": "https://assets.nhs.uk/prod/images/A_0218_exercise-main_FKW1X7.width-690.jpg",
"href": "#",
Expand Down
9 changes: 9 additions & 0 deletions packages/core/objects/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,15 @@
margin-left: -($nhsuk-gutter-half);
}

// These *must* be defined in a separate loop as they have the same
// specificity as the non-breakpoint specific classes, so need to appear before
// them in the outputted CSS
@each $width in map.keys($nhsuk-grid-widths) {
.nhsuk-grid-column-#{$width}-from-tablet {
@include nhsuk-grid-column($width, $at: tablet, $class: false);
}
}

@each $width in map.keys($nhsuk-grid-widths) {
.nhsuk-grid-column-#{$width} {
@include nhsuk-grid-column($width, $class: false);
Expand Down