USWDS - Layout grid utility: Custom breakpoints by amyleadem · Pull Request #6083 · uswds/uswds

amyleadem · 2024-09-26T21:21:24Z

Summary

A potential addition to PR #6048

Added support for generating custom breakpoints for layout grid utility classes.

Breaking change

This is not a breaking change.

Related issue

Related to #5984

Related pull requests

Potential addition to #6048

Preview link

Storybook

Problem statement

In PR #6048, we added support to create custom breakpoints with the theme setting $theme-utility-breakpoints-custom. However, this setting did not generate custom breakpoints for layout grid.

Solution

This PR generates custom responsive variants for grid-col, grid-gap, grid-offset, and grid-container classes.

Note

The media queries for grid-container have some pre-existing quirks that should probably be broken out into a separate issue. Here is an example:

@media all and (min-width: 30em) and (min-width: 64em){
  .mobile-lg\:grid-container-card{
    padding-left:2rem;
    padding-right:2rem;
  }
}

These media queries have multiple min-width declarations, which are redundant and at times contradictory. This PR does not attempt to address this pre-existing issue.

Performance impact

Including custom breakpoints for layout grid classes adds 8kb to the compiled CSS file. Here are the details on CSS size:

Description	CSS size
With default breakpoints	524kb
With 1 new custom breakpoint without layout grid (`cm-custom-breakpoints` branch)	572kb
With 1 new custom breakpoint with layout grid (this branch)	580kb

Testing and review

Checkout the al-test-custom-breakpoints branch in uswds-sandbox.

Use the following code in uswds-theme.scss:

@use "uswds-core" with (
  $theme-utility-breakpoints-custom: (
    "new-breakpoint": 800px
  ),
  $theme-utility-breakpoints: (
    widescreen: true,
  )
);

Run npx gulp buildSass and navigate to _site/assets/css/styles.css
In styles.css, search for:
- .widescreen\:grid-container and .new-breakpoint\:grid-container. Confirm that the style rules match for the two rules, with the exception of a different media query width.
- .widescreen\:grid-gap and .new-breakpoint\:grid-gap. Confirm that the style rules match for the two rules, with the exception of a different media query width.
- .widescreen\:grid-col and .new-breakpoint\:grid-col. Confirm that the style rules match for the two rules, with the exception of a different media query width.
- .widescreen\:grid-offset and .new-breakpoint\:grid-offset. Confirm that the style rules match for the two rules, with the exception of a different media query width.

amyleadem · 2024-09-26T21:47:24Z

packages/usa-layout-grid/src/styles/_usa-layout-grid.scss

 $namespace-grid: ns("grid");

+$custom-breakpoints: map-deep-get($system-properties, breakpoints, extended);
+$all-breakpoints: map-collect($system-breakpoints, $custom-breakpoints);


Note
Interestingly, layout grid and icon list size use $system-breakpoints in breakpoints.scss and the other utilities build from $system-properties.breakpoints in _properties.scss. Both seem to collect the same values:

/*breakpoints.scss*/ $system-breakpoints: general.map-collect( map.get(spacing.$system-spacing, "large"), map.get(spacing.$system-spacing, "larger"), map.get(spacing.$system-spacing, "largest") );

/*_properties.scss*/ breakpoints: ( standard: map-collect( map.get($system-spacing, "large"), map.get($system-spacing, "larger"), map.get($system-spacing, "largest") ), extended: (), ),

Flagging in case we want to standardize this and potentially replace $system-breakpoints with $system-properties, breakpoints, standard here. To keep things scoped, I am leaving $system-breakpoints as is for now. Let me know if you would like this to change incorporated into this PR.

@amyleadem good find. Do you have an initial recommendation?

We could remove the reference to $system-breakpoints and instead use the same technique from _utility-builder.scss to grab $our-breakpoints from $system-properties. Initial testing on this branch shows that this change creates the correct number of references in the CSS, but it would need further testing to confirm that the generated CSS is correct. What do you think - should we pursue now or explore as a possible follow-up?

Suggested change

$all-breakpoints: map-collect($system-breakpoints, $custom-breakpoints);

$our-breakpoints: map-deep-get($system-properties, breakpoints, standard);

$all-breakpoints: map-collect($our-breakpoints, $custom-breakpoints);

@amyleadem inclined to say follow-up so as to not delay the release.

packages/uswds-core/src/styles/mixins/layout-grid/_grid-container.scss

mejiaj

@amyleadem a nice addition, good work.

I was able to confirm new layout utils are generated when I add a custom breakpoint.

Input

// _settings-utilities.scss
$theme-utility-breakpoints-custom: (
  "jumbo": 2000px,
)

Output

// uswds.css
/* … */
@media all and (min-width: 125em){
  .grid-row.jumbo\:grid-gap-0{
    margin-left:0;
    margin-right:0;
  }
  .grid-row.jumbo\:grid-gap-0 > *{
    padding-left:0;
    padding-right:0;
  }

CTGM-Bixal

Confirming the following:

.widescreen\:grid-container and .new-breakpoint\:grid-container match after updating custom breakpoint
.widescreen\:grid-gap and .new-breakpoint\:grid-gap match after updating custom breakpoint
.widescreen\:grid-col and .new-breakpoint\:grid-col match after updating custom breakpoint
.widescreen\:grid-offset and .new-breakpoint\:grid-offset match after updating custom breakpoint

Thus, everything looks good to me!

amyleadem · 2024-10-01T21:39:58Z

Since we have two approvals on this, I'm going to merge it into the cm-custom-breakpoints branch for final testing.

Add custom breakpoints to grid-gap, col, & offset

6fb3bcb

amyleadem commented Sep 26, 2024

View reviewed changes

Add custom breakpoints for grid-container

4a93553

amyleadem commented Sep 26, 2024

View reviewed changes

packages/uswds-core/src/styles/mixins/layout-grid/_grid-container.scss Show resolved Hide resolved

amyleadem marked this pull request as ready for review September 26, 2024 23:04

amyleadem requested review from CTGM-Bixal, cathybaptista and mejiaj and removed request for cathybaptista September 26, 2024 23:10

amyleadem mentioned this pull request Sep 26, 2024

USWDS - Utilities: Custom breakpoints #6048

Merged

7 tasks

amyleadem added this to the uswds 3.9.0 milestone Sep 26, 2024

mejiaj approved these changes Sep 30, 2024

View reviewed changes

CTGM-Bixal approved these changes Oct 1, 2024

View reviewed changes

amyleadem merged commit 9c6fbd7 into cm-custom-breakpoints Oct 1, 2024

amyleadem removed this from the uswds 3.9.0 milestone Oct 1, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

USWDS - Layout grid utility: Custom breakpoints #6083

USWDS - Layout grid utility: Custom breakpoints #6083
amyleadem merged 2 commits intocm-custom-breakpointsfrom
al-custom-breakpoints

amyleadem commented Sep 26, 2024 •

edited

Loading

Uh oh!

amyleadem Sep 26, 2024 •

edited

Loading

Uh oh!

mejiaj Sep 30, 2024

Uh oh!

amyleadem Sep 30, 2024

Uh oh!

mejiaj Oct 1, 2024

Uh oh!

Uh oh!

mejiaj left a comment

Uh oh!

CTGM-Bixal left a comment

Uh oh!

amyleadem commented Oct 1, 2024 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	$all-breakpoints: map-collect($system-breakpoints, $custom-breakpoints);
	$our-breakpoints: map-deep-get($system-properties, breakpoints, standard);
	$all-breakpoints: map-collect($our-breakpoints, $custom-breakpoints);

Conversation

amyleadem commented Sep 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Breaking change

Related issue

Related pull requests

Preview link

Problem statement

Solution

Performance impact

Testing and review

Uh oh!

amyleadem Sep 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mejiaj Sep 30, 2024

Choose a reason for hiding this comment

Uh oh!

amyleadem Sep 30, 2024

Choose a reason for hiding this comment

Uh oh!

mejiaj Oct 1, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

CTGM-Bixal left a comment

Choose a reason for hiding this comment

Uh oh!

amyleadem commented Oct 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

amyleadem commented Sep 26, 2024 •

edited

Loading

amyleadem Sep 26, 2024 •

edited

Loading

amyleadem commented Oct 1, 2024 •

edited

Loading