Visitar URL original
USWDS - Utilities: Custom breakpoints by mahoneycm · Pull Request #6048 · uswds/uswds · GitHub
Skip to content

USWDS - Utilities: Custom breakpoints #6048

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
thisisdano merged 20 commits into from
Oct 3, 2024
Merged

USWDS - Utilities: Custom breakpoints #6048

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
b40b9ab
add $theme-utility-breakpoints-custom setting
jamigibbs Jul 19, 2024
e6c7682
run prettier
jamigibbs Jul 19, 2024
47a5d0a
Revert "run prettier"
jamigibbs Jul 19, 2024
5abc90c
run prettier again and fix mapping error
jamigibbs Jul 19, 2024
0e59b9f
Remove theme token from system-spacing tokens
mahoneycm Sep 4, 2024
fa93556
Merge all breakpoint maps into 'complete' map
mahoneycm Sep 4, 2024
a03b062
Restore utility breakpoint builder to simpler structure now that cust…
mahoneycm Sep 4, 2024
333a726
Add error message to rem-to-user-em function
mahoneycm Sep 4, 2024
0ea2129
Move custom breakpoints from standard to extended; refactor utility b…
mahoneycm Sep 13, 2024
5169607
Run prettier
mahoneycm Sep 13, 2024
6354d4e
Create and implement px-to-user-em sass function
mahoneycm Sep 18, 2024
eea0ec4
Add unit test and error message to px-to-user-em
mahoneycm Sep 18, 2024
3c6e0fa
Remove period from warning valid value list
mahoneycm Sep 18, 2024
4d3c318
Remove unsuded settings at-rule from spacing tokens
mahoneycm Sep 18, 2024
6b22e0a
Merge branch 'develop' of github.com:uswds/uswds into cm-custom-break…
mahoneycm Sep 19, 2024
f319030
Add "and can not be generated" to warning message
Sep 24, 2024
6fb3bcb
Add custom breakpoints to grid-gap, col, & offset
Sep 26, 2024
4a93553
Add custom breakpoints for grid-container
Sep 26, 2024
9c6fbd7
Merge pull request #6083 from uswds/al-custom-breakpoints
amyleadem Oct 1, 2024
3261823
Add more context to breakpoint units warning
thisisdano Oct 3, 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
Prev Previous commit
Next Next commit
Add custom breakpoints for grid-container
  • Loading branch information
amyleadem
amyleadem committed Sep 26, 2024
commit 4a935537eb919750d397498f4415c02d61aafb22
6 changes: 3 additions & 3 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 @@ -16,15 +16,15 @@ $all-breakpoints: map-collect($system-breakpoints, $custom-breakpoints);
}

// 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 @@ -33,7 +33,7 @@ $all-breakpoints: map-collect($system-breakpoints, $custom-breakpoints);
}

// ...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 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);
}
}

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