Visitar URL original
USWDS - Layout grid utility: Custom breakpoints by amyleadem · Pull Request #6083 · uswds/uswds · GitHub
Skip to content

USWDS - Layout grid utility: Custom breakpoints #6083

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

Merged
amyleadem merged 2 commits into from
Oct 1, 2024
Merged

USWDS - Layout grid utility: Custom breakpoints #6083

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6fb3bcb
Add custom breakpoints to grid-gap, col, & offset
Sep 26, 2024
4a93553
Add custom breakpoints for grid-container
Sep 26, 2024
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
15 changes: 9 additions & 6 deletions packages/usa-layout-grid/src/styles/_usa-layout-grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,25 @@

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

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

@amyleadem amyleadem Sep 26, 2024 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

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.

@mejiaj mejiaj Sep 30, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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

@amyleadem amyleadem Sep 30, 2024

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

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);

@mejiaj mejiaj Oct 1, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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


// basic container
.#{$namespace-grid}container {
$props: append-important($grid-global, $theme-grid-container-max-width);
@include grid-container($props);
}

// container with custom widths
@each $width-key, $width-value in $system-breakpoints {
@each $width-key, $width-value in $all-breakpoints {
.#{$namespace-grid}container-#{$width-key} {
$props: append-important($grid-global, $width-key);
@include grid-container($props);
}
}

// responsive containers...
@each $mq-key, $mq-value in $system-breakpoints {
@each $mq-key, $mq-value in $all-breakpoints {
@if map.get($theme-utility-breakpoints-complete, $mq-key) {
@include at-media($mq-key) {
.#{$mq-key}#{$separator}#{$namespace-grid}container {
Expand All @@ -30,7 +33,7 @@ $namespace-grid: ns("grid");
}

// ...with custom widths
@each $width-key, $width-value in $system-breakpoints {
@each $width-key, $width-value in $all-breakpoints {
.#{$mq-key}#{$separator}#{$namespace-grid}container-#{$width-key} {
$props: append-important($grid-global, $width-key);
@include grid-container($props);
Expand All @@ -56,7 +59,7 @@ $namespace-grid: ns("grid");
}

// responsive column gaps
@each $mq-key, $mq-value in $system-breakpoints {
@each $mq-key, $mq-value in $all-breakpoints {
@if map.get($theme-utility-breakpoints-complete, $mq-key) {
@include at-media($mq-key) {
@each $gap-key,
Expand Down Expand Up @@ -103,7 +106,7 @@ $namespace-grid: ns("grid");
}

// responsive columns
@each $mq-key, $mq-value in $system-breakpoints {
@each $mq-key, $mq-value in $all-breakpoints {
@if map.get($theme-utility-breakpoints-complete, $mq-key) {
@include at-media($mq-key) {
.#{$mq-key}#{$separator}#{$namespace-grid}col {
Expand Down Expand Up @@ -142,7 +145,7 @@ $namespace-grid: ns("grid");
}

// responsive offsets
@each $mq-key, $mq-value in $system-breakpoints {
@each $mq-key, $mq-value in $all-breakpoints {
@if map.get($theme-utility-breakpoints-complete, $mq-key) {
@each $width-key, $width-value in $system-layout-grid-widths {
@include at-media($mq-key) {
Expand Down
9 changes: 7 additions & 2 deletions packages/uswds-core/src/styles/mixins/layout-grid/_grid-container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
@use "sass:list";
@use "sass:map";
@use "../../settings" as *;
@use "../../functions/general" as *;
@use "../../mixins/general/add-responsive-site-margins" as *;
@use "../../mixins/utilities" as *;
@use "../../mixins/helpers/border-box-sizing.scss" as *;
@use "../../mixins/helpers" as *;

@mixin grid-container($props...) {
@if length($props) == 0 {
Expand All @@ -13,7 +14,11 @@
$props: list.nth($props, 1);
$margin-x: append-important($props, auto);
@include u-margin-x($margin-x);
@include u-maxw($props);
@if map.has-key($custom-breakpoints, $props) {
max-width: map.get($custom-breakpoints, $props);
} @else {
@include u-maxw($props);
}
Comment thread
mejiaj marked this conversation as resolved.
Resolved
}

@include add-responsive-site-margins;
Expand Down