USWDS - Layout grid utility: Custom breakpoints #6083
Conversation
| @@ -6,6 +6,9 @@ | |||
|
|
|||
| $namespace-grid: ns("grid"); | |||
|
|
|||
| $custom-breakpoints: map-deep-get($system-properties, breakpoints, extended); | |||
| $all-breakpoints: map-collect($system-breakpoints, $custom-breakpoints); | |||
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
@amyleadem good find. Do you have an initial recommendation?
There was a problem hiding this comment.
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?
| $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); |
There was a problem hiding this comment.
@amyleadem inclined to say follow-up so as to not delay the release.
There was a problem hiding this comment.
@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;
}There was a problem hiding this comment.
Confirming the following:
.widescreen\:grid-containerand.new-breakpoint\:grid-containermatch after updating custom breakpoint.widescreen\:grid-gapand.new-breakpoint\:grid-gapmatch after updating custom breakpoint.widescreen\:grid-coland.new-breakpoint\:grid-colmatch after updating custom breakpoint.widescreen\:grid-offsetand.new-breakpoint\:grid-offsetmatch after updating custom breakpoint
Thus, everything looks good to me!
|
Since we have two approvals on this, I'm going to merge it into the |
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, andgrid-containerclasses.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:
These media queries have multiple
min-widthdeclarations, 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:
cm-custom-breakpointsbranch)Testing and review
al-test-custom-breakpointsbranch in uswds-sandbox.uswds-theme.scss:npx gulp buildSassand navigate to_site/assets/css/styles.css.widescreen\:grid-containerand.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-gapand.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-coland.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-offsetand.new-breakpoint\:grid-offset. Confirm that the style rules match for the two rules, with the exception of a different media query width.