diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index dd509a719b..1ab9bc448c 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,19 +2,19 @@ "files": [ { "path": "./dist/css/ouds-web-bootstrap.css", - "maxSize": "45.25 kB" + "maxSize": "51.0 kB" }, { "path": "./dist/css/ouds-web-bootstrap.min.css", - "maxSize": "42.0 kB" + "maxSize": "47.75 kB" }, { "path": "./dist/css/ouds-web-grid.css", - "maxSize": "7.0 kB" + "maxSize": "9.5 kB" }, { "path": "./dist/css/ouds-web-grid.min.css", - "maxSize": "6.25 kB" + "maxSize": "8.5 kB" }, { "path": "./dist/css/ouds-web-reboot.css", @@ -26,19 +26,19 @@ }, { "path": "./dist/css/ouds-web-utilities.css", - "maxSize": "13.0 kB" + "maxSize": "14.25 kB" }, { "path": "./dist/css/ouds-web-utilities.min.css", - "maxSize": "12.0 kB" + "maxSize": "13.5 kB" }, { "path": "./dist/css/ouds-web.css", - "maxSize": "44.75 kB" + "maxSize": "49.0 kB" }, { "path": "./dist/css/ouds-web.min.css", - "maxSize": "41.75 kB" + "maxSize": "45.5 kB" }, { "path": "./dist/js/ouds-web.bundle.js", diff --git a/scss/_containers.scss b/scss/_containers.scss index d4ed2ca60c..48d463ec44 100644 --- a/scss/_containers.scss +++ b/scss/_containers.scss @@ -3,45 +3,66 @@ // Set the container width, and override it for fixed navbars in media queries. @if $enable-container-classes { - // Single container class with breakpoint max-widths - .container, // 100% wide container at all breakpoints .container-fluid { @include make-container(); } - // OUDS mod: `.container-fluid` is not full width in OUDS Web - .container-fluid { - @include make-container-fluid-margin(); - } - // End mod - - // Responsive containers that are 100% wide until a breakpoint - @each $breakpoint, $container-max-width in $container-max-widths { - .container-#{$breakpoint} { - @extend .container-fluid; + @if $enable-bootstrap-compatibility { // OUDS mod + // OUDS mod + // Single container class with breakpoint max-widths + .container { + @include make-container(); } + // End mod - @include media-breakpoint-up($breakpoint, $grid-breakpoints) { - %responsive-container-#{$breakpoint} { - max-width: $container-max-width; + // Responsive containers that are 100% wide until a breakpoint + @each $breakpoint, $container-max-width in $container-max-widths { + @if $breakpoint == 2xl { + .container-xxl { + @extend .container-fluid; + } } - // Extend each breakpoint which is smaller or equal to the current breakpoint - $extend-breakpoint: true; + .container-#{$breakpoint} { + @extend .container-fluid; + } - @each $name, $width in $grid-breakpoints { - @if ($extend-breakpoint) { - .container#{breakpoint-infix($name, $grid-breakpoints)} { - @extend %responsive-container-#{$breakpoint}; - } + @include media-breakpoint-up($breakpoint, $grid-breakpoints) { + %responsive-container-#{$breakpoint} { + max-width: $container-max-width; + } - // Once the current breakpoint is reached, stop extending - @if ($breakpoint == $name) { - $extend-breakpoint: false; + // Extend each breakpoint which is smaller or equal to the current breakpoint + $extend-breakpoint: true; + + @each $name, $width in $grid-breakpoints { + @if ($extend-breakpoint) { + .container#{breakpoint-infix($name, $grid-breakpoints)} { + @extend %responsive-container-#{$breakpoint}; + } + + // Once the current breakpoint is reached, stop extending + @if ($breakpoint == $name) { + $extend-breakpoint: false; + } } } } } } + + // scss-docs-start containers-max + .container-max-width { + @include media-breakpoint-up(get-breakpoint-from-width()) { + --#{$prefix}container-margin-x: #{map-get($container-fluid-margin, get-breakpoint-from-width())}; + max-width: $ouds-grid-max-width; + + .row { + --#{$prefix}gutter-x: #{map-get($grid-gutter-widths, get-breakpoint-from-width())}; + } + } + } + // scss-docs-end containers-max + // End mod } diff --git a/scss/_functions.scss b/scss/_functions.scss index 9958d18ecb..b02ad4f0a8 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -12,7 +12,7 @@ // Do nothing } @else if not comparable($prev-num, $num) { @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; - } @else if $prev-num >= $num { + } @else if $prev-num > $num { // OUDS mod: ascending order can be equal @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"; } $prev-key: $key; diff --git a/scss/_maps.scss b/scss/_maps.scss index b82c03a0dd..7e2c6e9058 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -180,6 +180,41 @@ $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "l $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; -$gutters: $spacers !default; +// OUDS mod +// scss-docs-start grid-gutters +$grid-gutter-widths: ( + 2xs: $ouds-grid-2xs-column-gap, // 8px + xs: $ouds-grid-xs-column-gap, // 16px + sm: $ouds-grid-sm-column-gap, // 16px + md: $ouds-grid-md-column-gap, // 24px + lg: $ouds-grid-lg-column-gap, // 24px + xl: $ouds-grid-xl-column-gap, // 32px + 2xl: $ouds-grid-2xl-column-gap, // 32px + 3xl: $ouds-grid-3xl-column-gap // 40px +) !default; +// scss-docs-end grid-gutters + +// scss-docs-start gutters +$gutters: ( + none: 0, + smash: 2px, + shortest: 4px, + shorter: 8px, + short: 12px, + medium: 16px, + tall: 24px, + taller: 32px, + tallest: 40px, + spacious: 48px, + huge: 56px, + jumbo: 64px +) !default; +// scss-docs-end gutters + +@if $enable-bootstrap-compatibility { + // Add Bootstrap gutters + $gutters: map-merge($gutters, $spacers); +} +// End mod $alert-colors: map-remove($theme-colors, "primary", "secondary", "light", "dark") !default; // OUDS mod diff --git a/scss/_variables.scss b/scss/_variables.scss index fb72427ba7..739d0c73d3 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -548,17 +548,28 @@ $paragraph-margin-bottom: 1rem !default; // Define the minimum dimensions at which your layout will change, // adapting to different screen sizes, for use in media queries. +// OUDS mod // scss-docs-start grid-breakpoints $grid-breakpoints: ( - xs: 0, - sm: 480px, - md: 768px, - lg: 1024px, - xl: 1280px, - xxl: 1440px + 2xs: 0, + xs: $ouds-grid-xs-min-width, // 390px + sm: $ouds-grid-sm-min-width, // 480px + md: $ouds-grid-md-min-width, // 736px + lg: $ouds-grid-lg-min-width, // 1024px + xl: $ouds-grid-xl-min-width, // 1320px + 2xl: $ouds-grid-2xl-min-width, // 1640px + 3xl: $ouds-grid-3xl-min-width // 1880px ) !default; // scss-docs-end grid-breakpoints +@if $enable-bootstrap-compatibility { + // Copy 2xl breakpoint into xxl breakpoint + $breakpoint-2xl: map-get($grid-breakpoints, 2xl); + $breakpoint-3xl: map-get($grid-breakpoints, 3xl); + $grid-breakpoints: map-remove($grid-breakpoints, 2xl, 3xl); + $grid-breakpoints: map-merge($grid-breakpoints, (xxl: $breakpoint-2xl, 2xl: $breakpoint-2xl, 3xl: $breakpoint-3xl)); +} + @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints"); @@ -569,25 +580,27 @@ $grid-breakpoints: ( // scss-docs-start container-max-widths $container-max-widths: ( - xs: 312px, - sm: 468px, - md: 744px, - lg: 960px, - xl: 1200px, - xxl: 1320px + xs: $ouds-grid-xs-min-width, // 390px + sm: $ouds-grid-sm-min-width, // 480px + md: $ouds-grid-md-min-width, // 736px + lg: $ouds-grid-lg-min-width, // 1024px + xl: $ouds-grid-xl-min-width, // 1320px + 2xl: $ouds-grid-2xl-min-width, // 1640px + 3xl: $ouds-grid-3xl-min-width, // 1880px ) !default; -// OUDS mod $container-fluid-margin: ( - xs: 4px, - sm: 6px, - md: 12px, - lg: 32px, - xl: 40px, - xxl: 60px + 2xs: $ouds-grid-2xs-margin, // 16px + xs: $ouds-grid-xs-margin, // 24px + sm: $ouds-grid-sm-margin, // 28px + md: $ouds-grid-md-margin, // 32px + lg: $ouds-grid-lg-margin, // 40px + xl: $ouds-grid-xl-margin, // 56px + 2xl: $ouds-grid-2xl-margin, // 80px + 3xl: $ouds-grid-3xl-margin // 112px ) !default; -// End mod // scss-docs-end container-max-widths +// End mod @include _assert-ascending($container-max-widths, "$container-max-widths"); @@ -598,7 +611,6 @@ $container-fluid-margin: ( $grid-columns: 12 !default; $grid-gutter-width: $spacer !default; -$grid-gutter-breakpoint: "md" !default; // OUDS mod: gutter depends on breakpoint $grid-row-columns: 6 !default; // Container padding diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 286be893d7..6c0b6405a5 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -2,7 +2,7 @@ // // Breakpoints are defined as a map of (name: minimum width), order from small to large: // -// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px) +// (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px) // // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. @@ -10,9 +10,9 @@ // // >> breakpoint-next(sm) // md -// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) +// >> breakpoint-next(sm, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px)) // md -// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl)) +// >> breakpoint-next(sm, $breakpoint-names: (2xs sm md lg xl 2xl 3xl)) // md @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { $n: index($breakpoint-names, $name); @@ -24,8 +24,8 @@ // Minimum breakpoint width. Null for the smallest (first) breakpoint. // -// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) -// 576px +// >> breakpoint-min(sm, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px)) +// 736px @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { $min: map-get($breakpoints, $name); @return if($min != 0, $min, null); @@ -38,8 +38,8 @@ // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. // See https://bugs.webkit.org/show_bug.cgi?id=178261 // -// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) -// 767.98px +// >> breakpoint-max(md, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px)) +// 735.98px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $max: map-get($breakpoints, $name); @return if($max and $max > 0, $max - .02, null); @@ -48,9 +48,9 @@ // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. // Useful for making responsive utilities. // -// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) +// >> breakpoint-infix(2xs, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px)) // "" (Returns a blank string) -// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) +// >> breakpoint-infix(sm, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px)) // "-sm" @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); @@ -125,3 +125,14 @@ } } } + +// Get the breakpoint infix corresponding to a given width +@function get-breakpoint-from-width($width: $ouds-grid-max-width, $breakpoints: $grid-breakpoints) { + $breakpoint-infix: ""; + @each $infix, $value in $grid-breakpoints { + @if $width >= $value { + $breakpoint-infix: $infix; + } + } + @return $breakpoint-infix; +} diff --git a/scss/mixins/_container.scss b/scss/mixins/_container.scss index d1c064545b..c7416e34f6 100644 --- a/scss/mixins/_container.scss +++ b/scss/mixins/_container.scss @@ -5,26 +5,17 @@ --#{$prefix}gutter-x: #{$gutter}; --#{$prefix}gutter-y: 0; width: 100%; - padding-right: calc(var(--#{$prefix}gutter-x) * .25); // stylelint-disable-line function-disallowed-list - padding-left: calc(var(--#{$prefix}gutter-x) * .25); // stylelint-disable-line function-disallowed-list + padding-right: var(--#{$prefix}container-margin-x); // OUDS mod: instead of `calc(var(--#{$prefix}gutter-x) * .5)` + padding-left: var(--#{$prefix}container-margin-x); // OUDS mod: instead of `calc(var(--#{$prefix}gutter-x) * .5)` margin-right: auto; margin-left: auto; - // OUDS mod: gutter depends on breakpoint - // @note Needs both interpolation and parenthesis to prevent stylelint-scss/dimension-no-non-numeric-values to fail - @include media-breakpoint-up($grid-gutter-breakpoint) { - --#{$prefix}gutter-x: #{($gutter * 2)}; - } - // End mod -} - -// OUDS mod: fluid containers aren't full width → include margins -@mixin make-container-fluid-margin() { - @each $breakpoint, $container-margin in $container-fluid-margin { + // OUDS mod: gutter depends on breakpoints + @each $breakpoint, $container-fluid-marg in $container-fluid-margin { @include media-breakpoint-up($breakpoint) { - max-width: subtract(100vw, $container-margin * 2); + --#{$prefix}container-margin-x: #{$container-fluid-marg}; } } + // End mod } -// End mod // scss-docs-end container-mixins diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index e8111e17ab..d48b2bfd79 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -2,8 +2,8 @@ // // Generate semantic grid columns with these mixins. -@mixin make-row($gutter: $grid-gutter-width, $gutter-sm: ($gutter * .5)) { - --#{$prefix}gutter-x: #{$gutter-sm}; // OUDS mod: gutter depends on breakpoint +@mixin make-row($gutter: $grid-gutter-width) { + // OUDS mod: définition of this variable is handled differently, see below. --#{$prefix}gutter-y: 0; display: flex; flex-wrap: wrap; @@ -12,9 +12,11 @@ margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list - // OUDS mod: gutter depends on breakpoint - @include media-breakpoint-up($grid-gutter-breakpoint) { - --#{$prefix}gutter-x: #{$gutter}; + // OUDS mod: gutter depends on breakpoints + @each $breakpoint, $gutter2 in $grid-gutter-widths { + @include media-breakpoint-up($breakpoint) { + --#{$prefix}gutter-x: #{$gutter2}; + } } // End mod } diff --git a/scss/ouds-web.scss b/scss/ouds-web.scss index ce4c13c43a..aba49c4b0e 100644 --- a/scss/ouds-web.scss +++ b/scss/ouds-web.scss @@ -1,4 +1,5 @@ @import "mixins/banner"; + @include bsBanner(""); // scss-docs-start import-stack @@ -14,7 +15,6 @@ @import "mixins"; @import "utilities"; - // Layout & components @import "root"; @import "reboot"; diff --git a/scss/tests/customize/_ouds-web-bootstrap.test.scss b/scss/tests/customize/_ouds-web-bootstrap.test.scss index 7411c83ea1..21face338e 100644 --- a/scss/tests/customize/_ouds-web-bootstrap.test.scss +++ b/scss/tests/customize/_ouds-web-bootstrap.test.scss @@ -1,16 +1,18 @@ -@import "../../functions"; -@import "../../tokens/raw"; -@import "../../tokens/semantic"; -@import "../../tokens/component"; -@import "../../ouds-maps"; -@import "../../variables"; -@import "../../maps"; -@import "../../mixins"; +// stylelint-disable no-duplicate-at-import-rules +$enable-bootstrap-compatibility: null !default; $utilities: (); @include describe("customize/ouds-web-bootstrap") { @include it("generates only OUDS utilities") { + @import "../../functions"; + @import "../../tokens/raw"; + @import "../../tokens/semantic"; + @import "../../tokens/component"; + @import "../../ouds-maps"; + @import "../../variables"; + @import "../../maps"; + @import "../../mixins"; $enable-bootstrap-compatibility: false !global; $utilities: ( @@ -626,6 +628,14 @@ $utilities: (); } @include it("generates OUDS and Bootstrap utilities") { + @import "../../functions"; + @import "../../tokens/raw"; + @import "../../tokens/semantic"; + @import "../../tokens/component"; + @import "../../ouds-maps"; + @import "../../variables"; + @import "../../maps"; + @import "../../mixins"; $enable-bootstrap-compatibility: true !global; $utilities: ( @@ -868,7 +878,7 @@ $utilities: (); @include assert() { @include output() { - @import "../../utilities/api"; // stylelint-disable-line no-duplicate-at-import-rules + @import "../../utilities/api"; } @include expect() { .opacity-0 { @@ -1483,4 +1493,5729 @@ $utilities: (); } } } + + @include it("generates only OUDS containers") { + $enable-bootstrap-compatibility: false !global; + + @include assert() { + @include output() { + @import "../../functions"; + @import "../../tokens/raw"; + @import "../../tokens/semantic"; + @import "../../tokens/component"; + @import "../../ouds-maps"; + @import "../../variables"; + @import "../../maps"; + @import "../../mixins"; + @import "../../containers"; + } + @include expect() { + .container-fluid { + --bs-gutter-x: 1.25rem; + --bs-gutter-y: 0; + width: 100%; + padding-right: var(--bs-container-margin-x); + padding-left: var(--bs-container-margin-x); + margin-right: auto; + margin-left: auto; + --bs-container-margin-x: 16px; + } + + @media (min-width: 390px) { + .container-fluid { + --bs-container-margin-x: 24px; + } + } + + @media (min-width: 480px) { + .container-fluid { + --bs-container-margin-x: 28px; + } + } + + @media (min-width: 736px) { + .container-fluid { + --bs-container-margin-x: 32px; + } + } + + @media (min-width: 1024px) { + .container-fluid { + --bs-container-margin-x: 40px; + } + } + + @media (min-width: 1320px) { + .container-fluid { + --bs-container-margin-x: 56px; + } + } + + @media (min-width: 1640px) { + .container-fluid { + --bs-container-margin-x: 80px; + } + } + + @media (min-width: 1880px) { + .container-fluid { + --bs-container-margin-x: 112px; + } + } + + @media (min-width: 1640px) { + .container-max-width { + --bs-container-margin-x: 80px; + max-width: 1680px; + } + + .container-max-width .row { + --bs-gutter-x: 32px; + } + } + } + } + } + + @include it("generates OUDS and Bootstrap containers") { + $enable-bootstrap-compatibility: true !global; + + @include assert() { + @include output() { + @import "../../functions"; + @import "../../tokens/raw"; + @import "../../tokens/semantic"; + @import "../../tokens/component"; + @import "../../ouds-maps"; + @import "../../variables"; + @import "../../maps"; + @import "../../mixins"; + @import "../../containers"; + } + @include expect() { + .container-fluid, + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs { + --bs-gutter-x: 1.25rem; + --bs-gutter-y: 0; + width: 100%; + padding-right: var(--bs-container-margin-x); + padding-left: var(--bs-container-margin-x); + margin-right: auto; + margin-left: auto; + --bs-container-margin-x: 16px; + } + + @media (min-width: 390px) { + .container-fluid, + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs { + --bs-container-margin-x: 24px; + } + } + + @media (min-width: 480px) { + .container-fluid, + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs { + --bs-container-margin-x: 28px; + } + } + + @media (min-width: 736px) { + .container-fluid, + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs { + --bs-container-margin-x: 32px; + } + } + + @media (min-width: 1024px) { + .container-fluid, + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs { + --bs-container-margin-x: 40px; + } + } + + @media (min-width: 1320px) { + .container-fluid, + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs { + --bs-container-margin-x: 56px; + } + } + + @media (min-width: 1640px) { + .container-fluid, + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs { + --bs-container-margin-x: 80px; + } + } + + @media (min-width: 1880px) { + .container-fluid, + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs { + --bs-container-margin-x: 112px; + } + } + + .container { + --bs-gutter-x: 1.25rem; + --bs-gutter-y: 0; + width: 100%; + padding-right: var(--bs-container-margin-x); + padding-left: var(--bs-container-margin-x); + margin-right: auto; + margin-left: auto; + --bs-container-margin-x: 16px; + } + + @media (min-width: 390px) { + .container { + --bs-container-margin-x: 24px; + } + } + + @media (min-width: 480px) { + .container { + --bs-container-margin-x: 28px; + } + } + + @media (min-width: 736px) { + .container { + --bs-container-margin-x: 32px; + } + } + + @media (min-width: 1024px) { + .container { + --bs-container-margin-x: 40px; + } + } + + @media (min-width: 1320px) { + .container { + --bs-container-margin-x: 56px; + } + } + + @media (min-width: 1640px) { + .container { + --bs-container-margin-x: 80px; + } + } + + @media (min-width: 1880px) { + .container { + --bs-container-margin-x: 112px; + } + } + + @media (min-width: 390px) { + .container-xs, + .container { + max-width: 390px; + } + } + + @media (min-width: 480px) { + .container-sm, + .container-xs, + .container { + max-width: 480px; + } + } + + @media (min-width: 736px) { + .container-md, + .container-sm, + .container-xs, + .container { + max-width: 736px; + } + } + + @media (min-width: 1024px) { + .container-lg, + .container-md, + .container-sm, + .container-xs, + .container { + max-width: 1024px; + } + } + + @media (min-width: 1320px) { + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs, + .container { + max-width: 1320px; + } + } + + @media (min-width: 1640px) { + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs, + .container { + max-width: 1640px; + } + } + + @media (min-width: 1880px) { + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs, + .container { + max-width: 1880px; + } + } + + @media (min-width: 1640px) { + .container-max-width { + --bs-container-margin-x: 80px; + max-width: 1680px; + } + + .container-max-width .row { + --bs-gutter-x: 32px; + } + } + } + } + } + + @include it("generates only OUDS grid classes") { + $enable-bootstrap-compatibility: false !global; + + @include assert() { + @include output() { + @import "../../functions"; + @import "../../tokens/raw"; + @import "../../tokens/semantic"; + @import "../../tokens/component"; + @import "../../ouds-maps"; + @import "../../variables"; + @import "../../maps"; + @import "../../mixins"; + @import "../../grid"; + } + @include expect() { + :root { + --bs-breakpoint-2xs: 0; + --bs-breakpoint-xs: 390px; + --bs-breakpoint-sm: 480px; + --bs-breakpoint-md: 736px; + --bs-breakpoint-lg: 1024px; + --bs-breakpoint-xl: 1320px; + --bs-breakpoint-2xl: 1640px; + --bs-breakpoint-3xl: 1880px; + } + + .row { + --bs-gutter-y: 0; + display: flex; + flex-wrap: wrap; + margin-top: calc(-1 * var(--bs-gutter-y)); // stylelint-disable-line function-disallowed-list + margin-right: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero + margin-left: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero + --bs-gutter-x: 8px; + } + + @media (min-width: 390px) { + .row { + --bs-gutter-x: 16px; + } + } + + @media (min-width: 480px) { + .row { + --bs-gutter-x: 16px; + } + } + + @media (min-width: 736px) { + .row { + --bs-gutter-x: 24px; + } + } + + @media (min-width: 1024px) { + .row { + --bs-gutter-x: 24px; + } + } + + @media (min-width: 1320px) { + .row { + --bs-gutter-x: 32px; + } + } + + @media (min-width: 1640px) { + .row { + --bs-gutter-x: 32px; + } + } + + @media (min-width: 1880px) { + .row { + --bs-gutter-x: 40px; + } + } + + .row > * { + flex-shrink: 0; + width: 100%; + max-width: 100%; + padding-right: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero + padding-left: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero + margin-top: var(--bs-gutter-y); + } + + .col { + flex: 1 0 0%; + } + + .row-cols-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-auto { + flex: 0 0 auto; + width: auto; + } + + .col-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-1 { + margin-left: 8.33333333%; + } + + .offset-2 { + margin-left: 16.66666667%; + } + + .offset-3 { + margin-left: 25%; + } + + .offset-4 { + margin-left: 33.33333333%; + } + + .offset-5 { + margin-left: 41.66666667%; + } + + .offset-6 { + margin-left: 50%; + } + + .offset-7 { + margin-left: 58.33333333%; + } + + .offset-8 { + margin-left: 66.66666667%; + } + + .offset-9 { + margin-left: 75%; + } + + .offset-10 { + margin-left: 83.33333333%; + } + + .offset-11 { + margin-left: 91.66666667%; + } + + .g-none, + .gx-none { + --bs-gutter-x: 0; + } + + .g-none, + .gy-none { + --bs-gutter-y: 0; + } + + .g-smash, + .gx-smash { + --bs-gutter-x: 2px; + } + + .g-smash, + .gy-smash { + --bs-gutter-y: 2px; + } + + .g-shortest, + .gx-shortest { + --bs-gutter-x: 4px; + } + + .g-shortest, + .gy-shortest { + --bs-gutter-y: 4px; + } + + .g-shorter, + .gx-shorter { + --bs-gutter-x: 8px; + } + + .g-shorter, + .gy-shorter { + --bs-gutter-y: 8px; + } + + .g-short, + .gx-short { + --bs-gutter-x: 12px; + } + + .g-short, + .gy-short { + --bs-gutter-y: 12px; + } + + .g-medium, + .gx-medium { + --bs-gutter-x: 16px; + } + + .g-medium, + .gy-medium { + --bs-gutter-y: 16px; + } + + .g-tall, + .gx-tall { + --bs-gutter-x: 24px; + } + + .g-tall, + .gy-tall { + --bs-gutter-y: 24px; + } + + .g-taller, + .gx-taller { + --bs-gutter-x: 32px; + } + + .g-taller, + .gy-taller { + --bs-gutter-y: 32px; + } + + .g-tallest, + .gx-tallest { + --bs-gutter-x: 40px; + } + + .g-tallest, + .gy-tallest { + --bs-gutter-y: 40px; + } + + .g-spacious, + .gx-spacious { + --bs-gutter-x: 48px; + } + + .g-spacious, + .gy-spacious { + --bs-gutter-y: 48px; + } + + .g-huge, + .gx-huge { + --bs-gutter-x: 56px; + } + + .g-huge, + .gy-huge { + --bs-gutter-y: 56px; + } + + .g-jumbo, + .gx-jumbo { + --bs-gutter-x: 64px; + } + + .g-jumbo, + .gy-jumbo { + --bs-gutter-y: 64px; + } + + @media (min-width: 390px) { + .col-xs { + flex: 1 0 0%; + } + + .row-cols-xs-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-xs-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-xs-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-xs-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-xs-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-xs-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-xs-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xs-auto { + flex: 0 0 auto; + width: auto; + } + + .col-xs-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-xs-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xs-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-xs-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-xs-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-xs-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-xs-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-xs-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-xs-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-xs-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-xs-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-xs-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-xs-0 { + margin-left: 0; + } + + .offset-xs-1 { + margin-left: 8.33333333%; + } + + .offset-xs-2 { + margin-left: 16.66666667%; + } + + .offset-xs-3 { + margin-left: 25%; + } + + .offset-xs-4 { + margin-left: 33.33333333%; + } + + .offset-xs-5 { + margin-left: 41.66666667%; + } + + .offset-xs-6 { + margin-left: 50%; + } + + .offset-xs-7 { + margin-left: 58.33333333%; + } + + .offset-xs-8 { + margin-left: 66.66666667%; + } + + .offset-xs-9 { + margin-left: 75%; + } + + .offset-xs-10 { + margin-left: 83.33333333%; + } + + .offset-xs-11 { + margin-left: 91.66666667%; + } + + .g-xs-none, + .gx-xs-none { + --bs-gutter-x: 0; + } + + .g-xs-none, + .gy-xs-none { + --bs-gutter-y: 0; + } + + .g-xs-smash, + .gx-xs-smash { + --bs-gutter-x: 2px; + } + + .g-xs-smash, + .gy-xs-smash { + --bs-gutter-y: 2px; + } + + .g-xs-shortest, + .gx-xs-shortest { + --bs-gutter-x: 4px; + } + + .g-xs-shortest, + .gy-xs-shortest { + --bs-gutter-y: 4px; + } + + .g-xs-shorter, + .gx-xs-shorter { + --bs-gutter-x: 8px; + } + + .g-xs-shorter, + .gy-xs-shorter { + --bs-gutter-y: 8px; + } + + .g-xs-short, + .gx-xs-short { + --bs-gutter-x: 12px; + } + + .g-xs-short, + .gy-xs-short { + --bs-gutter-y: 12px; + } + + .g-xs-medium, + .gx-xs-medium { + --bs-gutter-x: 16px; + } + + .g-xs-medium, + .gy-xs-medium { + --bs-gutter-y: 16px; + } + + .g-xs-tall, + .gx-xs-tall { + --bs-gutter-x: 24px; + } + + .g-xs-tall, + .gy-xs-tall { + --bs-gutter-y: 24px; + } + + .g-xs-taller, + .gx-xs-taller { + --bs-gutter-x: 32px; + } + + .g-xs-taller, + .gy-xs-taller { + --bs-gutter-y: 32px; + } + + .g-xs-tallest, + .gx-xs-tallest { + --bs-gutter-x: 40px; + } + + .g-xs-tallest, + .gy-xs-tallest { + --bs-gutter-y: 40px; + } + + .g-xs-spacious, + .gx-xs-spacious { + --bs-gutter-x: 48px; + } + + .g-xs-spacious, + .gy-xs-spacious { + --bs-gutter-y: 48px; + } + + .g-xs-huge, + .gx-xs-huge { + --bs-gutter-x: 56px; + } + + .g-xs-huge, + .gy-xs-huge { + --bs-gutter-y: 56px; + } + + .g-xs-jumbo, + .gx-xs-jumbo { + --bs-gutter-x: 64px; + } + + .g-xs-jumbo, + .gy-xs-jumbo { + --bs-gutter-y: 64px; + } + } + + @media (min-width: 480px) { + .col-sm { + flex: 1 0 0%; + } + + .row-cols-sm-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-sm-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-sm-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-sm-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-sm-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-sm-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-sm-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-sm-auto { + flex: 0 0 auto; + width: auto; + } + + .col-sm-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-sm-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-sm-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-sm-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-sm-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-sm-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-sm-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-sm-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-sm-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-sm-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-sm-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-sm-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-sm-0 { + margin-left: 0; + } + + .offset-sm-1 { + margin-left: 8.33333333%; + } + + .offset-sm-2 { + margin-left: 16.66666667%; + } + + .offset-sm-3 { + margin-left: 25%; + } + + .offset-sm-4 { + margin-left: 33.33333333%; + } + + .offset-sm-5 { + margin-left: 41.66666667%; + } + + .offset-sm-6 { + margin-left: 50%; + } + + .offset-sm-7 { + margin-left: 58.33333333%; + } + + .offset-sm-8 { + margin-left: 66.66666667%; + } + + .offset-sm-9 { + margin-left: 75%; + } + + .offset-sm-10 { + margin-left: 83.33333333%; + } + + .offset-sm-11 { + margin-left: 91.66666667%; + } + + .g-sm-none, + .gx-sm-none { + --bs-gutter-x: 0; + } + + .g-sm-none, + .gy-sm-none { + --bs-gutter-y: 0; + } + + .g-sm-smash, + .gx-sm-smash { + --bs-gutter-x: 2px; + } + + .g-sm-smash, + .gy-sm-smash { + --bs-gutter-y: 2px; + } + + .g-sm-shortest, + .gx-sm-shortest { + --bs-gutter-x: 4px; + } + + .g-sm-shortest, + .gy-sm-shortest { + --bs-gutter-y: 4px; + } + + .g-sm-shorter, + .gx-sm-shorter { + --bs-gutter-x: 8px; + } + + .g-sm-shorter, + .gy-sm-shorter { + --bs-gutter-y: 8px; + } + + .g-sm-short, + .gx-sm-short { + --bs-gutter-x: 12px; + } + + .g-sm-short, + .gy-sm-short { + --bs-gutter-y: 12px; + } + + .g-sm-medium, + .gx-sm-medium { + --bs-gutter-x: 16px; + } + + .g-sm-medium, + .gy-sm-medium { + --bs-gutter-y: 16px; + } + + .g-sm-tall, + .gx-sm-tall { + --bs-gutter-x: 24px; + } + + .g-sm-tall, + .gy-sm-tall { + --bs-gutter-y: 24px; + } + + .g-sm-taller, + .gx-sm-taller { + --bs-gutter-x: 32px; + } + + .g-sm-taller, + .gy-sm-taller { + --bs-gutter-y: 32px; + } + + .g-sm-tallest, + .gx-sm-tallest { + --bs-gutter-x: 40px; + } + + .g-sm-tallest, + .gy-sm-tallest { + --bs-gutter-y: 40px; + } + + .g-sm-spacious, + .gx-sm-spacious { + --bs-gutter-x: 48px; + } + + .g-sm-spacious, + .gy-sm-spacious { + --bs-gutter-y: 48px; + } + + .g-sm-huge, + .gx-sm-huge { + --bs-gutter-x: 56px; + } + + .g-sm-huge, + .gy-sm-huge { + --bs-gutter-y: 56px; + } + + .g-sm-jumbo, + .gx-sm-jumbo { + --bs-gutter-x: 64px; + } + + .g-sm-jumbo, + .gy-sm-jumbo { + --bs-gutter-y: 64px; + } + } + + @media (min-width: 736px) { + .col-md { + flex: 1 0 0%; + } + + .row-cols-md-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-md-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-md-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-md-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-md-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-md-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-md-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-md-auto { + flex: 0 0 auto; + width: auto; + } + + .col-md-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-md-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-md-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-md-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-md-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-md-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-md-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-md-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-md-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-md-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-md-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-md-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-md-0 { + margin-left: 0; + } + + .offset-md-1 { + margin-left: 8.33333333%; + } + + .offset-md-2 { + margin-left: 16.66666667%; + } + + .offset-md-3 { + margin-left: 25%; + } + + .offset-md-4 { + margin-left: 33.33333333%; + } + + .offset-md-5 { + margin-left: 41.66666667%; + } + + .offset-md-6 { + margin-left: 50%; + } + + .offset-md-7 { + margin-left: 58.33333333%; + } + + .offset-md-8 { + margin-left: 66.66666667%; + } + + .offset-md-9 { + margin-left: 75%; + } + + .offset-md-10 { + margin-left: 83.33333333%; + } + + .offset-md-11 { + margin-left: 91.66666667%; + } + + .g-md-none, + .gx-md-none { + --bs-gutter-x: 0; + } + + .g-md-none, + .gy-md-none { + --bs-gutter-y: 0; + } + + .g-md-smash, + .gx-md-smash { + --bs-gutter-x: 2px; + } + + .g-md-smash, + .gy-md-smash { + --bs-gutter-y: 2px; + } + + .g-md-shortest, + .gx-md-shortest { + --bs-gutter-x: 4px; + } + + .g-md-shortest, + .gy-md-shortest { + --bs-gutter-y: 4px; + } + + .g-md-shorter, + .gx-md-shorter { + --bs-gutter-x: 8px; + } + + .g-md-shorter, + .gy-md-shorter { + --bs-gutter-y: 8px; + } + + .g-md-short, + .gx-md-short { + --bs-gutter-x: 12px; + } + + .g-md-short, + .gy-md-short { + --bs-gutter-y: 12px; + } + + .g-md-medium, + .gx-md-medium { + --bs-gutter-x: 16px; + } + + .g-md-medium, + .gy-md-medium { + --bs-gutter-y: 16px; + } + + .g-md-tall, + .gx-md-tall { + --bs-gutter-x: 24px; + } + + .g-md-tall, + .gy-md-tall { + --bs-gutter-y: 24px; + } + + .g-md-taller, + .gx-md-taller { + --bs-gutter-x: 32px; + } + + .g-md-taller, + .gy-md-taller { + --bs-gutter-y: 32px; + } + + .g-md-tallest, + .gx-md-tallest { + --bs-gutter-x: 40px; + } + + .g-md-tallest, + .gy-md-tallest { + --bs-gutter-y: 40px; + } + + .g-md-spacious, + .gx-md-spacious { + --bs-gutter-x: 48px; + } + + .g-md-spacious, + .gy-md-spacious { + --bs-gutter-y: 48px; + } + + .g-md-huge, + .gx-md-huge { + --bs-gutter-x: 56px; + } + + .g-md-huge, + .gy-md-huge { + --bs-gutter-y: 56px; + } + + .g-md-jumbo, + .gx-md-jumbo { + --bs-gutter-x: 64px; + } + + .g-md-jumbo, + .gy-md-jumbo { + --bs-gutter-y: 64px; + } + } + + @media (min-width: 1024px) { + .col-lg { + flex: 1 0 0%; + } + + .row-cols-lg-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-lg-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-lg-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-lg-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-lg-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-lg-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-lg-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-lg-auto { + flex: 0 0 auto; + width: auto; + } + + .col-lg-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-lg-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-lg-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-lg-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-lg-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-lg-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-lg-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-lg-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-lg-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-lg-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-lg-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-lg-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-lg-0 { + margin-left: 0; + } + + .offset-lg-1 { + margin-left: 8.33333333%; + } + + .offset-lg-2 { + margin-left: 16.66666667%; + } + + .offset-lg-3 { + margin-left: 25%; + } + + .offset-lg-4 { + margin-left: 33.33333333%; + } + + .offset-lg-5 { + margin-left: 41.66666667%; + } + + .offset-lg-6 { + margin-left: 50%; + } + + .offset-lg-7 { + margin-left: 58.33333333%; + } + + .offset-lg-8 { + margin-left: 66.66666667%; + } + + .offset-lg-9 { + margin-left: 75%; + } + + .offset-lg-10 { + margin-left: 83.33333333%; + } + + .offset-lg-11 { + margin-left: 91.66666667%; + } + + .g-lg-none, + .gx-lg-none { + --bs-gutter-x: 0; + } + + .g-lg-none, + .gy-lg-none { + --bs-gutter-y: 0; + } + + .g-lg-smash, + .gx-lg-smash { + --bs-gutter-x: 2px; + } + + .g-lg-smash, + .gy-lg-smash { + --bs-gutter-y: 2px; + } + + .g-lg-shortest, + .gx-lg-shortest { + --bs-gutter-x: 4px; + } + + .g-lg-shortest, + .gy-lg-shortest { + --bs-gutter-y: 4px; + } + + .g-lg-shorter, + .gx-lg-shorter { + --bs-gutter-x: 8px; + } + + .g-lg-shorter, + .gy-lg-shorter { + --bs-gutter-y: 8px; + } + + .g-lg-short, + .gx-lg-short { + --bs-gutter-x: 12px; + } + + .g-lg-short, + .gy-lg-short { + --bs-gutter-y: 12px; + } + + .g-lg-medium, + .gx-lg-medium { + --bs-gutter-x: 16px; + } + + .g-lg-medium, + .gy-lg-medium { + --bs-gutter-y: 16px; + } + + .g-lg-tall, + .gx-lg-tall { + --bs-gutter-x: 24px; + } + + .g-lg-tall, + .gy-lg-tall { + --bs-gutter-y: 24px; + } + + .g-lg-taller, + .gx-lg-taller { + --bs-gutter-x: 32px; + } + + .g-lg-taller, + .gy-lg-taller { + --bs-gutter-y: 32px; + } + + .g-lg-tallest, + .gx-lg-tallest { + --bs-gutter-x: 40px; + } + + .g-lg-tallest, + .gy-lg-tallest { + --bs-gutter-y: 40px; + } + + .g-lg-spacious, + .gx-lg-spacious { + --bs-gutter-x: 48px; + } + + .g-lg-spacious, + .gy-lg-spacious { + --bs-gutter-y: 48px; + } + + .g-lg-huge, + .gx-lg-huge { + --bs-gutter-x: 56px; + } + + .g-lg-huge, + .gy-lg-huge { + --bs-gutter-y: 56px; + } + + .g-lg-jumbo, + .gx-lg-jumbo { + --bs-gutter-x: 64px; + } + + .g-lg-jumbo, + .gy-lg-jumbo { + --bs-gutter-y: 64px; + } + } + + @media (min-width: 1320px) { + .col-xl { + flex: 1 0 0%; + } + + .row-cols-xl-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-xl-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-xl-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-xl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-xl-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-xl-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-xl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xl-auto { + flex: 0 0 auto; + width: auto; + } + + .col-xl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-xl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xl-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-xl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-xl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-xl-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-xl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-xl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-xl-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-xl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-xl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-xl-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-xl-0 { + margin-left: 0; + } + + .offset-xl-1 { + margin-left: 8.33333333%; + } + + .offset-xl-2 { + margin-left: 16.66666667%; + } + + .offset-xl-3 { + margin-left: 25%; + } + + .offset-xl-4 { + margin-left: 33.33333333%; + } + + .offset-xl-5 { + margin-left: 41.66666667%; + } + + .offset-xl-6 { + margin-left: 50%; + } + + .offset-xl-7 { + margin-left: 58.33333333%; + } + + .offset-xl-8 { + margin-left: 66.66666667%; + } + + .offset-xl-9 { + margin-left: 75%; + } + + .offset-xl-10 { + margin-left: 83.33333333%; + } + + .offset-xl-11 { + margin-left: 91.66666667%; + } + + .g-xl-none, + .gx-xl-none { + --bs-gutter-x: 0; + } + + .g-xl-none, + .gy-xl-none { + --bs-gutter-y: 0; + } + + .g-xl-smash, + .gx-xl-smash { + --bs-gutter-x: 2px; + } + + .g-xl-smash, + .gy-xl-smash { + --bs-gutter-y: 2px; + } + + .g-xl-shortest, + .gx-xl-shortest { + --bs-gutter-x: 4px; + } + + .g-xl-shortest, + .gy-xl-shortest { + --bs-gutter-y: 4px; + } + + .g-xl-shorter, + .gx-xl-shorter { + --bs-gutter-x: 8px; + } + + .g-xl-shorter, + .gy-xl-shorter { + --bs-gutter-y: 8px; + } + + .g-xl-short, + .gx-xl-short { + --bs-gutter-x: 12px; + } + + .g-xl-short, + .gy-xl-short { + --bs-gutter-y: 12px; + } + + .g-xl-medium, + .gx-xl-medium { + --bs-gutter-x: 16px; + } + + .g-xl-medium, + .gy-xl-medium { + --bs-gutter-y: 16px; + } + + .g-xl-tall, + .gx-xl-tall { + --bs-gutter-x: 24px; + } + + .g-xl-tall, + .gy-xl-tall { + --bs-gutter-y: 24px; + } + + .g-xl-taller, + .gx-xl-taller { + --bs-gutter-x: 32px; + } + + .g-xl-taller, + .gy-xl-taller { + --bs-gutter-y: 32px; + } + + .g-xl-tallest, + .gx-xl-tallest { + --bs-gutter-x: 40px; + } + + .g-xl-tallest, + .gy-xl-tallest { + --bs-gutter-y: 40px; + } + + .g-xl-spacious, + .gx-xl-spacious { + --bs-gutter-x: 48px; + } + + .g-xl-spacious, + .gy-xl-spacious { + --bs-gutter-y: 48px; + } + + .g-xl-huge, + .gx-xl-huge { + --bs-gutter-x: 56px; + } + + .g-xl-huge, + .gy-xl-huge { + --bs-gutter-y: 56px; + } + + .g-xl-jumbo, + .gx-xl-jumbo { + --bs-gutter-x: 64px; + } + + .g-xl-jumbo, + .gy-xl-jumbo { + --bs-gutter-y: 64px; + } + } + + @media (min-width: 1640px) { + .col-2xl { + flex: 1 0 0%; + } + + .row-cols-2xl-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-2xl-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-2xl-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-2xl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-2xl-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-2xl-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-2xl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-2xl-auto { + flex: 0 0 auto; + width: auto; + } + + .col-2xl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-2xl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-2xl-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-2xl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-2xl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-2xl-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-2xl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-2xl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-2xl-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-2xl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-2xl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-2xl-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-2xl-0 { + margin-left: 0; + } + + .offset-2xl-1 { + margin-left: 8.33333333%; + } + + .offset-2xl-2 { + margin-left: 16.66666667%; + } + + .offset-2xl-3 { + margin-left: 25%; + } + + .offset-2xl-4 { + margin-left: 33.33333333%; + } + + .offset-2xl-5 { + margin-left: 41.66666667%; + } + + .offset-2xl-6 { + margin-left: 50%; + } + + .offset-2xl-7 { + margin-left: 58.33333333%; + } + + .offset-2xl-8 { + margin-left: 66.66666667%; + } + + .offset-2xl-9 { + margin-left: 75%; + } + + .offset-2xl-10 { + margin-left: 83.33333333%; + } + + .offset-2xl-11 { + margin-left: 91.66666667%; + } + + .g-2xl-none, + .gx-2xl-none { + --bs-gutter-x: 0; + } + + .g-2xl-none, + .gy-2xl-none { + --bs-gutter-y: 0; + } + + .g-2xl-smash, + .gx-2xl-smash { + --bs-gutter-x: 2px; + } + + .g-2xl-smash, + .gy-2xl-smash { + --bs-gutter-y: 2px; + } + + .g-2xl-shortest, + .gx-2xl-shortest { + --bs-gutter-x: 4px; + } + + .g-2xl-shortest, + .gy-2xl-shortest { + --bs-gutter-y: 4px; + } + + .g-2xl-shorter, + .gx-2xl-shorter { + --bs-gutter-x: 8px; + } + + .g-2xl-shorter, + .gy-2xl-shorter { + --bs-gutter-y: 8px; + } + + .g-2xl-short, + .gx-2xl-short { + --bs-gutter-x: 12px; + } + + .g-2xl-short, + .gy-2xl-short { + --bs-gutter-y: 12px; + } + + .g-2xl-medium, + .gx-2xl-medium { + --bs-gutter-x: 16px; + } + + .g-2xl-medium, + .gy-2xl-medium { + --bs-gutter-y: 16px; + } + + .g-2xl-tall, + .gx-2xl-tall { + --bs-gutter-x: 24px; + } + + .g-2xl-tall, + .gy-2xl-tall { + --bs-gutter-y: 24px; + } + + .g-2xl-taller, + .gx-2xl-taller { + --bs-gutter-x: 32px; + } + + .g-2xl-taller, + .gy-2xl-taller { + --bs-gutter-y: 32px; + } + + .g-2xl-tallest, + .gx-2xl-tallest { + --bs-gutter-x: 40px; + } + + .g-2xl-tallest, + .gy-2xl-tallest { + --bs-gutter-y: 40px; + } + + .g-2xl-spacious, + .gx-2xl-spacious { + --bs-gutter-x: 48px; + } + + .g-2xl-spacious, + .gy-2xl-spacious { + --bs-gutter-y: 48px; + } + + .g-2xl-huge, + .gx-2xl-huge { + --bs-gutter-x: 56px; + } + + .g-2xl-huge, + .gy-2xl-huge { + --bs-gutter-y: 56px; + } + + .g-2xl-jumbo, + .gx-2xl-jumbo { + --bs-gutter-x: 64px; + } + + .g-2xl-jumbo, + .gy-2xl-jumbo { + --bs-gutter-y: 64px; + } + } + + @media (min-width: 1880px) { + .col-3xl { + flex: 1 0 0%; + } + + .row-cols-3xl-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-3xl-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-3xl-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-3xl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-3xl-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-3xl-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-3xl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-3xl-auto { + flex: 0 0 auto; + width: auto; + } + + .col-3xl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-3xl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-3xl-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-3xl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-3xl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-3xl-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-3xl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-3xl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-3xl-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-3xl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-3xl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-3xl-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-3xl-0 { + margin-left: 0; + } + + .offset-3xl-1 { + margin-left: 8.33333333%; + } + + .offset-3xl-2 { + margin-left: 16.66666667%; + } + + .offset-3xl-3 { + margin-left: 25%; + } + + .offset-3xl-4 { + margin-left: 33.33333333%; + } + + .offset-3xl-5 { + margin-left: 41.66666667%; + } + + .offset-3xl-6 { + margin-left: 50%; + } + + .offset-3xl-7 { + margin-left: 58.33333333%; + } + + .offset-3xl-8 { + margin-left: 66.66666667%; + } + + .offset-3xl-9 { + margin-left: 75%; + } + + .offset-3xl-10 { + margin-left: 83.33333333%; + } + + .offset-3xl-11 { + margin-left: 91.66666667%; + } + + .g-3xl-none, + .gx-3xl-none { + --bs-gutter-x: 0; + } + + .g-3xl-none, + .gy-3xl-none { + --bs-gutter-y: 0; + } + + .g-3xl-smash, + .gx-3xl-smash { + --bs-gutter-x: 2px; + } + + .g-3xl-smash, + .gy-3xl-smash { + --bs-gutter-y: 2px; + } + + .g-3xl-shortest, + .gx-3xl-shortest { + --bs-gutter-x: 4px; + } + + .g-3xl-shortest, + .gy-3xl-shortest { + --bs-gutter-y: 4px; + } + + .g-3xl-shorter, + .gx-3xl-shorter { + --bs-gutter-x: 8px; + } + + .g-3xl-shorter, + .gy-3xl-shorter { + --bs-gutter-y: 8px; + } + + .g-3xl-short, + .gx-3xl-short { + --bs-gutter-x: 12px; + } + + .g-3xl-short, + .gy-3xl-short { + --bs-gutter-y: 12px; + } + + .g-3xl-medium, + .gx-3xl-medium { + --bs-gutter-x: 16px; + } + + .g-3xl-medium, + .gy-3xl-medium { + --bs-gutter-y: 16px; + } + + .g-3xl-tall, + .gx-3xl-tall { + --bs-gutter-x: 24px; + } + + .g-3xl-tall, + .gy-3xl-tall { + --bs-gutter-y: 24px; + } + + .g-3xl-taller, + .gx-3xl-taller { + --bs-gutter-x: 32px; + } + + .g-3xl-taller, + .gy-3xl-taller { + --bs-gutter-y: 32px; + } + + .g-3xl-tallest, + .gx-3xl-tallest { + --bs-gutter-x: 40px; + } + + .g-3xl-tallest, + .gy-3xl-tallest { + --bs-gutter-y: 40px; + } + + .g-3xl-spacious, + .gx-3xl-spacious { + --bs-gutter-x: 48px; + } + + .g-3xl-spacious, + .gy-3xl-spacious { + --bs-gutter-y: 48px; + } + + .g-3xl-huge, + .gx-3xl-huge { + --bs-gutter-x: 56px; + } + + .g-3xl-huge, + .gy-3xl-huge { + --bs-gutter-y: 56px; + } + + .g-3xl-jumbo, + .gx-3xl-jumbo { + --bs-gutter-x: 64px; + } + + .g-3xl-jumbo, + .gy-3xl-jumbo { + --bs-gutter-y: 64px; + } + } + } + } + } + + @include it("generates OUDS and Bootstrap grid classes") { + $enable-bootstrap-compatibility: true !global; + + @include assert() { + @include output() { + @import "../../functions"; + @import "../../tokens/raw"; + @import "../../tokens/semantic"; + @import "../../tokens/component"; + @import "../../ouds-maps"; + @import "../../variables"; + @import "../../maps"; + @import "../../mixins"; + @import "../../grid"; + } + @include expect() { + :root { + --bs-breakpoint-2xs: 0; + --bs-breakpoint-xs: 390px; + --bs-breakpoint-sm: 480px; + --bs-breakpoint-md: 736px; + --bs-breakpoint-lg: 1024px; + --bs-breakpoint-xl: 1320px; + --bs-breakpoint-xxl: 1640px; + --bs-breakpoint-2xl: 1640px; + --bs-breakpoint-3xl: 1880px; + } + + .row { + --bs-gutter-y: 0; + display: flex; + flex-wrap: wrap; + margin-top: calc(-1 * var(--bs-gutter-y)); // stylelint-disable-line function-disallowed-list + margin-right: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero + margin-left: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero + --bs-gutter-x: 8px; + } + + @media (min-width: 390px) { + .row { + --bs-gutter-x: 16px; + } + } + + @media (min-width: 480px) { + .row { + --bs-gutter-x: 16px; + } + } + + @media (min-width: 736px) { + .row { + --bs-gutter-x: 24px; + } + } + + @media (min-width: 1024px) { + .row { + --bs-gutter-x: 24px; + } + } + + @media (min-width: 1320px) { + .row { + --bs-gutter-x: 32px; + } + } + + @media (min-width: 1640px) { + .row { + --bs-gutter-x: 32px; + } + } + + @media (min-width: 1880px) { + .row { + --bs-gutter-x: 40px; + } + } + + .row > * { + flex-shrink: 0; + width: 100%; + max-width: 100%; + padding-right: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero + padding-left: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero + margin-top: var(--bs-gutter-y); + } + + .col { + flex: 1 0 0%; + } + + .row-cols-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-auto { + flex: 0 0 auto; + width: auto; + } + + .col-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-1 { + margin-left: 8.33333333%; + } + + .offset-2 { + margin-left: 16.66666667%; + } + + .offset-3 { + margin-left: 25%; + } + + .offset-4 { + margin-left: 33.33333333%; + } + + .offset-5 { + margin-left: 41.66666667%; + } + + .offset-6 { + margin-left: 50%; + } + + .offset-7 { + margin-left: 58.33333333%; + } + + .offset-8 { + margin-left: 66.66666667%; + } + + .offset-9 { + margin-left: 75%; + } + + .offset-10 { + margin-left: 83.33333333%; + } + + .offset-11 { + margin-left: 91.66666667%; + } + + .g-none, + .gx-none { + --bs-gutter-x: 0; + } + + .g-none, + .gy-none { + --bs-gutter-y: 0; + } + + .g-smash, + .gx-smash { + --bs-gutter-x: 2px; + } + + .g-smash, + .gy-smash { + --bs-gutter-y: 2px; + } + + .g-shortest, + .gx-shortest { + --bs-gutter-x: 4px; + } + + .g-shortest, + .gy-shortest { + --bs-gutter-y: 4px; + } + + .g-shorter, + .gx-shorter { + --bs-gutter-x: 8px; + } + + .g-shorter, + .gy-shorter { + --bs-gutter-y: 8px; + } + + .g-short, + .gx-short { + --bs-gutter-x: 12px; + } + + .g-short, + .gy-short { + --bs-gutter-y: 12px; + } + + .g-medium, + .gx-medium { + --bs-gutter-x: 16px; + } + + .g-medium, + .gy-medium { + --bs-gutter-y: 16px; + } + + .g-tall, + .gx-tall { + --bs-gutter-x: 24px; + } + + .g-tall, + .gy-tall { + --bs-gutter-y: 24px; + } + + .g-taller, + .gx-taller { + --bs-gutter-x: 32px; + } + + .g-taller, + .gy-taller { + --bs-gutter-y: 32px; + } + + .g-tallest, + .gx-tallest { + --bs-gutter-x: 40px; + } + + .g-tallest, + .gy-tallest { + --bs-gutter-y: 40px; + } + + .g-spacious, + .gx-spacious { + --bs-gutter-x: 48px; + } + + .g-spacious, + .gy-spacious { + --bs-gutter-y: 48px; + } + + .g-huge, + .gx-huge { + --bs-gutter-x: 56px; + } + + .g-huge, + .gy-huge { + --bs-gutter-y: 56px; + } + + .g-jumbo, + .gx-jumbo { + --bs-gutter-x: 64px; + } + + .g-jumbo, + .gy-jumbo { + --bs-gutter-y: 64px; + } + + .g-0, + .gx-0 { + --bs-gutter-x: 0; + } + + .g-0, + .gy-0 { + --bs-gutter-y: 0; + } + + .g-1, + .gx-1 { + --bs-gutter-x: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-1, + .gy-1 { + --bs-gutter-y: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2, + .gx-2 { + --bs-gutter-x: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2, + .gy-2 { + --bs-gutter-y: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-3, + .gx-3 { + --bs-gutter-x: 1.25rem; + } + + .g-3, + .gy-3 { + --bs-gutter-y: 1.25rem; + } + + .g-4, + .gx-4 { + --bs-gutter-x: 1.875rem; + } + + .g-4, + .gy-4 { + --bs-gutter-y: 1.875rem; + } + + .g-5, + .gx-5 { + --bs-gutter-x: 3.75rem; + } + + .g-5, + .gy-5 { + --bs-gutter-y: 3.75rem; + } + + @media (min-width: 390px) { + .col-xs { + flex: 1 0 0%; + } + + .row-cols-xs-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-xs-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-xs-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-xs-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-xs-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-xs-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-xs-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xs-auto { + flex: 0 0 auto; + width: auto; + } + + .col-xs-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-xs-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xs-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-xs-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-xs-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-xs-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-xs-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-xs-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-xs-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-xs-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-xs-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-xs-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-xs-0 { + margin-left: 0; + } + + .offset-xs-1 { + margin-left: 8.33333333%; + } + + .offset-xs-2 { + margin-left: 16.66666667%; + } + + .offset-xs-3 { + margin-left: 25%; + } + + .offset-xs-4 { + margin-left: 33.33333333%; + } + + .offset-xs-5 { + margin-left: 41.66666667%; + } + + .offset-xs-6 { + margin-left: 50%; + } + + .offset-xs-7 { + margin-left: 58.33333333%; + } + + .offset-xs-8 { + margin-left: 66.66666667%; + } + + .offset-xs-9 { + margin-left: 75%; + } + + .offset-xs-10 { + margin-left: 83.33333333%; + } + + .offset-xs-11 { + margin-left: 91.66666667%; + } + + .g-xs-none, + .gx-xs-none { + --bs-gutter-x: 0; + } + + .g-xs-none, + .gy-xs-none { + --bs-gutter-y: 0; + } + + .g-xs-smash, + .gx-xs-smash { + --bs-gutter-x: 2px; + } + + .g-xs-smash, + .gy-xs-smash { + --bs-gutter-y: 2px; + } + + .g-xs-shortest, + .gx-xs-shortest { + --bs-gutter-x: 4px; + } + + .g-xs-shortest, + .gy-xs-shortest { + --bs-gutter-y: 4px; + } + + .g-xs-shorter, + .gx-xs-shorter { + --bs-gutter-x: 8px; + } + + .g-xs-shorter, + .gy-xs-shorter { + --bs-gutter-y: 8px; + } + + .g-xs-short, + .gx-xs-short { + --bs-gutter-x: 12px; + } + + .g-xs-short, + .gy-xs-short { + --bs-gutter-y: 12px; + } + + .g-xs-medium, + .gx-xs-medium { + --bs-gutter-x: 16px; + } + + .g-xs-medium, + .gy-xs-medium { + --bs-gutter-y: 16px; + } + + .g-xs-tall, + .gx-xs-tall { + --bs-gutter-x: 24px; + } + + .g-xs-tall, + .gy-xs-tall { + --bs-gutter-y: 24px; + } + + .g-xs-taller, + .gx-xs-taller { + --bs-gutter-x: 32px; + } + + .g-xs-taller, + .gy-xs-taller { + --bs-gutter-y: 32px; + } + + .g-xs-tallest, + .gx-xs-tallest { + --bs-gutter-x: 40px; + } + + .g-xs-tallest, + .gy-xs-tallest { + --bs-gutter-y: 40px; + } + + .g-xs-spacious, + .gx-xs-spacious { + --bs-gutter-x: 48px; + } + + .g-xs-spacious, + .gy-xs-spacious { + --bs-gutter-y: 48px; + } + + .g-xs-huge, + .gx-xs-huge { + --bs-gutter-x: 56px; + } + + .g-xs-huge, + .gy-xs-huge { + --bs-gutter-y: 56px; + } + + .g-xs-jumbo, + .gx-xs-jumbo { + --bs-gutter-x: 64px; + } + + .g-xs-jumbo, + .gy-xs-jumbo { + --bs-gutter-y: 64px; + } + + .g-xs-0, + .gx-xs-0 { + --bs-gutter-x: 0; + } + + .g-xs-0, + .gy-xs-0 { + --bs-gutter-y: 0; + } + + .g-xs-1, + .gx-xs-1 { + --bs-gutter-x: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xs-1, + .gy-xs-1 { + --bs-gutter-y: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xs-2, + .gx-xs-2 { + --bs-gutter-x: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xs-2, + .gy-xs-2 { + --bs-gutter-y: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xs-3, + .gx-xs-3 { + --bs-gutter-x: 1.25rem; + } + + .g-xs-3, + .gy-xs-3 { + --bs-gutter-y: 1.25rem; + } + + .g-xs-4, + .gx-xs-4 { + --bs-gutter-x: 1.875rem; + } + + .g-xs-4, + .gy-xs-4 { + --bs-gutter-y: 1.875rem; + } + + .g-xs-5, + .gx-xs-5 { + --bs-gutter-x: 3.75rem; + } + + .g-xs-5, + .gy-xs-5 { + --bs-gutter-y: 3.75rem; + } + } + + @media (min-width: 480px) { + .col-sm { + flex: 1 0 0%; + } + + .row-cols-sm-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-sm-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-sm-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-sm-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-sm-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-sm-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-sm-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-sm-auto { + flex: 0 0 auto; + width: auto; + } + + .col-sm-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-sm-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-sm-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-sm-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-sm-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-sm-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-sm-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-sm-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-sm-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-sm-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-sm-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-sm-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-sm-0 { + margin-left: 0; + } + + .offset-sm-1 { + margin-left: 8.33333333%; + } + + .offset-sm-2 { + margin-left: 16.66666667%; + } + + .offset-sm-3 { + margin-left: 25%; + } + + .offset-sm-4 { + margin-left: 33.33333333%; + } + + .offset-sm-5 { + margin-left: 41.66666667%; + } + + .offset-sm-6 { + margin-left: 50%; + } + + .offset-sm-7 { + margin-left: 58.33333333%; + } + + .offset-sm-8 { + margin-left: 66.66666667%; + } + + .offset-sm-9 { + margin-left: 75%; + } + + .offset-sm-10 { + margin-left: 83.33333333%; + } + + .offset-sm-11 { + margin-left: 91.66666667%; + } + + .g-sm-none, + .gx-sm-none { + --bs-gutter-x: 0; + } + + .g-sm-none, + .gy-sm-none { + --bs-gutter-y: 0; + } + + .g-sm-smash, + .gx-sm-smash { + --bs-gutter-x: 2px; + } + + .g-sm-smash, + .gy-sm-smash { + --bs-gutter-y: 2px; + } + + .g-sm-shortest, + .gx-sm-shortest { + --bs-gutter-x: 4px; + } + + .g-sm-shortest, + .gy-sm-shortest { + --bs-gutter-y: 4px; + } + + .g-sm-shorter, + .gx-sm-shorter { + --bs-gutter-x: 8px; + } + + .g-sm-shorter, + .gy-sm-shorter { + --bs-gutter-y: 8px; + } + + .g-sm-short, + .gx-sm-short { + --bs-gutter-x: 12px; + } + + .g-sm-short, + .gy-sm-short { + --bs-gutter-y: 12px; + } + + .g-sm-medium, + .gx-sm-medium { + --bs-gutter-x: 16px; + } + + .g-sm-medium, + .gy-sm-medium { + --bs-gutter-y: 16px; + } + + .g-sm-tall, + .gx-sm-tall { + --bs-gutter-x: 24px; + } + + .g-sm-tall, + .gy-sm-tall { + --bs-gutter-y: 24px; + } + + .g-sm-taller, + .gx-sm-taller { + --bs-gutter-x: 32px; + } + + .g-sm-taller, + .gy-sm-taller { + --bs-gutter-y: 32px; + } + + .g-sm-tallest, + .gx-sm-tallest { + --bs-gutter-x: 40px; + } + + .g-sm-tallest, + .gy-sm-tallest { + --bs-gutter-y: 40px; + } + + .g-sm-spacious, + .gx-sm-spacious { + --bs-gutter-x: 48px; + } + + .g-sm-spacious, + .gy-sm-spacious { + --bs-gutter-y: 48px; + } + + .g-sm-huge, + .gx-sm-huge { + --bs-gutter-x: 56px; + } + + .g-sm-huge, + .gy-sm-huge { + --bs-gutter-y: 56px; + } + + .g-sm-jumbo, + .gx-sm-jumbo { + --bs-gutter-x: 64px; + } + + .g-sm-jumbo, + .gy-sm-jumbo { + --bs-gutter-y: 64px; + } + + .g-sm-0, + .gx-sm-0 { + --bs-gutter-x: 0; + } + + .g-sm-0, + .gy-sm-0 { + --bs-gutter-y: 0; + } + + .g-sm-1, + .gx-sm-1 { + --bs-gutter-x: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-sm-1, + .gy-sm-1 { + --bs-gutter-y: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-sm-2, + .gx-sm-2 { + --bs-gutter-x: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-sm-2, + .gy-sm-2 { + --bs-gutter-y: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-sm-3, + .gx-sm-3 { + --bs-gutter-x: 1.25rem; + } + + .g-sm-3, + .gy-sm-3 { + --bs-gutter-y: 1.25rem; + } + + .g-sm-4, + .gx-sm-4 { + --bs-gutter-x: 1.875rem; + } + + .g-sm-4, + .gy-sm-4 { + --bs-gutter-y: 1.875rem; + } + + .g-sm-5, + .gx-sm-5 { + --bs-gutter-x: 3.75rem; + } + + .g-sm-5, + .gy-sm-5 { + --bs-gutter-y: 3.75rem; + } + } + + @media (min-width: 736px) { + .col-md { + flex: 1 0 0%; + } + + .row-cols-md-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-md-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-md-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-md-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-md-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-md-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-md-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-md-auto { + flex: 0 0 auto; + width: auto; + } + + .col-md-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-md-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-md-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-md-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-md-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-md-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-md-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-md-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-md-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-md-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-md-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-md-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-md-0 { + margin-left: 0; + } + + .offset-md-1 { + margin-left: 8.33333333%; + } + + .offset-md-2 { + margin-left: 16.66666667%; + } + + .offset-md-3 { + margin-left: 25%; + } + + .offset-md-4 { + margin-left: 33.33333333%; + } + + .offset-md-5 { + margin-left: 41.66666667%; + } + + .offset-md-6 { + margin-left: 50%; + } + + .offset-md-7 { + margin-left: 58.33333333%; + } + + .offset-md-8 { + margin-left: 66.66666667%; + } + + .offset-md-9 { + margin-left: 75%; + } + + .offset-md-10 { + margin-left: 83.33333333%; + } + + .offset-md-11 { + margin-left: 91.66666667%; + } + + .g-md-none, + .gx-md-none { + --bs-gutter-x: 0; + } + + .g-md-none, + .gy-md-none { + --bs-gutter-y: 0; + } + + .g-md-smash, + .gx-md-smash { + --bs-gutter-x: 2px; + } + + .g-md-smash, + .gy-md-smash { + --bs-gutter-y: 2px; + } + + .g-md-shortest, + .gx-md-shortest { + --bs-gutter-x: 4px; + } + + .g-md-shortest, + .gy-md-shortest { + --bs-gutter-y: 4px; + } + + .g-md-shorter, + .gx-md-shorter { + --bs-gutter-x: 8px; + } + + .g-md-shorter, + .gy-md-shorter { + --bs-gutter-y: 8px; + } + + .g-md-short, + .gx-md-short { + --bs-gutter-x: 12px; + } + + .g-md-short, + .gy-md-short { + --bs-gutter-y: 12px; + } + + .g-md-medium, + .gx-md-medium { + --bs-gutter-x: 16px; + } + + .g-md-medium, + .gy-md-medium { + --bs-gutter-y: 16px; + } + + .g-md-tall, + .gx-md-tall { + --bs-gutter-x: 24px; + } + + .g-md-tall, + .gy-md-tall { + --bs-gutter-y: 24px; + } + + .g-md-taller, + .gx-md-taller { + --bs-gutter-x: 32px; + } + + .g-md-taller, + .gy-md-taller { + --bs-gutter-y: 32px; + } + + .g-md-tallest, + .gx-md-tallest { + --bs-gutter-x: 40px; + } + + .g-md-tallest, + .gy-md-tallest { + --bs-gutter-y: 40px; + } + + .g-md-spacious, + .gx-md-spacious { + --bs-gutter-x: 48px; + } + + .g-md-spacious, + .gy-md-spacious { + --bs-gutter-y: 48px; + } + + .g-md-huge, + .gx-md-huge { + --bs-gutter-x: 56px; + } + + .g-md-huge, + .gy-md-huge { + --bs-gutter-y: 56px; + } + + .g-md-jumbo, + .gx-md-jumbo { + --bs-gutter-x: 64px; + } + + .g-md-jumbo, + .gy-md-jumbo { + --bs-gutter-y: 64px; + } + + .g-md-0, + .gx-md-0 { + --bs-gutter-x: 0; + } + + .g-md-0, + .gy-md-0 { + --bs-gutter-y: 0; + } + + .g-md-1, + .gx-md-1 { + --bs-gutter-x: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-md-1, + .gy-md-1 { + --bs-gutter-y: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-md-2, + .gx-md-2 { + --bs-gutter-x: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-md-2, + .gy-md-2 { + --bs-gutter-y: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-md-3, + .gx-md-3 { + --bs-gutter-x: 1.25rem; + } + + .g-md-3, + .gy-md-3 { + --bs-gutter-y: 1.25rem; + } + + .g-md-4, + .gx-md-4 { + --bs-gutter-x: 1.875rem; + } + + .g-md-4, + .gy-md-4 { + --bs-gutter-y: 1.875rem; + } + + .g-md-5, + .gx-md-5 { + --bs-gutter-x: 3.75rem; + } + + .g-md-5, + .gy-md-5 { + --bs-gutter-y: 3.75rem; + } + } + + @media (min-width: 1024px) { + .col-lg { + flex: 1 0 0%; + } + + .row-cols-lg-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-lg-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-lg-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-lg-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-lg-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-lg-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-lg-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-lg-auto { + flex: 0 0 auto; + width: auto; + } + + .col-lg-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-lg-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-lg-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-lg-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-lg-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-lg-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-lg-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-lg-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-lg-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-lg-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-lg-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-lg-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-lg-0 { + margin-left: 0; + } + + .offset-lg-1 { + margin-left: 8.33333333%; + } + + .offset-lg-2 { + margin-left: 16.66666667%; + } + + .offset-lg-3 { + margin-left: 25%; + } + + .offset-lg-4 { + margin-left: 33.33333333%; + } + + .offset-lg-5 { + margin-left: 41.66666667%; + } + + .offset-lg-6 { + margin-left: 50%; + } + + .offset-lg-7 { + margin-left: 58.33333333%; + } + + .offset-lg-8 { + margin-left: 66.66666667%; + } + + .offset-lg-9 { + margin-left: 75%; + } + + .offset-lg-10 { + margin-left: 83.33333333%; + } + + .offset-lg-11 { + margin-left: 91.66666667%; + } + + .g-lg-none, + .gx-lg-none { + --bs-gutter-x: 0; + } + + .g-lg-none, + .gy-lg-none { + --bs-gutter-y: 0; + } + + .g-lg-smash, + .gx-lg-smash { + --bs-gutter-x: 2px; + } + + .g-lg-smash, + .gy-lg-smash { + --bs-gutter-y: 2px; + } + + .g-lg-shortest, + .gx-lg-shortest { + --bs-gutter-x: 4px; + } + + .g-lg-shortest, + .gy-lg-shortest { + --bs-gutter-y: 4px; + } + + .g-lg-shorter, + .gx-lg-shorter { + --bs-gutter-x: 8px; + } + + .g-lg-shorter, + .gy-lg-shorter { + --bs-gutter-y: 8px; + } + + .g-lg-short, + .gx-lg-short { + --bs-gutter-x: 12px; + } + + .g-lg-short, + .gy-lg-short { + --bs-gutter-y: 12px; + } + + .g-lg-medium, + .gx-lg-medium { + --bs-gutter-x: 16px; + } + + .g-lg-medium, + .gy-lg-medium { + --bs-gutter-y: 16px; + } + + .g-lg-tall, + .gx-lg-tall { + --bs-gutter-x: 24px; + } + + .g-lg-tall, + .gy-lg-tall { + --bs-gutter-y: 24px; + } + + .g-lg-taller, + .gx-lg-taller { + --bs-gutter-x: 32px; + } + + .g-lg-taller, + .gy-lg-taller { + --bs-gutter-y: 32px; + } + + .g-lg-tallest, + .gx-lg-tallest { + --bs-gutter-x: 40px; + } + + .g-lg-tallest, + .gy-lg-tallest { + --bs-gutter-y: 40px; + } + + .g-lg-spacious, + .gx-lg-spacious { + --bs-gutter-x: 48px; + } + + .g-lg-spacious, + .gy-lg-spacious { + --bs-gutter-y: 48px; + } + + .g-lg-huge, + .gx-lg-huge { + --bs-gutter-x: 56px; + } + + .g-lg-huge, + .gy-lg-huge { + --bs-gutter-y: 56px; + } + + .g-lg-jumbo, + .gx-lg-jumbo { + --bs-gutter-x: 64px; + } + + .g-lg-jumbo, + .gy-lg-jumbo { + --bs-gutter-y: 64px; + } + + .g-lg-0, + .gx-lg-0 { + --bs-gutter-x: 0; + } + + .g-lg-0, + .gy-lg-0 { + --bs-gutter-y: 0; + } + + .g-lg-1, + .gx-lg-1 { + --bs-gutter-x: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-lg-1, + .gy-lg-1 { + --bs-gutter-y: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-lg-2, + .gx-lg-2 { + --bs-gutter-x: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-lg-2, + .gy-lg-2 { + --bs-gutter-y: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-lg-3, + .gx-lg-3 { + --bs-gutter-x: 1.25rem; + } + + .g-lg-3, + .gy-lg-3 { + --bs-gutter-y: 1.25rem; + } + + .g-lg-4, + .gx-lg-4 { + --bs-gutter-x: 1.875rem; + } + + .g-lg-4, + .gy-lg-4 { + --bs-gutter-y: 1.875rem; + } + + .g-lg-5, + .gx-lg-5 { + --bs-gutter-x: 3.75rem; + } + + .g-lg-5, + .gy-lg-5 { + --bs-gutter-y: 3.75rem; + } + } + + @media (min-width: 1320px) { + .col-xl { + flex: 1 0 0%; + } + + .row-cols-xl-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-xl-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-xl-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-xl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-xl-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-xl-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-xl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xl-auto { + flex: 0 0 auto; + width: auto; + } + + .col-xl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-xl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xl-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-xl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-xl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-xl-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-xl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-xl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-xl-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-xl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-xl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-xl-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-xl-0 { + margin-left: 0; + } + + .offset-xl-1 { + margin-left: 8.33333333%; + } + + .offset-xl-2 { + margin-left: 16.66666667%; + } + + .offset-xl-3 { + margin-left: 25%; + } + + .offset-xl-4 { + margin-left: 33.33333333%; + } + + .offset-xl-5 { + margin-left: 41.66666667%; + } + + .offset-xl-6 { + margin-left: 50%; + } + + .offset-xl-7 { + margin-left: 58.33333333%; + } + + .offset-xl-8 { + margin-left: 66.66666667%; + } + + .offset-xl-9 { + margin-left: 75%; + } + + .offset-xl-10 { + margin-left: 83.33333333%; + } + + .offset-xl-11 { + margin-left: 91.66666667%; + } + + .g-xl-none, + .gx-xl-none { + --bs-gutter-x: 0; + } + + .g-xl-none, + .gy-xl-none { + --bs-gutter-y: 0; + } + + .g-xl-smash, + .gx-xl-smash { + --bs-gutter-x: 2px; + } + + .g-xl-smash, + .gy-xl-smash { + --bs-gutter-y: 2px; + } + + .g-xl-shortest, + .gx-xl-shortest { + --bs-gutter-x: 4px; + } + + .g-xl-shortest, + .gy-xl-shortest { + --bs-gutter-y: 4px; + } + + .g-xl-shorter, + .gx-xl-shorter { + --bs-gutter-x: 8px; + } + + .g-xl-shorter, + .gy-xl-shorter { + --bs-gutter-y: 8px; + } + + .g-xl-short, + .gx-xl-short { + --bs-gutter-x: 12px; + } + + .g-xl-short, + .gy-xl-short { + --bs-gutter-y: 12px; + } + + .g-xl-medium, + .gx-xl-medium { + --bs-gutter-x: 16px; + } + + .g-xl-medium, + .gy-xl-medium { + --bs-gutter-y: 16px; + } + + .g-xl-tall, + .gx-xl-tall { + --bs-gutter-x: 24px; + } + + .g-xl-tall, + .gy-xl-tall { + --bs-gutter-y: 24px; + } + + .g-xl-taller, + .gx-xl-taller { + --bs-gutter-x: 32px; + } + + .g-xl-taller, + .gy-xl-taller { + --bs-gutter-y: 32px; + } + + .g-xl-tallest, + .gx-xl-tallest { + --bs-gutter-x: 40px; + } + + .g-xl-tallest, + .gy-xl-tallest { + --bs-gutter-y: 40px; + } + + .g-xl-spacious, + .gx-xl-spacious { + --bs-gutter-x: 48px; + } + + .g-xl-spacious, + .gy-xl-spacious { + --bs-gutter-y: 48px; + } + + .g-xl-huge, + .gx-xl-huge { + --bs-gutter-x: 56px; + } + + .g-xl-huge, + .gy-xl-huge { + --bs-gutter-y: 56px; + } + + .g-xl-jumbo, + .gx-xl-jumbo { + --bs-gutter-x: 64px; + } + + .g-xl-jumbo, + .gy-xl-jumbo { + --bs-gutter-y: 64px; + } + + .g-xl-0, + .gx-xl-0 { + --bs-gutter-x: 0; + } + + .g-xl-0, + .gy-xl-0 { + --bs-gutter-y: 0; + } + + .g-xl-1, + .gx-xl-1 { + --bs-gutter-x: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xl-1, + .gy-xl-1 { + --bs-gutter-y: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xl-2, + .gx-xl-2 { + --bs-gutter-x: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xl-2, + .gy-xl-2 { + --bs-gutter-y: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xl-3, + .gx-xl-3 { + --bs-gutter-x: 1.25rem; + } + + .g-xl-3, + .gy-xl-3 { + --bs-gutter-y: 1.25rem; + } + + .g-xl-4, + .gx-xl-4 { + --bs-gutter-x: 1.875rem; + } + + .g-xl-4, + .gy-xl-4 { + --bs-gutter-y: 1.875rem; + } + + .g-xl-5, + .gx-xl-5 { + --bs-gutter-x: 3.75rem; + } + + .g-xl-5, + .gy-xl-5 { + --bs-gutter-y: 3.75rem; + } + } + + @media (min-width: 1640px) { + .col-xxl { + flex: 1 0 0%; + } + + .row-cols-xxl-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-xxl-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-xxl-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-xxl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-xxl-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-xxl-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-xxl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xxl-auto { + flex: 0 0 auto; + width: auto; + } + + .col-xxl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-xxl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xxl-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-xxl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-xxl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-xxl-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-xxl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-xxl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-xxl-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-xxl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-xxl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-xxl-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-xxl-0 { + margin-left: 0; + } + + .offset-xxl-1 { + margin-left: 8.33333333%; + } + + .offset-xxl-2 { + margin-left: 16.66666667%; + } + + .offset-xxl-3 { + margin-left: 25%; + } + + .offset-xxl-4 { + margin-left: 33.33333333%; + } + + .offset-xxl-5 { + margin-left: 41.66666667%; + } + + .offset-xxl-6 { + margin-left: 50%; + } + + .offset-xxl-7 { + margin-left: 58.33333333%; + } + + .offset-xxl-8 { + margin-left: 66.66666667%; + } + + .offset-xxl-9 { + margin-left: 75%; + } + + .offset-xxl-10 { + margin-left: 83.33333333%; + } + + .offset-xxl-11 { + margin-left: 91.66666667%; + } + + .g-xxl-none, + .gx-xxl-none { + --bs-gutter-x: 0; + } + + .g-xxl-none, + .gy-xxl-none { + --bs-gutter-y: 0; + } + + .g-xxl-smash, + .gx-xxl-smash { + --bs-gutter-x: 2px; + } + + .g-xxl-smash, + .gy-xxl-smash { + --bs-gutter-y: 2px; + } + + .g-xxl-shortest, + .gx-xxl-shortest { + --bs-gutter-x: 4px; + } + + .g-xxl-shortest, + .gy-xxl-shortest { + --bs-gutter-y: 4px; + } + + .g-xxl-shorter, + .gx-xxl-shorter { + --bs-gutter-x: 8px; + } + + .g-xxl-shorter, + .gy-xxl-shorter { + --bs-gutter-y: 8px; + } + + .g-xxl-short, + .gx-xxl-short { + --bs-gutter-x: 12px; + } + + .g-xxl-short, + .gy-xxl-short { + --bs-gutter-y: 12px; + } + + .g-xxl-medium, + .gx-xxl-medium { + --bs-gutter-x: 16px; + } + + .g-xxl-medium, + .gy-xxl-medium { + --bs-gutter-y: 16px; + } + + .g-xxl-tall, + .gx-xxl-tall { + --bs-gutter-x: 24px; + } + + .g-xxl-tall, + .gy-xxl-tall { + --bs-gutter-y: 24px; + } + + .g-xxl-taller, + .gx-xxl-taller { + --bs-gutter-x: 32px; + } + + .g-xxl-taller, + .gy-xxl-taller { + --bs-gutter-y: 32px; + } + + .g-xxl-tallest, + .gx-xxl-tallest { + --bs-gutter-x: 40px; + } + + .g-xxl-tallest, + .gy-xxl-tallest { + --bs-gutter-y: 40px; + } + + .g-xxl-spacious, + .gx-xxl-spacious { + --bs-gutter-x: 48px; + } + + .g-xxl-spacious, + .gy-xxl-spacious { + --bs-gutter-y: 48px; + } + + .g-xxl-huge, + .gx-xxl-huge { + --bs-gutter-x: 56px; + } + + .g-xxl-huge, + .gy-xxl-huge { + --bs-gutter-y: 56px; + } + + .g-xxl-jumbo, + .gx-xxl-jumbo { + --bs-gutter-x: 64px; + } + + .g-xxl-jumbo, + .gy-xxl-jumbo { + --bs-gutter-y: 64px; + } + + .g-xxl-0, + .gx-xxl-0 { + --bs-gutter-x: 0; + } + + .g-xxl-0, + .gy-xxl-0 { + --bs-gutter-y: 0; + } + + .g-xxl-1, + .gx-xxl-1 { + --bs-gutter-x: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xxl-1, + .gy-xxl-1 { + --bs-gutter-y: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xxl-2, + .gx-xxl-2 { + --bs-gutter-x: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xxl-2, + .gy-xxl-2 { + --bs-gutter-y: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xxl-3, + .gx-xxl-3 { + --bs-gutter-x: 1.25rem; + } + + .g-xxl-3, + .gy-xxl-3 { + --bs-gutter-y: 1.25rem; + } + + .g-xxl-4, + .gx-xxl-4 { + --bs-gutter-x: 1.875rem; + } + + .g-xxl-4, + .gy-xxl-4 { + --bs-gutter-y: 1.875rem; + } + + .g-xxl-5, + .gx-xxl-5 { + --bs-gutter-x: 3.75rem; + } + + .g-xxl-5, + .gy-xxl-5 { + --bs-gutter-y: 3.75rem; + } + } + + @media (min-width: 1640px) { + .col-2xl { + flex: 1 0 0%; + } + + .row-cols-2xl-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-2xl-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-2xl-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-2xl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-2xl-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-2xl-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-2xl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-2xl-auto { + flex: 0 0 auto; + width: auto; + } + + .col-2xl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-2xl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-2xl-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-2xl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-2xl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-2xl-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-2xl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-2xl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-2xl-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-2xl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-2xl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-2xl-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-2xl-0 { + margin-left: 0; + } + + .offset-2xl-1 { + margin-left: 8.33333333%; + } + + .offset-2xl-2 { + margin-left: 16.66666667%; + } + + .offset-2xl-3 { + margin-left: 25%; + } + + .offset-2xl-4 { + margin-left: 33.33333333%; + } + + .offset-2xl-5 { + margin-left: 41.66666667%; + } + + .offset-2xl-6 { + margin-left: 50%; + } + + .offset-2xl-7 { + margin-left: 58.33333333%; + } + + .offset-2xl-8 { + margin-left: 66.66666667%; + } + + .offset-2xl-9 { + margin-left: 75%; + } + + .offset-2xl-10 { + margin-left: 83.33333333%; + } + + .offset-2xl-11 { + margin-left: 91.66666667%; + } + + .g-2xl-none, + .gx-2xl-none { + --bs-gutter-x: 0; + } + + .g-2xl-none, + .gy-2xl-none { + --bs-gutter-y: 0; + } + + .g-2xl-smash, + .gx-2xl-smash { + --bs-gutter-x: 2px; + } + + .g-2xl-smash, + .gy-2xl-smash { + --bs-gutter-y: 2px; + } + + .g-2xl-shortest, + .gx-2xl-shortest { + --bs-gutter-x: 4px; + } + + .g-2xl-shortest, + .gy-2xl-shortest { + --bs-gutter-y: 4px; + } + + .g-2xl-shorter, + .gx-2xl-shorter { + --bs-gutter-x: 8px; + } + + .g-2xl-shorter, + .gy-2xl-shorter { + --bs-gutter-y: 8px; + } + + .g-2xl-short, + .gx-2xl-short { + --bs-gutter-x: 12px; + } + + .g-2xl-short, + .gy-2xl-short { + --bs-gutter-y: 12px; + } + + .g-2xl-medium, + .gx-2xl-medium { + --bs-gutter-x: 16px; + } + + .g-2xl-medium, + .gy-2xl-medium { + --bs-gutter-y: 16px; + } + + .g-2xl-tall, + .gx-2xl-tall { + --bs-gutter-x: 24px; + } + + .g-2xl-tall, + .gy-2xl-tall { + --bs-gutter-y: 24px; + } + + .g-2xl-taller, + .gx-2xl-taller { + --bs-gutter-x: 32px; + } + + .g-2xl-taller, + .gy-2xl-taller { + --bs-gutter-y: 32px; + } + + .g-2xl-tallest, + .gx-2xl-tallest { + --bs-gutter-x: 40px; + } + + .g-2xl-tallest, + .gy-2xl-tallest { + --bs-gutter-y: 40px; + } + + .g-2xl-spacious, + .gx-2xl-spacious { + --bs-gutter-x: 48px; + } + + .g-2xl-spacious, + .gy-2xl-spacious { + --bs-gutter-y: 48px; + } + + .g-2xl-huge, + .gx-2xl-huge { + --bs-gutter-x: 56px; + } + + .g-2xl-huge, + .gy-2xl-huge { + --bs-gutter-y: 56px; + } + + .g-2xl-jumbo, + .gx-2xl-jumbo { + --bs-gutter-x: 64px; + } + + .g-2xl-jumbo, + .gy-2xl-jumbo { + --bs-gutter-y: 64px; + } + + .g-2xl-0, + .gx-2xl-0 { + --bs-gutter-x: 0; + } + + .g-2xl-0, + .gy-2xl-0 { + --bs-gutter-y: 0; + } + + .g-2xl-1, + .gx-2xl-1 { + --bs-gutter-x: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2xl-1, + .gy-2xl-1 { + --bs-gutter-y: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2xl-2, + .gx-2xl-2 { + --bs-gutter-x: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2xl-2, + .gy-2xl-2 { + --bs-gutter-y: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2xl-3, + .gx-2xl-3 { + --bs-gutter-x: 1.25rem; + } + + .g-2xl-3, + .gy-2xl-3 { + --bs-gutter-y: 1.25rem; + } + + .g-2xl-4, + .gx-2xl-4 { + --bs-gutter-x: 1.875rem; + } + + .g-2xl-4, + .gy-2xl-4 { + --bs-gutter-y: 1.875rem; + } + + .g-2xl-5, + .gx-2xl-5 { + --bs-gutter-x: 3.75rem; + } + + .g-2xl-5, + .gy-2xl-5 { + --bs-gutter-y: 3.75rem; + } + } + + @media (min-width: 1880px) { + .col-3xl { + flex: 1 0 0%; + } + + .row-cols-3xl-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-3xl-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-3xl-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-3xl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-3xl-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-3xl-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-3xl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-3xl-auto { + flex: 0 0 auto; + width: auto; + } + + .col-3xl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-3xl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-3xl-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-3xl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-3xl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-3xl-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-3xl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-3xl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-3xl-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-3xl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-3xl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-3xl-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-3xl-0 { + margin-left: 0; + } + + .offset-3xl-1 { + margin-left: 8.33333333%; + } + + .offset-3xl-2 { + margin-left: 16.66666667%; + } + + .offset-3xl-3 { + margin-left: 25%; + } + + .offset-3xl-4 { + margin-left: 33.33333333%; + } + + .offset-3xl-5 { + margin-left: 41.66666667%; + } + + .offset-3xl-6 { + margin-left: 50%; + } + + .offset-3xl-7 { + margin-left: 58.33333333%; + } + + .offset-3xl-8 { + margin-left: 66.66666667%; + } + + .offset-3xl-9 { + margin-left: 75%; + } + + .offset-3xl-10 { + margin-left: 83.33333333%; + } + + .offset-3xl-11 { + margin-left: 91.66666667%; + } + + .g-3xl-none, + .gx-3xl-none { + --bs-gutter-x: 0; + } + + .g-3xl-none, + .gy-3xl-none { + --bs-gutter-y: 0; + } + + .g-3xl-smash, + .gx-3xl-smash { + --bs-gutter-x: 2px; + } + + .g-3xl-smash, + .gy-3xl-smash { + --bs-gutter-y: 2px; + } + + .g-3xl-shortest, + .gx-3xl-shortest { + --bs-gutter-x: 4px; + } + + .g-3xl-shortest, + .gy-3xl-shortest { + --bs-gutter-y: 4px; + } + + .g-3xl-shorter, + .gx-3xl-shorter { + --bs-gutter-x: 8px; + } + + .g-3xl-shorter, + .gy-3xl-shorter { + --bs-gutter-y: 8px; + } + + .g-3xl-short, + .gx-3xl-short { + --bs-gutter-x: 12px; + } + + .g-3xl-short, + .gy-3xl-short { + --bs-gutter-y: 12px; + } + + .g-3xl-medium, + .gx-3xl-medium { + --bs-gutter-x: 16px; + } + + .g-3xl-medium, + .gy-3xl-medium { + --bs-gutter-y: 16px; + } + + .g-3xl-tall, + .gx-3xl-tall { + --bs-gutter-x: 24px; + } + + .g-3xl-tall, + .gy-3xl-tall { + --bs-gutter-y: 24px; + } + + .g-3xl-taller, + .gx-3xl-taller { + --bs-gutter-x: 32px; + } + + .g-3xl-taller, + .gy-3xl-taller { + --bs-gutter-y: 32px; + } + + .g-3xl-tallest, + .gx-3xl-tallest { + --bs-gutter-x: 40px; + } + + .g-3xl-tallest, + .gy-3xl-tallest { + --bs-gutter-y: 40px; + } + + .g-3xl-spacious, + .gx-3xl-spacious { + --bs-gutter-x: 48px; + } + + .g-3xl-spacious, + .gy-3xl-spacious { + --bs-gutter-y: 48px; + } + + .g-3xl-huge, + .gx-3xl-huge { + --bs-gutter-x: 56px; + } + + .g-3xl-huge, + .gy-3xl-huge { + --bs-gutter-y: 56px; + } + + .g-3xl-jumbo, + .gx-3xl-jumbo { + --bs-gutter-x: 64px; + } + + .g-3xl-jumbo, + .gy-3xl-jumbo { + --bs-gutter-y: 64px; + } + + .g-3xl-0, + .gx-3xl-0 { + --bs-gutter-x: 0; + } + + .g-3xl-0, + .gy-3xl-0 { + --bs-gutter-y: 0; + } + + .g-3xl-1, + .gx-3xl-1 { + --bs-gutter-x: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-3xl-1, + .gy-3xl-1 { + --bs-gutter-y: 0.3125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-3xl-2, + .gx-3xl-2 { + --bs-gutter-x: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-3xl-2, + .gy-3xl-2 { + --bs-gutter-y: 0.625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-3xl-3, + .gx-3xl-3 { + --bs-gutter-x: 1.25rem; + } + + .g-3xl-3, + .gy-3xl-3 { + --bs-gutter-y: 1.25rem; + } + + .g-3xl-4, + .gx-3xl-4 { + --bs-gutter-x: 1.875rem; + } + + .g-3xl-4, + .gy-3xl-4 { + --bs-gutter-y: 1.875rem; + } + + .g-3xl-5, + .gx-3xl-5 { + --bs-gutter-x: 3.75rem; + } + + .g-3xl-5, + .gy-3xl-5 { + --bs-gutter-y: 3.75rem; + } + } + } + } + } } +// stylelint-enable no-duplicate-at-import-rules diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss index 225795b257..d086a3297b 100644 --- a/scss/tokens/_semantic.scss +++ b/scss/tokens/_semantic.scss @@ -428,6 +428,7 @@ $ouds-grid-2xl-column-gap: $ouds-grid-column-gap-600 !default; $ouds-grid-2xl-margin: $ouds-grid-margin-1700 !default; $ouds-grid-2xl-max-width-public-website: $ouds-grid-max-width-650 !default; $ouds-grid-2xl-max-width-specific-tools: $ouds-grid-max-width-700 !default; +$ouds-grid-max-width: $ouds-grid-max-width-650 !default; $ouds-grid-2xl-min-width: $ouds-grid-min-width-700 !default; $ouds-grid-2xl-width: $ouds-grid-width-700 !default; $ouds-grid-2xs-column-count: $ouds-grid-column-count-400 !default; diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss index d7a5c71add..26f72584f8 100644 --- a/site/assets/scss/_layout.scss +++ b/site/assets/scss/_layout.scss @@ -1,12 +1,4 @@ -.bd-gutter { - --bs-gutter-x: #{$bd-gutter-x * 2}; // OUDS mod: changed value - - // OUDS mod - @include media-breakpoint-up(md) { - --bs-gutter-x: #{$bd-gutter-x * 4}; - } - // End mod -} +// OUDS mod: no `.bd-gutter` .bd-layout { @include media-breakpoint-up(lg) { diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index 5a9a72d680..bffba6d5e2 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -29,6 +29,7 @@ @import "../../../scss/tokens/component"; @import "../../../scss/ouds-maps"; @import "../../../scss/variables"; +@import "../../../scss/maps"; @import "../../../scss/mixins"; // fusv-disable diff --git a/site/content/docs/0.0/customize/options.md b/site/content/docs/0.0/customize/options.md index 508783a69a..4bc71e0e6a 100644 --- a/site/content/docs/0.0/customize/options.md +++ b/site/content/docs/0.0/customize/options.md @@ -16,6 +16,7 @@ You can find and customize these variables for key global options in OUDS Web's | --------------------------------- | ------------------------------------- | -------------------------------------------------------------------------------------- | | `$enable-bootstrap-compatibility` | `true` or `false` (default) | Enforces Bootstrap compatibility. | | `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). | +| `$enable-container-classes` | `true` (default) or `false` | Enables the generation of CSS classes for layout containers. | | `$enable-important-utilities` | `true` (default) or `false` | Enables the `!important` suffix in utility classes. | + diff --git a/site/content/docs/0.0/examples/grid/grid.css b/site/content/docs/0.0/examples/grid/grid.css new file mode 100644 index 0000000000..2bbfc1937c --- /dev/null +++ b/site/content/docs/0.0/examples/grid/grid.css @@ -0,0 +1,17 @@ +.themed-grid-col { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: var(--bs-secondary-bg); /* OUDS mod: instead of `rgba(112.520718, 44.062154, 249.437846, .15)` */ + /* OUDS mod: no `border` */ + outline: 1px solid var(--bs-border-color-subtle); /* OUDS mod */ +} + +.themed-container { + /* OUDS mod: no `padding` */ + padding-top: .75rem; /* OUDS mod */ + padding-bottom: .75rem; /* OUDS mod */ + margin-bottom: 1.5rem; + background-color: var(--bs-secondary-bg); /* OUDS mod: instead of `rgba(112.520718, 44.062154, 249.437846, .15)` */ + /* OUDS mod: no `border` */ + outline: 1px solid var(--bs-border-color-subtle); /* OUDS mod */ +} diff --git a/site/content/docs/0.0/examples/grid/index.html b/site/content/docs/0.0/examples/grid/index.html new file mode 100644 index 0000000000..9099cee5b7 --- /dev/null +++ b/site/content/docs/0.0/examples/grid/index.html @@ -0,0 +1,198 @@ +--- +layout: examples +title: Grid Template +extra_css: +- "grid.css" +body_class: "py-4" +aliases: +- "/examples/grid" +- "/docs/examples/grid" +--- + +
+
+

OUDS Web grid examples

+

Basic grid layouts to get you familiar with building within the OUDS Web grid system.

+

In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in OUDS Web by default.

+ +

Eight grid tiers

+

There are eight tiers to the OUDS Web grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

+ +
+
.col-4
+
.col-4
+
.col-4
+
+ +
+
.col-xs-4
+
.col-xs-4
+
.col-xs-4
+
+ +
+
.col-sm-4
+
.col-sm-4
+
.col-sm-4
+
+ +
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+ +
+
.col-lg-4
+
.col-lg-4
+
.col-lg-4
+
+ +
+
.col-xl-4
+
.col-xl-4
+
.col-xl-4
+
+ +
+
.col-2xl-4
+
.col-2xl-4
+
.col-2xl-4
+
+ +
+
.col-3xl-4
+
.col-3xl-4
+
.col-3xl-4
+
+ +

Three equal columns

+

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

+
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+ +

Three equal columns alternative

+

By using the .row-cols-* classes, you can easily create a grid with equal columns.

+
+
.col child of .row-cols-md-3
+
.col child of .row-cols-md-3
+
.col child of .row-cols-md-3
+
+ +

Three unequal columns

+

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

+
+
.col-md-3
+
.col-md-6
+
.col-md-3
+
+ +

Two columns

+

Get two columns starting at desktops and scaling to large desktops.

+
+
.col-md-8
+
.col-md-4
+
+ +

Full width, single column

+
+ +

No grid classes are necessary for full-width elements.

+
+ +
+ +

Two columns with two nested columns

+

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

+

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

+
+
+
+ .col-md-8 +
+
+
.col-md-6
+
.col-md-6
+
+
+
.col-md-4
+
+ +
+ +

Mixed: mobile and desktop

+

The OUDS Web grid system has eight tiers of classes: 2xs (extra extra small, this class infix is not used), xs (extra small), sm (small), md (medium), lg (large), xl (extra large), 2xl (extra extra large) and 3xl (extra extra extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

+

Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl, 2xl and 3xl, you only need to specify md.

+
+
.col-md-8
+
.col-6 .col-md-4
+
+
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
+
+
.col-6
+
.col-6
+
+ +
+ +

Mixed: mobile, tablet, and desktop

+
+
.col-sm-6 .col-lg-8
+
.col-6 .col-lg-4
+
+
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
+ +
+ +

Gutters

+

With .gx-* classes, the horizontal gutters can be adjusted.

+
+
.col with .gx-short gutters
+
.col with .gx-short gutters
+
.col with .gx-short gutters
+
.col with .gx-short gutters
+
.col with .gx-short gutters
+
.col with .gx-short gutters
+
+

Use the .gy-* classes to control the vertical gutters.

+
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
+

With .g-* classes, the gutters in both directions can be adjusted.

+
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
+
+ +
+
+ +

Containers

+

Container classes in OUDS Web allow containers that are 100% wide until a particular breakpoint.

+
+ + +
.container-fluid
+
.container-fluid.container-max-width
+
diff --git a/site/content/docs/0.0/extend/approach.md b/site/content/docs/0.0/extend/approach.md index f6624ed825..5b3571c5fa 100644 --- a/site/content/docs/0.0/extend/approach.md +++ b/site/content/docs/0.0/extend/approach.md @@ -29,11 +29,9 @@ We'll dive into each of these more throughout, but at a high level, here's what OUDS Web's responsive styles are built to be responsive, an approach that's often referred to as _mobile-first_. We use this term in our docs and largely agree with it, but at times it can be too broad. While not every component _must_ be entirely responsive in OUDS Web, this responsive approach is about reducing CSS overrides by pushing you to add styles as the viewport becomes larger. - ## Classes diff --git a/site/content/docs/0.0/getting-started/contents.md b/site/content/docs/0.0/getting-started/contents.md index 20581896a2..08749e56c0 100644 --- a/site/content/docs/0.0/getting-started/contents.md +++ b/site/content/docs/0.0/getting-started/contents.md @@ -85,7 +85,7 @@ OUDS Web includes a handful of options for including some or all of our compiled | --- | --- | --- | --- | --- | | `ouds-web.css`
`ouds-web.min.css`
`ouds-web.rtl.css`
`ouds-web.rtl.min.css` | Included | Included | Included | Included without Bootstrap utilities | | `ouds-web-bootstrap.css`
`ouds-web-bootstrap.min.css`
`ouds-web-bootstrap.rtl.css`
`ouds-web-bootstrap.rtl.min.css` | Included | Included | Included | Included with Bootstrap utilities | -| `ouds-web-grid.css`
`ouds-web-grid.rtl.css`
`ouds-web-grid.min.css`
`ouds-web-grid.rtl.min.css` | — | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) | +| `ouds-web-grid.css`
`ouds-web-grid.rtl.css`
`ouds-web-grid.min.css`
`ouds-web-grid.rtl.min.css` | [Only grid system]({{< docsref "/layout/grid" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) | | `ouds-web-utilities.css`
`ouds-web-utilities.rtl.css`
`ouds-web-utilities.min.css`
`ouds-web-utilities.rtl.min.css` | — | — | — | Included | | `ouds-web-reboot.css`
`ouds-web-reboot.rtl.css`
`ouds-web-reboot.min.css`
`ouds-web-reboot.rtl.min.css` | — | — | — | — | {{< /bs-table >}} diff --git a/site/content/docs/0.0/helpers/position.md b/site/content/docs/0.0/helpers/position.md index 939963716d..407e9cc7f3 100644 --- a/site/content/docs/0.0/helpers/position.md +++ b/site/content/docs/0.0/helpers/position.md @@ -32,17 +32,19 @@ Position an element at the top of the viewport, from edge to edge, but only afte
...
``` - +
Stick to the top on viewports sized XL (extra large) or wider
+
Stick to the top on viewports sized 2XL (extra extra large) or wider
+
Stick to the top on viewports sized 3XL (extra extra extra large) or wider
+``` ## Sticky bottom @@ -52,14 +54,16 @@ Position an element at the bottom of the viewport, from edge to edge, but only a
...
``` - +
Stick to the bottom on viewports sized XL (extra large) or wider
+
Stick to the bottom on viewports sized 2XL (extra extra large) or wider
+
Stick to the bottom on viewports sized 3XL (extra extra extra large) or wider
+``` diff --git a/site/content/docs/0.0/helpers/stretched-link.md b/site/content/docs/0.0/helpers/stretched-link.md index 1f5563f1f0..59733d983c 100644 --- a/site/content/docs/0.0/helpers/stretched-link.md +++ b/site/content/docs/0.0/helpers/stretched-link.md @@ -37,10 +37,10 @@ Most custom components do not have `position: relative` by default, so we need t {{< /example >}} - +{{< /example >}} ## Identifying the containing block diff --git a/site/content/docs/0.0/layout/breakpoints.md b/site/content/docs/0.0/layout/breakpoints.md index 063447d4b2..b1082eb1b3 100644 --- a/site/content/docs/0.0/layout/breakpoints.md +++ b/site/content/docs/0.0/layout/breakpoints.md @@ -11,4 +11,200 @@ aliases: toc: true --- -{{< callout-soon "page" >}} +## Core concepts + +- **Breakpoints are the building blocks of responsive design.** Use them to control when your layout can be adapted at a particular viewport or device size. + +- **Use media queries to architect your CSS by breakpoint.** Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use `min-width` in our media queries. + +- **Mobile first, responsive design is the goal.** OUDS Web's CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors. + +## Available breakpoints + +OUDS Web includes eight default breakpoints, sometimes referred to as _grid tiers_, for building responsively. These breakpoints can be customized if you're using our source Sass files. + +{{< bs-table "table" >}} +| Breakpoint | Class infix | Dimensions | +| --- | --- | --- | +| 2X-small | None |<390px | +| X-small | `xs` | ≥390px | +| Small | `sm` | ≥480px | +| Medium | `md` | ≥736px | +| Large | `lg` | ≥1024px | +| X-large | `xl` | ≥1320px | +| 2X-large | `2xl` | ≥1640px | +| 3X-large | `3xl` | ≥1880px | +{{< /bs-table >}} + +Breakpoints are representative of a subset of common device sizes and viewport dimensions—they don't specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device. + +These breakpoints are customizable via Sass—you'll find them in a Sass map in our `_variables.scss` stylesheet. + +{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}} + +For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}). + +{{< bootstrap-compatibility >}} + +Includes support for xxl breakpoint, defined like 2xl. + +{{< bs-table "table" >}} +| Breakpoint | Class infix | Dimensions | +| --- | --- | --- | +| XX-large | `xxl` | ≥1640px | +{{< /bs-table >}} + +{{< /bootstrap-compatibility >}} + +## Media queries + +Since OUDS Web is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes. + +### Min-width + +OUDS Web primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components. + +```scss +// Source mixins + +// No media query necessary for 2xs breakpoint as it's effectively `@media (min-width: 0) { ... }` +@include media-breakpoint-up(xs) { ... } +@include media-breakpoint-up(sm) { ... } +@include media-breakpoint-up(md) { ... } +@include media-breakpoint-up(lg) { ... } +@include media-breakpoint-up(xl) { ... } +@include media-breakpoint-up(2xl) { ... } +@include media-breakpoint-up(3xl) { ... } + +// Usage + +// Example: Hide starting at `min-width: 0`, and then show at the `xs` breakpoint +.custom-class { + display: none; +} +@include media-breakpoint-up(xs) { + .custom-class { + display: block; + } +} +``` + +These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. For example: + +```scss +// 2X-Small devices (portrait phones, less than 390px) +// No media query for `2xs` since this is the default in OUDS Web + +// X-Small devices (portrait phones, 390px and up) +@media (min-width: 390px) { ... } + +// Small devices (landscape phones, 480px and up) +@media (min-width: 480px) { ... } + +// Medium devices (portrait tablets, 736px and up) +@media (min-width: 736px) { ... } + +// Large devices (landscape tablets, 1024px and up) +@media (min-width: 1024px) { ... } + +// X-Large devices (desktops, 1320px and up) +@media (min-width: 1320px) { ... } + +// 2X-Large devices (large desktops, 1640px and up) +@media (min-width: 1640px) { ... } + +// 3X-Large devices (larger desktops, TV, 1880px and up) +@media (min-width: 1880px) { ... } +``` + +### Max-width + +We occasionally use media queries that go in the other direction (the given screen size _or smaller_): + +```scss +// No media query necessary for 2xs breakpoint as it's effectively `@media (max-width: 0) { ... }` +@include media-breakpoint-down(xs) { ... } +@include media-breakpoint-down(sm) { ... } +@include media-breakpoint-down(md) { ... } +@include media-breakpoint-down(lg) { ... } +@include media-breakpoint-down(xl) { ... } +@include media-breakpoint-down(2xl) { ... } +@include media-breakpoint-down(3xl) { ... } + +// Example: Style from medium breakpoint and down +@include media-breakpoint-down(md) { + .custom-class { + display: block; + } +} +``` + +These mixins take those declared breakpoints, subtract `.02px` from them, and use them as our `max-width` values. For example: + +```scss +// `2xs` returns only a ruleset and no media query +// ... { ... } +// `xs` applies to 2X-small devices (portrait phones, less than 390px) +@media (max-width: 389.98px) { ... } + +// `sm` applies to X-small devices (portrait phones, less than 480px) +@media (max-width: 479.98px) { ... } + +// `md` applies to small devices (landscape phones, less than 736px) +@media (max-width: 735.98px) { ... } + +// `lg` applies to medium devices (portrait tablets, less than 1024px) +@media (max-width: 1023.98px) { ... } + +// `xl` applies to large devices (landscape tablets, less than 1320px) +@media (max-width: 1319.98px) { ... } + +// `2xl` applies to X-large devices (desktops, less than 1640px) +@media (max-width: 1639.98px) { ... } + +// `3xl` applies to 2X-large devices (large desktops, less than 1880px) +@media (max-width: 1879.98px) { ... } +``` + +{{< callout warning >}} +{{< partial "callouts/info-mediaqueries-breakpoints.md" >}} +{{< /callout >}} + +### Single breakpoint + +There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths. + +```scss +@include media-breakpoint-only(2xs) { ... } +@include media-breakpoint-only(xs) { ... } +@include media-breakpoint-only(sm) { ... } +@include media-breakpoint-only(md) { ... } +@include media-breakpoint-only(lg) { ... } +@include media-breakpoint-only(xl) { ... } +@include media-breakpoint-only(2xl) { ... } +@include media-breakpoint-only(3xl) { ... } +``` + +For example the `@include media-breakpoint-only(md) { ... }` will result in: + +```scss +// Example +// Apply styles starting from medium devices and up to large devices +@media (min-width: 736px) and (max-width: 1023.98px) { ... } +``` + +### Between breakpoints + +Similarly, media queries may span multiple breakpoint widths: + +```scss +@include media-breakpoint-between(md, xl) { ... } +``` + +Which results in: + +```scss +// Example +// Apply styles starting from medium devices and up to extra large devices +@media (min-width: 736px) and (max-width: 1319.98px) { ... } +``` diff --git a/site/content/docs/0.0/layout/columns.md b/site/content/docs/0.0/layout/columns.md index fa8549b62f..0d6ef4e0bb 100644 --- a/site/content/docs/0.0/layout/columns.md +++ b/site/content/docs/0.0/layout/columns.md @@ -8,4 +8,358 @@ aliases: toc: true --- -{{< callout-soon "page" >}} +{{< callout info >}} +**Heads up!** Be sure to [read the Grid page]({{< docsref "/layout/grid" >}}) first before diving into how to modify and customize your grid columns. +{{< /callout >}} + +## How they work + +- **Columns build on the grid's flexbox architecture.** Flexbox means we have options for changing individual columns and [modifying groups of columns at the row level]({{< docsref "/layout/grid#row-columns" >}}). You choose how columns grow, shrink, or otherwise change. + +- **When building grid layouts, all content goes in columns.** The hierarchy of OUDS Web's grid goes from [container]({{< docsref "/layout/containers" >}}) to row to column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences. + +- **OUDS Web includes predefined classes for creating fast, responsive layouts.** With [eight breakpoints]({{< docsref "/layout/breakpoints" >}}) (2xs, xs, sm, md, xl, 2xl and 3xl) and a dozen columns at each grid tier, we have dozens of classes already built for you to create your desired layouts. This can be disabled via Sass if you wish. + +- **Don't use columns that are too small for the main grid.** To align with the design system, for the main site grid, you should only use columns in multiples of **3** for smaller breakpoints (`2xs`, `xs`, and `sm`). For medium and larger breakpoints (`md` and `lg`), use columns in multiples of **2**. + +{{< bootstrap-compatibility >}} + +Includes support for xxl breakpoint, defined like 2xl, making `.col-xxl-*` classes available. + +{{< /bootstrap-compatibility >}} + +## Alignment + +Use flexbox alignment utilities to vertically and horizontally align columns. + +### Vertical alignment + +Change the vertical alignment with any of the responsive `align-items-*` classes. + +{{< example class="bd-example-row bd-example-row-flex-cols" >}} +
+
+
+ One of three columns +
+
+ One of three columns +
+
+ One of three columns +
+
+
+{{< /example >}} + +{{< example class="bd-example-row bd-example-row-flex-cols" >}} +
+
+
+ One of three columns +
+
+ One of three columns +
+
+ One of three columns +
+
+
+{{< /example >}} + +{{< example class="bd-example-row bd-example-row-flex-cols" >}} +
+
+
+ One of three columns +
+
+ One of three columns +
+
+ One of three columns +
+
+
+{{< /example >}} + +Or, change the alignment of each column individually with any of the responsive `.align-self-*` classes. + +{{< example class="bd-example-row bd-example-row-flex-cols" >}} +
+
+
+ One of three columns +
+
+ One of three columns +
+
+ One of three columns +
+
+
+{{< /example >}} + +### Horizontal alignment + +Change the horizontal alignment with any of the responsive `justify-content-*` classes. + +{{< example class="bd-example-row" >}} +
+
+
+ One of two columns +
+
+ One of two columns +
+
+
+
+ One of two columns +
+
+ One of two columns +
+
+
+
+ One of two columns +
+
+ One of two columns +
+
+
+
+ One of two columns +
+
+ One of two columns +
+
+
+
+ One of two columns +
+
+ One of two columns +
+
+
+
+ One of two columns +
+
+ One of two columns +
+
+
+{{< /example >}} + +### Column wrapping + +If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. + +{{< example class="bd-example-row" >}} +
+
+
.col-9
+
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
+
.col-6
Subsequent columns continue along the new line.
+
+
+{{< /example >}} + +### Column breaks + +Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `.row`s, but not every implementation method can account for this. + +{{< example class="bd-example-row" >}} +
+
+
.col-6 .col-sm-3
+
.col-6 .col-sm-3
+ + +
+ +
.col-6 .col-sm-3
+
.col-6 .col-sm-3
+
+
+{{< /example >}} + +You may also apply this break at specific breakpoints with our [responsive display utilities]({{< docsref "/utilities/display" >}}). + +{{< example class="bd-example-row" >}} +
+
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+ + +
+ +
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
+
+{{< /example >}} + +## Reordering + +### Order classes + +Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all eight grid tiers. + +{{< example class="bd-example-row" >}} +
+
+
+ First in DOM, no order applied +
+
+ Second in DOM, with a larger order +
+
+ Third in DOM, with an order of 1 +
+
+
+{{< /example >}} + +There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed. + +{{< example class="bd-example-row" >}} +
+
+
+ First in DOM, ordered last +
+
+ Second in DOM, unordered +
+
+ Third in DOM, ordered first +
+
+
+{{< /example >}} + +If you need more `.order-*` classes, you can add new ones by modifying our `$utilities` Sass map. [Read our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) or [our Modify utilities docs]({{< docsref "/utilities/api#modify-utilities" >}}) for details. +```scss +$utilities: map-merge( + $utilities, + ( + "order": map-merge( + map-get($utilities, "order"), + ( + values: map-merge( + map-get(map-get($utilities, "order"), "values"), + ( + 6: 6, // Add a new `.order-{breakpoint}-6` utility + last: 7 // Change the `.order-{breakpoint}-last` utility to use the next number + ) + ), + ), + ), + ) +); +``` + +### Offsetting columns + +You can offset grid columns with our responsive `.offset-` grid classes. Grid classes are sized to match columns. + +#### Offset classes + +Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns. + +{{< example class="bd-example-row" >}} +
+
+
.col-md-4
+
.col-md-4 .offset-md-4
+
+
+
.col-md-3 .offset-md-3
+
.col-md-3 .offset-md-3
+
+
+
.col-md-6 .offset-md-3
+
+
+{{< /example >}} + +In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{< docsref "/examples/grid" >}}). + +{{< example class="bd-example-row" >}} +
+
+
.col-sm-5 .col-md-6
+
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
+
+
+
.col-sm-6 .col-md-5 .col-lg-6
+
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
+
+
+{{< /example >}} + + + +## Standalone column classes + +The `.col-*` classes can also be used outside a `.row` to give an element a specific width. Whenever column classes are used as non-direct children of a row, the paddings are omitted. + +{{< example class="bd-example-row" >}} +
+ .col-3: width of 25% +
+ +
+ .col-sm-9: width of 75% above sm breakpoint +
+{{< /example >}} + +The classes can be used together with utilities to create responsive floated images. Make sure to wrap the content in a [`.clearfix`]({{< docsref "/helpers/clearfix" >}}) wrapper to clear the float if the text is shorter. + +{{< example >}} +
+ {{< placeholder width="100%" height="210" class="col-md-6 float-md-end mb-3 ms-md-3" text="Responsive floated image" color="#999" >}} + +

+ A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image. +

+ +

+ As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read. +

+ +

+ And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here. +

+
+{{< /example >}} diff --git a/site/content/docs/0.0/layout/containers.md b/site/content/docs/0.0/layout/containers.md index 47bf183a31..4106368d2b 100644 --- a/site/content/docs/0.0/layout/containers.md +++ b/site/content/docs/0.0/layout/containers.md @@ -8,4 +8,157 @@ aliases: toc: true --- -{{< callout-soon "page" >}} +## How they work + +Containers are the most basic layout element in OUDS Web and are **required when using our default grid system**. Containers are used to contain, pad, and (sometimes) center the content within them. While containers *can* be nested, most layouts do not require a nested container. + +OUDS Web offers a single responsive container `.container-fluid`, which sets the `width: 100%` at all breakpoints. It should be associated to the class `.container-max-width`** (See [Fluid containers](#fluid-containers) for more information). + +The table below compares `.container-fluid` `max-width` with and without `.container-max-width` and across each breakpoint. + +See them in action and compare them in our [Grid example]({{< docsref "/examples/grid#containers" >}}) and [Grid system example]({{< docsref "/examples/grid-system" >}}). + +Please note that we apply an extra-padding on our containers (see [our mixin](#sass-mixins)). + +{{< bs-table "table" >}} +| | 2X-small
<390px
| X-small
≥390px
| Small
≥480px
| Medium
≥736px
| Large
≥1024px
| X-Large
≥1320px
| 2X-Large
≥1640px
| 3X-Large
≥1880px
| +| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | +| `.container-fluid` with `.container-max-width` | 100% -
(2 * 16px) | 100% -
(2 * 24px) | 100% -
(2 * 28px) | 100% -
(2 * 32px) | 100% -
(2 * 40px) | 100% -
(2 * 56px) | 1520px | 1520px | +| `.container-fluid` | 100% -
(2 * 16px) | 100% -
(2 * 24px) | 100% -
(2 * 28px) | 100% -
(2 * 32px) | 100% -
(2 * 40px) | 100% -
(2 * 56px) | 100% -
(2 * 80px) | 100% -
(2 * 112px) | +{{< /bs-table >}} + +{{< bootstrap-compatibility >}} + +{{< callout danger >}} +**These containers should not be used for Orange sites.** Instead, use the containers provided by OUDS Web: `.container-fluid` associated or not with `.container-max-width`. +{{< /callout >}} + +Bootstrap compatibility enables the use of three different containers: + +- `.container`, which sets a static `max-width` between each responsive breakpoint. +- `.container-{breakpoint}`, which follow the `.container-fluid` behavior until the specified breakpoint, then it follows the `.container` one. +- `.container-fluid`, which sets the `width: 100%` at all breakpoints. + +Moreover, Bootstrap compatibility includes the support for xxl breakpoint, defined like 2xl, making `.container-xxl` class available. + +The table below illustrates how each container's `max-width` compares to the original `.container` and `.container-fluid` across each breakpoint. + +Please note that we apply an extra-padding on our containers (see [our mixin](#sass-mixins)). + +{{< bs-table "table" >}} +| | 2X-small
<390px
| X-small
≥390px
| Small
≥480px
| Medium
≥736px
| Large
≥1024px
| X-Large
≥1320px
| 2X-Large
≥1640px
| 3X-Large
≥1880px
| +| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | +| `.container` | 100% -
(2 * 16px) | 342px | 424px | 672px | 944px | 1208px | 1480px | 1656px | +| `.container-xs` | 100% -
(2 * 16px) | 342px | 424px | 672px | 944px | 1208px | 1480px | 1656px | +| `.container-sm` | 100% -
(2 * 16px) | 100% -
(2 * 24px) | 424px | 672px | 944px | 1208px | 1480px | 1656px | +| `.container-md` | 100% -
(2 * 16px) | 100% -
(2 * 24px) | 100% -
(2 * 28px) | 672px | 944px | 1208px | 1480px | 1656px | +| `.container-lg` | 100% -
(2 * 16px) | 100% -
(2 * 24px) | 100% -
(2 * 28px) | 100% -
(2 * 32px) | 944px | 1208px | 1480px | 1656px | +| `.container-xl` | 100% -
(2 * 16px) | 100% -
(2 * 24px) | 100% -
(2 * 28px) | 100% -
(2 * 32px) | 100% -
(2 * 40px) | 1208px | 1480px | 1656px | +| `.container-2xl` | 100% -
(2 * 16px) | 100% -
(2 * 24px) | 100% -
(2 * 28px) | 100% -
(2 * 32px) | 100% -
(2 * 40px) | 100% -
(2 * 56px) | 1480px | 1656px | +| `.container-xxl` | 100% -
(2 * 16px) | 100% -
(2 * 24px) | 100% -
(2 * 28px) | 100% -
(2 * 32px) | 100% -
(2 * 40px) | 100% -
(2 * 56px) | 1480px | 1656px | +| `.container-3xl` | 100% -
(2 * 16px) | 100% -
(2 * 24px) | 100% -
(2 * 28px) | 100% -
(2 * 32px) | 100% -
(2 * 40px) | 100% -
(2 * 56px) | 100% -
(2 * 80px) | 1656px | +| `.container-fluid` | 100% -
(2 * 16px) | 100% -
(2 * 24px) | 100% -
(2 * 28px) | 100% -
(2 * 32px) | 100% -
(2 * 40px) | 100% -
(2 * 56px) | 100% -
(2 * 80px) | 100% -
(2 * 112px) | +{{< /bs-table >}} + +## Default container + +Our default `.container` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint. + +**This container should not be used for Orange sites.** + +```html +
+ +
+``` + +## Responsive containers + +Responsive containers allow you to specify a class that follows the `.container-fluid` behavior until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` behaves like the `.container-fluid` to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, `2xl`, `xxl` and `3xl`. + +```html +
100% wide until extra small breakpoint
+
100% wide until small breakpoint
+
100% wide until medium breakpoint
+
100% wide until large breakpoint
+
100% wide until extra large breakpoint
+
100% wide until extra extra large breakpoint
+
100% wide until extra extra large breakpoint
+
100% wide until extra extra extra large breakpoint
+``` + +{{< /bootstrap-compatibility >}} + +## Fluid containers + +Use `.container-fluid` for a full width container with minimum margins, spanning almost the entire width of the viewport. + +```html +
+ ... +
+``` + +### Default max width + +This container should be associated by default with the class `.container-max-width`. After breakpoint `2xl`, this class: +- limits the container width to 1680px (including margins), +- limits container margin to 80px each side, +- limits gutters width to 32px. + +It is defined as follows: + +{{< scss-docs name="containers-max" file="scss/_containers.scss" >}} + +Comparison between `.container-fluid` with `.container-max-width` and `.container-fluid` alone can be seen in the following table: + +{{< bs-table "table" >}} +| | X-Large
≥1320px
| 2X-Large
≥1640px
| 3X-Large
≥1880px
| +| --- | --- | --- | --- | --- | +| `.container-fluid`
with `.container-max-width` | | | | +| `.container-fluid` | | | | +{{< /bs-table >}} + +### Custom max width + +If needed, in specific cases, you can set a custom maximum width for the fluid container by overloading `$ouds-grid-max-width` before importing our OUDS scss files. + +This will affect all containers that have `.container-max-width` and will make sure that your layout does not exceed this value. +When going up the breakpoint above `$ouds-grid-max-width` value, the container margins and gutter values are kept as they are. + +```scss +@import "../node_modules/ouds-web/scss/functions"; + +$ouds-grid-max-width: 3500px; // Custom container max width + +@import "../node_modules/ouds-web/tokens/raw"; +@import "../node_modules/ouds-web/tokens/semantic"; +@import "../node_modules/ouds-web/tokens/component"; +@import "../node_modules/ouds-web/ouds-maps"; +@import "../node_modules/ouds-web/variables"; +@import "../node_modules/ouds-web/variables-dark"; +// etc +``` + +## CSS + +### Sass variables + +As shown above, OUDS Web generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in `_variables.scss`) that powers them: + +{{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}} + +For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#css" >}}). + +### Sass mixins + +In addition to customizing the Sass, you can also create your own containers with our Sass mixin. + +{{< scss-docs name="container-mixins" file="scss/mixins/_container.scss" >}} + +```scss +// Usage +.custom-container { + @include make-container(); +} +``` diff --git a/site/content/docs/0.0/layout/css-grid.md b/site/content/docs/0.0/layout/css-grid.md index eb46e9ffc6..650e9c6ca5 100644 --- a/site/content/docs/0.0/layout/css-grid.md +++ b/site/content/docs/0.0/layout/css-grid.md @@ -46,7 +46,7 @@ Compared to the default grid system: ### Three columns -Three equal-width columns across all viewports and devices can be created by using the `.g-col-4` classes. +Three equal-width columns across all viewports and devices can be created by using the `.g-col-4` classes. Add [responsive classes](#responsive) to change the layout by viewport size. {{< example class="bd-example-cssgrid" >}}
@@ -56,7 +56,7 @@ Three equal-width columns across all viewports and devices can be created by usi
{{< /example >}} - +{{< /example >}} ## Wrapping diff --git a/site/content/docs/0.0/layout/grid.md b/site/content/docs/0.0/layout/grid.md index a415d48b9b..db27647089 100644 --- a/site/content/docs/0.0/layout/grid.md +++ b/site/content/docs/0.0/layout/grid.md @@ -1,11 +1,632 @@ --- layout: docs title: Grid system -description: Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes. +description: Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, eight default responsive tiers, Sass variables and mixins, and dozens of predefined classes. group: layout aliases: - "/docs/layout/grid/" toc: true --- -{{< callout-soon "page" >}} +## Example + +OUDS Web's grid system uses a series of containers, rows, and columns to layout and align content. It's built with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together. + +{{< callout info >}} +**New to or unfamiliar with flexbox?** [Read this CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets. +{{< /callout >}} + +{{< example class="bd-example-row" >}} +
+
+
+ Column +
+
+ Column +
+
+ Column +
+
+
+{{< /example >}} + +The above example creates three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent `.container`. + +## How it works + +Breaking it down, here's how the grid system comes together: + +- **Our grid supports [eight responsive breakpoints]({{< docsref "/layout/breakpoints" >}}).** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `.col-sm-4` applies to `sm`, `md`, `lg`, `xl`, `2xl` and `3xl`). This means you can control container and column sizing and behavior by each breakpoint. + +- **Containers center and horizontally pad your content.** Use `.container` for a responsive pixel width, `.container-fluid` for `width: 100%` across all viewports and devices, or a responsive container (e.g., `.container-md`) for a combination of fluid and pixel widths. + +- **Rows are wrappers for columns.** Each column has horizontal `padding` (called a gutter) for controlling the space between them. This `padding` is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to [uniformly apply column sizing](#row-columns) and [gutter classes]({{< docsref "/layout/gutters" >}}) to change the spacing of your content. + +- **Columns are incredibly flexible.** There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., `col-4` spans four). `width`s are set in percentages so you always have the same relative sizing. + +- **Gutters are also responsive and customizable.** [Gutter classes are available]({{< docsref "/layout/gutters" >}}) across all breakpoints, with all the same sizes as our [margin and padding spacing]({{< docsref "/utilities/spacing" >}}). Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-none` is also available to remove gutters. + +- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in OUDS Web, you can use our [grid's source Sass](#sass-variables) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you. + +Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9). + +## Grid options + +OUDS Web's grid system can adapt across all eight default breakpoints, and any breakpoints you customize. The eight default grid tiers are as follows: + +- Extra extra small (2xs) +- Extra small (xs) +- Small (sm) +- Medium (md) +- Large (lg) +- Extra large (xl) +- Extra extra large (2xl) +- Extra extra extra large (3xl) + +As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints: + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 2xs
+ <390px + 		+ xs
+ ≥390px + 		+ sm
+ ≥480px + 		+ md
+ ≥736px + 		+ lg
+ ≥1024px + 		+ xl
+ ≥1320px + 		+ 2xl
+ ≥1640px + 		+ 3xl
+ ≥1880px +
Container max-width100vw -
(2 * 16px)		342px424px672px944px1208px1480px1656px
Class prefix.col-.col-xs-.col-sm-.col-md-.col-lg-.col-xl-.col-2xl-.col-3xl-
# of columns12
Container padding width16px (each side)24px (each side)28px (each side)32px (each side)40px (each side)56px (each side)80px (each side)112px (each side)
Gutter width8px (4px on left and right)16px (8px on left and right)24px (12px on left and right)32px (16px on left and right)40px (20px on left and right)
Custom gutters}}">Yes
NestableYes
Column ordering}}">Yes
+
+ +{{< bootstrap-compatibility >}} + +Includes support for xxl breakpoint, defined like 2xl. + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ xxl
+ ≥1640px +
Container max-width1480px
Class prefix.col-xxl-
# of columns12
Container padding width80px (each side)
Gutter width32px (16px on left and right)
Custom gutters}}">Yes
NestableYes
Column ordering}}">Yes
+
+{{< /bootstrap-compatibility >}} + +## Auto-layout columns + +Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like `.col-sm-6`. + +### Equal-width + +For example, here are two grid layouts that apply to every device and viewport, from `2xs` to `3xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width. + +{{< example class="bd-example-row" >}} +
+
+
+ 1 of 2 +
+
+ 2 of 2 +
+
+
+
+ 1 of 3 +
+
+ 2 of 3 +
+
+ 3 of 3 +
+
+
+{{< /example >}} + +### Setting one column width + +Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column. + +{{< example class="bd-example-row" >}} +
+
+
+ 1 of 3 +
+
+ 2 of 3 (wider) +
+
+ 3 of 3 +
+
+
+
+ 1 of 3 +
+
+ 2 of 3 (wider) +
+
+ 3 of 3 +
+
+
+{{< /example >}} + +### Variable width content + +Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content. + +{{< example class="bd-example-row" >}} +
+
+
+ 1 of 3 +
+
+ Variable width content +
+
+ 3 of 3 +
+
+
+
+ 1 of 3 +
+
+ Variable width content +
+
+ 3 of 3 +
+
+
+{{< /example >}} + +## Responsive classes + +OUDS Web's grid includes eight tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on any width from extra extra small to extra extra extra large devices however you see fit. + +### All breakpoints + +For grids that are the same from the smallest of devices to the largest, use the `.col` and `.col-*` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `.col`. + +{{< example class="bd-example-row" >}} +
+
+
col
+
col
+
col
+
col
+
+
+
col-8
+
col-4
+
+
+{{< /example >}} + +### Stacked to horizontal + +Using a single set of `.col-sm-*` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`). + +{{< example class="bd-example-row" >}} +
+
+
col-sm-8
+
col-sm-4
+
+
+
col-sm
+
col-sm
+
col-sm
+
+
+{{< /example >}} + +### Mix and match + +Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works. + +{{< example class="bd-example-row" >}} +
+ +
+
.col-md-8
+
.col-6 .col-md-4
+
+ + +
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
+ + +
+
.col-6
+
.col-6
+
+
+{{< /example >}} + +### Row columns + +Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a shortcut. With `.row-cols-auto` you can give the columns their natural width. + +Use these row columns classes to quickly create basic grid layouts or to control your card layouts. + +{{< example class="bd-example-row" >}} +
+
+
Column
+
Column
+
Column
+
Column
+
+
+{{< /example >}} + +{{< example class="bd-example-row" >}} +
+
+
Column
+
Column
+
Column
+
Column
+
+
+{{< /example >}} + +{{< example class="bd-example-row" >}} +
+
+
Column
+
Column
+
Column
+
Column
+
+
+{{< /example >}} + +{{< example class="bd-example-row" >}} +
+
+
Column
+
Column
+
Column
+
Column
+
+
+{{< /example >}} + +{{< example class="bd-example-row" >}} +
+
+
Column
+
Column
+
Column
+
Column
+
+
+{{< /example >}} + +{{< example class="bd-example-row" >}} +
+
+
Column
+
Column
+
Column
+
Column
+
+
+{{< /example >}} + +You can also use the accompanying Sass mixin, `row-cols()`: + +```scss +.element { + // Three columns to start + @include row-cols(3); + + // Five columns from medium breakpoint up + @include media-breakpoint-up(md) { + @include row-cols(5); + } +} +``` + +## Nesting + +To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns). + +{{< example class="bd-example-row" >}} +
+
+
+ Level 1: .col-sm-3 +
+
+
+
+ Level 2: .col-8 .col-sm-6 +
+
+ Level 2: .col-4 .col-sm-6 +
+
+
+
+
+{{< /example >}} + +## CSS + +When using OUDS Web's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts. + +### Sass variables + +Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below. + +```scss +$grid-columns: 12; +$grid-gutter-width: 1.25rem; +$grid-row-columns: 6; +``` + +Note that OUDS Web does not use a single value for grid gutters through `$grid-gutter-width` but a map of values called `$grid-gutter-widths`. It defines different gutter widths for each breakpoint. + +{{< scss-docs name="grid-gutters" file="scss/_maps.scss" >}} + +{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}} + +{{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}} + +### Sass mixins + +Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns. + +```scss +// Creates a wrapper for a series of columns +@include make-row(); + +// Make the element grid-ready (applying everything but the width) +@include make-col-ready(); + +// Without optional size values, the mixin will create equal columns (similar to using .col) +@include make-col(); +@include make-col($size, $columns: $grid-columns); + +// Offset with margins +@include make-col-offset($size, $columns: $grid-columns); +``` + +### Example usage + +You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between. + +```scss +.example-container { + @include make-container(); + // Make sure to define this width after the mixin to override + // `width: 100%` generated by `make-container()` + width: 800px; +} + +.example-row { + @include make-row(); +} + +.example-content-main { + @include make-col-ready(); + + @include media-breakpoint-up(sm) { + @include make-col(6); + } + @include media-breakpoint-up(lg) { + @include make-col(8); + } +} + +.example-content-secondary { + @include make-col-ready(); + + @include media-breakpoint-up(sm) { + @include make-col(6); + } + @include media-breakpoint-up(lg) { + @include make-col(4); + } +} +``` + +{{< example >}} +
+
+
Main content
+
Secondary content
+
+
+{{< /example >}} + +## Customizing the grid + +Using our built-in grid Sass variables and maps, it's possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile. + +### Columns and gutters + +The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column. `$grid-row-columns` is used to set the maximum number of columns of `.row-cols-*`, any number over this limit is ignored. + +```scss +$grid-columns: 12 !default; +$grid-gutter-width: 1.25rem !default; +$grid-row-columns: 6 !default; +``` + +### Grid tiers + +Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this: + +```scss +$grid-breakpoints: ( + xs: 0, + sm: 480px, + md: 768px, + lg: 1024px +); + +$container-max-widths: ( + sm: 420px, + md: 720px, + lg: 960px +); + +$grid-gutter-widths: ( + xs: 4px, + sm: 8px, + md: 16px, + lg: 32px +); + +$container-fluid-margin: ( + xs: 20px, + sm: 30px, + md: 24px, + lg: 32px +); +``` + +When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will output a brand-new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in `px` (not `rem`, `em`, or `%`). diff --git a/site/content/docs/0.0/layout/utilities.md b/site/content/docs/0.0/layout/utilities.md index 6cf0cf8e13..8d867181a0 100644 --- a/site/content/docs/0.0/layout/utilities.md +++ b/site/content/docs/0.0/layout/utilities.md @@ -8,4 +8,20 @@ aliases: toc: true --- -{{< callout-soon "page" >}} +## Changing `display` + +Use our [display utilities]({{< docsref "/utilities/display" >}}) for responsively toggling common values of the `display` property. Mix it with our grid system, content, or components to show or hide them across specific viewports. + +## Flexbox options + +OUDS Web is built with flexbox, but not every element's `display` has been changed to `display: flex` as this would add many unnecessary overrides and unexpectedly change key browser behaviors. + +Should you need to add `display: flex` to an element, do so with `.d-flex` or one of the responsive variants (e.g., `.d-sm-flex`). You'll need this class or `display` value to allow the use of our extra [flexbox utilities]({{< docsref "/utilities/flex" >}}) for sizing, alignment, spacing, and more. + + + +## Toggle `visibility` + +When toggling `display` isn't needed, you can toggle the `visibility` of an element with our [visibility utilities]({{< docsref "/utilities/visibility" >}}). Invisible elements will still affect the layout of the page, but are visually hidden from visitors. diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md index 8a09ae669a..9a967dc48d 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -53,19 +53,42 @@ Technically, it means that you can get rid of the following things: - Warning `form-star-rating()` mixin has been removed as it was deprecated in Boosted v5.3.2. +## Layout + +- Breaking Responsive breakpoints have changed: + - `xxl` has been renamed `2xl`. + - `2xs` and `3xl` have been added. + - The breakpoints values have changed. Please refer to the [breakpoints' documentation]({{< docsref "/layout/breakpoints/" >}}). + - `.col-{breakpoint}-{number}`, `.g-col-{}` + - The default container to use is now `.container-fluid` associated to `.max-width-public-website` or `.max-width-specific-tools` instead of `.container-xxl`. Please refer to the [fluid containers' documentation]({{< docsref "/layout/containers/#fluid-containers" >}}). + - Default gutter inside grid have been changed to have a fully responsive behavior. It should be a transparent change for you. + - All gutter utilities have been changed. `.g{-breakpoint}-{value}`, `.gx{-breakpoint}-{value}` and `.gy{-breakpoint}-{value}` which value is inside `0|1|2|3|4|5`. Gutter utilities values now use `none|smash|shortest|shorter|short|medium|tall|taller|tallest|spacious|huge|jumbo`. Proportional equivalence between `0` → `none`, `1` → `shortest`, `2` → `shorter`, `3` → `medium`, `4` → `tall`, `5` → `spacious`. + + All responsive classes, helpers and utilities have been changed accordingly to the new breakpoints. + +- Info `.container` and `.container-{breakpoint}` classes can still be available when $enable-bootstrap-compatibility is on. +- Info `xxl` breakpoint and thus all related classes (like `.container-xxl`, `.col-xxl-*`) can still be available when $enable-bootstrap-compatibility is on. + +## Helpers + +### Position + +- Breaking Responsive sticky helpers `.sticky-xxl-{top|bottom}` have been removed and replaced by their equivalent `.sticky-2xl-{top|bottom}`. +- New Responsive sticky helpers: `.sticky-xs-{top|bottom}`, `.sticky-2xl-{top|bottom}` and `.sticky-3xl-{top|bottom}`. + ## Utilities ### Border -- Breaking Border operative utilities have been removed: `.border-0`, `.border-top-0`, `.border-bottom-0`, `.border-start-0`, and `.border-end-0`. Please check the new [border values]({{< docsref "/utilities/borders#border" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. +- Breaking Border operative utilities have been removed: `.border-0`, `.border-top-0`, `.border-bottom-0`, `.border-start-0`, and `.border-end-0`. Please check the new [border values]({{< docsref "/utilities/borders#border" >}}) directly in the documentation and adapt your websites to them. - New Border operative utilities: `.border-none`, `.border-top-none`, `.border-bottom-none`, `.border-start-none`, and `.border-end-none`. -- Breaking Border width utilities have been removed: `.border-0`, `.border-1`, `.border-2`, `.border-3`, `.border-4` and `.border-5`. Please check the new [border values]({{< docsref "/utilities/borders#width" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. +- Breaking Border width utilities have been removed: `.border-0`, `.border-1`, `.border-2`, `.border-3`, `.border-4` and `.border-5`. Please check the new [border values]({{< docsref "/utilities/borders#width" >}}) directly in the documentation and adapt your websites to them. - New Border width utilities: `.border-none`, `.border-thin`, `.border-medium`, `.border-thick`, and `.border-thicker`. -- Breaking Border radius utilities with many sizes have been removed. Please check the new [border values]({{< docsref "/utilities/borders#radius" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: +- Breaking Border radius utilities with many sizes have been removed. Please check the new [border values]({{< docsref "/utilities/borders#radius" >}}) directly in the documentation and adapt your websites to them. Removed utilities are: - 0: `.rounded-0`, `.rounded-top-0`, `.rounded-bottom-0`, `.rounded-start-0` and `.rounded-end-0`. - 1: `.rounded-1`, `.rounded-top-1`, `.rounded-bottom-1`, `.rounded-start-1` and `.rounded-end-1`. - 2: `.rounded-2`, `.rounded-top-2`, `.rounded-bottom-2`, `.rounded-start-2` and `.rounded-end-2`. @@ -81,16 +104,48 @@ Technically, it means that you can get rid of the following things: - New Border style utilities: `.border-drag`. +- Info `.border-{|top|bottom|start|end}-0`, `.border-{0|1|2|3|4|5}` and `.rounded-{|top|bottom|start|end}-{0|1|2|3|4|5}` utilities can still be available when $enable-bootstrap-compatibility is on. + +#### Display + +- Breaking `.d-xxl-{value}` responsive display utilities have been replaced by `.d-2xl-{value}` utilities. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). +- New `.d-xs-{value}` and `.d-3xl-{value}` responsive display utilities have been added. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). +- Info `.d-xxl-{value}` responsive display utilities can still be available when $enable-bootstrap-compatibility is on. + +#### Flex + +- Breaking `xxl` responsive flex utilities have been replaced by `2xl` utilities: `.d-xxl-flex`, `.d-xxl-inline-flex`, `.flex-xxl-{row|column}`, `.flex-xxl-{row|column}-reverse`, `.justify-content-xxl-{start|end|center|between|around|evenly}`, `.align-items-xxl-{start|end|center|baseline|stretch}`, `.align-self-xxl-{start|end|center|baseline|stretch}`, `.flex-xxl-fill`, `flex-xxl-{grow|shrink}-{0|1}`, `.flex-xxl-{nowrap|wrap|wrap-reverse}`, `.order-xxl-{number}`, `.order-xxl-{first|last}` and `.align-content-xxl-{start|end|center|between|around|stretch}` utilities have been replaced by `.d-2xl-flex`, `.d-2xl-inline-flex`, `.flex-2xl-{row|column}`, `.flex-2xl-{row|column}-reverse`, `.justify-content-2xl-{start|end|center|between|around|evenly}`, `.align-items-2xl-{start|end|center|baseline|stretch}`, `.align-self-2xl-{start|end|center|baseline|stretch}`, `.flex-2xl-fill`, `flex-2xl-{grow|shrink}-{0|1}`, `.flex-2xl-{nowrap|wrap|wrap-reverse}`, `.order-2xl-{number}`, `.order-2xl-{first|last}` and `.align-content-2xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). +- New `xs` and `3xl` responsive flex utilities have been added: `.d-xs-flex`, `.d-xs-inline-flex`, `.flex-xs-{row|column}`, `.flex-xs-{row|column}-reverse`, `.justify-content-xs-{start|end|center|between|around|evenly}`, `.align-items-xs-{start|end|center|baseline|stretch}`, `.align-self-xs-{start|end|center|baseline|stretch}`, `.flex-xs-fill`, `flex-xs-{grow|shrink}-{0|1}`, `.flex-xs-{nowrap|wrap|wrap-reverse}`, `.order-xs-{number}`, `.order-xs-{first|last}`, `.align-content-xs-{start|end|center|between|around|stretch}`, `.d-3xl-flex`, `.d-3xl-inline-flex`, `.flex-3xl-{row|column}`, `.flex-3xl-{row|column}-reverse`, `.justify-content-3xl-{start|end|center|between|around|evenly}`, `.align-items-3xl-{start|end|center|baseline|stretch}`, `.align-self-3xl-{start|end|center|baseline|stretch}`, `.flex-3xl-fill`, `flex-3xl-{grow|shrink}-{0|1}`, `.flex-3xl-{nowrap|wrap|wrap-reverse}`, `.order-3xl-{number}`, `.order-3xl-{first|last}` and `.align-content-3xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). +- Info `xxl` responsive flex utilities can still be available when $enable-bootstrap-compatibility is on. + +#### Float + +- Breaking `xxl` responsive float utilities have been replaced by `2xl` utilities: `.float-xxl-{start|end|none}` utilities have been replaced by `.float-2xl-{start|end|none}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). +- New `xs` and `3xl` responsive float utilities have been added: `.float-xs-{start|end|none}` and `.float-3xl-{start|end|none}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). +- Info `xxl` responsive float utilities can still be available when $enable-bootstrap-compatibility is on. + +#### Object fit + +- Breaking `xxl` responsive object fit utilities have been replaced by `2xl` utilities: `.object-fit-xxl-{contain|cover|fill|scale|none}` utilities have been replaced by ``.object-fit-2xl-{contain|cover|fill|scale|none}``. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). +- New `xs` and `3xl` responsive object fit utilities have been added: `.object-fit-xs-{contain|cover|fill|scale|none}` and `.object-fit-3xl-{contain|cover|fill|scale|none}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). +- Info `xxl` responsive object fit utilities can still be available when $enable-bootstrap-compatibility is on. + ### Opacity -- Breaking `.opacity-0`, `.opacity-25`, `.opacity-50`, `.opacity-75` and `.opacity-100` have been removed from the default build. Please check the new [opacity values]({{< docsref "/utilities/opacity" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. +- Breaking `.opacity-0`, `.opacity-25`, `.opacity-50`, `.opacity-75` and `.opacity-100` have been removed from the default build. Please check the new [opacity values]({{< docsref "/utilities/opacity" >}}) directly in the documentation and adapt your websites to them. - New Opacity utilities: `.opacity-transparent`, `.opacity-weaker`, `.opacity-weak`, `.opacity-medium`, `.opacity-strong` and `.opacity-opaque`. +- Info `.opacity-{0|25|50|75|100}` utilities can still be available when $enable-bootstrap-compatibility is on. ### Shadow -- Breaking `.shadow`, `.shadow-sm` and `.shadow-lg` have been removed from the default build. Please check the new [shadows values]({{< docsref "/utilities/shadows" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. +- Breaking `.shadow`, `.shadow-sm` and `.shadow-lg` have been removed from the default build. Please check the new [shadows values]({{< docsref "/utilities/shadows" >}}) directly in the documentation and adapt your websites to them. - New Shadows utilities: `shadow-none`, `shadow-raised`, `shadow-drag`, `shadow-overlay-default`, `shadow-overlay-emphasized`, `shadow-sticky-default`, `shadow-sticky-emphasized` and `shadow-sticky-navigation-scrolled`. +- Info `.shadow-{|sm|lg}` utilities can still be available when $enable-bootstrap-compatibility is on. + +## Examples + +- New New OUDS Web [example for the usable grids]({{< docsref "/examples/grid-system" >}}). ## CSS and Sass variables @@ -199,6 +254,53 @@ Technically, it means that you can get rid of the following things:
  • $ouds-elevation-y-sticky-default
  • $ouds-elevation-y-sticky-emphasized
  • $ouds-elevation-y-sticky-navigation-scrolled
    • +
  • $ouds-grid-2xl-column-gap
    • +
  • $ouds-grid-2xl-margin
    • +
  • $ouds-grid-2xl-min-width
    • +
  • $ouds-grid-2xs-column-gap
    • +
  • $ouds-grid-2xs-margin
    • +
  • $ouds-grid-3xl-column-gap
    • +
  • $ouds-grid-3xl-margin
    • +
  • $ouds-grid-3xl-max-width
    • +
  • $ouds-grid-3xl-min-width
    • +
  • $ouds-grid-column-gap-100
    • +
  • $ouds-grid-column-gap-200
    • +
  • $ouds-grid-column-gap-400
    • +
  • $ouds-grid-column-gap-600
    • +
  • $ouds-grid-column-gap-800
    • +
  • $ouds-grid-margin-100
    • +
  • $ouds-grid-margin-1100
    • +
  • $ouds-grid-margin-1700
    • +
  • $ouds-grid-margin-2500
    • +
  • $ouds-grid-margin-300
    • +
  • $ouds-grid-margin-400
    • +
  • $ouds-grid-margin-500
    • +
  • $ouds-grid-margin-700
    • +
  • $ouds-grid-max-width-650
    • +
  • $ouds-grid-max-width-800
    • +
  • $ouds-grid-md-column-gap
    • +
  • $ouds-grid-md-margin
    • +
  • $ouds-grid-md-min-width
    • +
  • $ouds-grid-min-width-200
    • +
  • $ouds-grid-min-width-300
    • +
  • $ouds-grid-min-width-400
    • +
  • $ouds-grid-min-width-500
    • +
  • $ouds-grid-min-width-600
    • +
  • $ouds-grid-min-width-700
    • +
  • $ouds-grid-min-width-800
    • +
  • $ouds-grid-lg-column-gap
    • +
  • $ouds-grid-lg-margin
    • +
  • $ouds-grid-lg-min-width
    • +
  • $ouds-grid-sm-column-gap
    • +
  • $ouds-grid-sm-margin
    • +
  • $ouds-grid-sm-min-width
    • +
  • $ouds-grid-xl-column-gap
    • +
  • $ouds-grid-xl-margin
    • +
  • $ouds-grid-xl-min-width
    • +
  • $ouds-grid-xs-column-gap
    • +
  • $ouds-grid-xs-margin
    • +
  • $ouds-grid-xs-min-width
    • +
  • $ouds-grid-max-width
  • $ouds-opacity-0
  • $ouds-opacity-100
  • $ouds-opacity-300
    • @@ -217,6 +319,8 @@ Technically, it means that you can get rid of the following things: -
    New Sass maps:
    +-
    + New CSS variable: + +
    + -
    Warning Dropped deprecated Sass variables:
    @@ -321,3 +432,5 @@ Technically, it means that you can get rid of the following things:
  • shadow
    • + +- Warning OUDS Web changes the signature of `make-row($gutter, $gutter-sm)` to have `make-row($gutter)`. diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md index cb0e7f3558..e3fe8a3036 100644 --- a/site/content/docs/0.0/migration.md +++ b/site/content/docs/0.0/migration.md @@ -11,6 +11,22 @@ toc: true ## v0.0.4 +### Layout + +- New Responsive flexbox grid system is now available with eight default responsive tiers defined at breakpoints `2xs`, `xs`, `sm`, `md`, `xl`, `2xl` and `3xl`. + - Container class: `.container-fluid` + - Limiting class: `.container-max-width` + - Row columns classes: `.row-cols-{number}` + - Column classes: `.col-{number}`, `.col-{breakpoint}-{number}`, and `.offset-{breakpoint}-{number}` + +- New Responsive css-grid classes: `.g-col-{breakpoint}-{number}`. + +### Helpers + +#### Position + +- New Responsive sticky helpers: `.sticky-{breakpoint}-top` and `.sticky-{breakpoint}-bottom` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`. + ### Utilities #### Border @@ -30,6 +46,23 @@ toc: true - New Border style utilities: `.border-drag`. +#### Display + +- New Responsive display utilities: `.d-{breakpoint}-{value}` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`. + +#### Flex + +- New Responsive flex utilities where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`: + `.d-{breakpoint}-flex`, `.d-{breakpoint}-inline-flex`, `.flex-{breakpoint}-{row|column}`, `.flex-{breakpoint}-{row|column}-reverse`, `.justify-content-{breakpoint}-{start|end|center|between|around|evenly}`, `.align-items-{breakpoint}-{start|end|center|baseline|stretch}`, `.align-self-{breakpoint}-{start|end|center|baseline|stretch}`, `.flex-{breakpoint}-fill`, `flex-{breakpoint}-{grow|shrink}-{0|1}`, `.flex-{breakpoint}-{nowrap|wrap|wrap-reverse}`, `.order-{breakpoint}-{number}`, `.order-{breakpoint}-{first|last}` and `.align-content-{breakpoint}-{start|end|center|between|around|stretch}`. + +#### Float + +- New Responsive float utilities: `.float-{breakpoint}-{start|end|none}` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`. + +#### Object fit + +- New Responsive object fit utilities: `.object-fit-{breakpoint}-{contain|cover|fill|scale|none}` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`. + #### Opacity - Breaking Opacity utilities: `.opacity-emphasis` has been renamed to `.opacity-strong`. @@ -39,9 +72,15 @@ toc: true - New Shadows utilities: `shadow-none`, `shadow-raised`, `shadow-drag`, `shadow-overlay-default`, `shadow-overlay-emphasized`, `shadow-sticky-default`, `shadow-sticky-emphasized` and `shadow-sticky-navigation-scrolled`. +### Examples + +- New New OUDS Web [example for the grids]({{< docsref "/examples/grid" >}}). + +- New New OUDS Web [example for the usable grids]({{< docsref "/examples/grid-system" >}}). + ### CSS and Sass variables -- New A new file containing maps of token for utilities has been added. If you were using the Sass compilation, you must import the new Sass files before the variables. +- New A new file containing maps of token for utilities has been added. If you were using the Sass compilation, you must import this new Sass file before the variables.
    See the new import stack @@ -138,6 +177,53 @@ toc: true
  • $ouds-elevation-y-sticky-default
  • $ouds-elevation-y-sticky-emphasized
  • $ouds-elevation-y-sticky-navigation-scrolled
    • +
  • $ouds-grid-2xl-column-gap
    • +
  • $ouds-grid-2xl-margin
    • +
  • $ouds-grid-2xl-min-width
    • +
  • $ouds-grid-2xs-column-gap
    • +
  • $ouds-grid-2xs-margin
    • +
  • $ouds-grid-3xl-column-gap
    • +
  • $ouds-grid-3xl-margin
    • +
  • $ouds-grid-3xl-max-width
    • +
  • $ouds-grid-3xl-min-width
    • +
  • $ouds-grid-column-gap-100
    • +
  • $ouds-grid-column-gap-200
    • +
  • $ouds-grid-column-gap-400
    • +
  • $ouds-grid-column-gap-600
    • +
  • $ouds-grid-column-gap-800
    • +
  • $ouds-grid-margin-100
    • +
  • $ouds-grid-margin-1100
    • +
  • $ouds-grid-margin-1700
    • +
  • $ouds-grid-margin-2500
    • +
  • $ouds-grid-margin-300
    • +
  • $ouds-grid-margin-400
    • +
  • $ouds-grid-margin-500
    • +
  • $ouds-grid-margin-700
    • +
  • $ouds-grid-max-width-650
    • +
  • $ouds-grid-max-width-800
    • +
  • $ouds-grid-md-column-gap
    • +
  • $ouds-grid-md-margin
    • +
  • $ouds-grid-md-min-width
    • +
  • $ouds-grid-min-width-200
    • +
  • $ouds-grid-min-width-300
    • +
  • $ouds-grid-min-width-400
    • +
  • $ouds-grid-min-width-500
    • +
  • $ouds-grid-min-width-600
    • +
  • $ouds-grid-min-width-700
    • +
  • $ouds-grid-min-width-800
    • +
  • $ouds-grid-lg-column-gap
    • +
  • $ouds-grid-lg-margin
    • +
  • $ouds-grid-lg-min-width
    • +
  • $ouds-grid-sm-column-gap
    • +
  • $ouds-grid-sm-margin
    • +
  • $ouds-grid-sm-min-width
    • +
  • $ouds-grid-xl-column-gap
    • +
  • $ouds-grid-xl-margin
    • +
  • $ouds-grid-xl-min-width
    • +
  • $ouds-grid-xs-column-gap
    • +
  • $ouds-grid-xs-margin
    • +
  • $ouds-grid-xs-min-width
    • +
  • $ouds-grid-max-width
  • $ouds-opacity-medium
  • $ouds-opacity-opaque
  • $ouds-opacity-strong
    • @@ -150,6 +236,8 @@ toc: true -
    New Sass maps:
    +-
    + New CSS variable: + +
    + ## v0.0.3 ### Pre-compiled versions @@ -271,6 +366,13 @@ From now on, by default, OUDS Web won't embed Bootstrap elements (like helpers,
    +-
    + New CSS variable: + +
    + -
    Breaking keys in $utilities map only available when $enable-bootstrap-compatibility is on: