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/js/tests/integration/index.html b/js/tests/integration/index.html index 3f2c2198ed..b5dccb6af5 100644 --- a/js/tests/integration/index.html +++ b/js/tests/integration/index.html @@ -11,7 +11,7 @@ Hello, world! -
+

Hello, world!

diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js index 156005588d..568d7509e4 100644 --- a/js/tests/unit/dropdown.spec.js +++ b/js/tests/unit/dropdown.spec.js @@ -2408,7 +2408,7 @@ describe('Dropdown', () => { it('should open the dropdown when clicking the child element inside `data-bs-toggle="dropdown"`', () => { return new Promise(resolve => { fixtureEl.innerHTML = [ - '
', + '
', '
', ' ', '
', diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js index fc44471c42..0960f974ab 100644 --- a/js/tests/unit/scrollspy.spec.js +++ b/js/tests/unit/scrollspy.spec.js @@ -222,7 +222,7 @@ describe('ScrollSpy', () => { '
', '
', '
', - '
', + '
', '
    ', '
  • Overview
    • ', '
  • Detail
    • ', @@ -300,7 +300,7 @@ describe('ScrollSpy', () => { '
    ', '
    ', '
    ', - '
    ', + '
    ', '
      ', '
    • Overview
      • ', '
    • Detail
      • ', diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html index f2a39ad231..ead99e01a5 100644 --- a/js/tests/visual/alert.html +++ b/js/tests/visual/alert.html @@ -7,7 +7,7 @@ Alert -
      +

      Alert Bootstrap Visual Test

    -
    +

    @fat

    Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

    Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

    diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html index b9a5389290..a3acee0cf6 100644 --- a/js/tests/visual/tab.html +++ b/js/tests/visual/tab.html @@ -12,7 +12,7 @@ -
    +

    Tab Bootstrap Visual Test

    Tabs without fade

    diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html index a3f086627b..ec5201d23c 100644 --- a/js/tests/visual/toast.html +++ b/js/tests/visual/toast.html @@ -14,7 +14,7 @@ -
    +

    Toast Bootstrap Visual Test

    diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index 2866f319a1..4e759d54e8 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -17,7 +17,7 @@ -
    +

    Tooltip OUDS Web Visual Test

    Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

    diff --git a/package.json b/package.json index 3252ac6feb..0ed06259ce 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"", "css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*", "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache", - "css-lint-vars": "fusv scss/ site/assets/scss/ --ignoreFiles '**/tokens/*.scss'", + "css-lint-vars": "fusv scss/ site/assets/scss/ --ignoreFiles **/tokens/_component.scss,**/tokens/_raw.scss,**/tokens/_semantic.scss", "css-minify": "npm-run-all --aggregate-output --parallel css-minify-*", "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"", "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"", diff --git a/scss/_containers.scss b/scss/_containers.scss index d4ed2ca60c..0ef7087b43 100644 --- a/scss/_containers.scss +++ b/scss/_containers.scss @@ -3,45 +3,70 @@ // 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, + // OUDS mod: `.container` selector is conditionally handle whenever `$enable-bootstrap-compatibility` is true // 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 { + // OUDS mod: link 2xl breakpoint to xxl + @if $breakpoint == 2xl { + .container-xxl { + @extend .container-fluid; + } } + // End mod - // 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; + } } } } } } + + // OUDS mod + // 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-size-max-width-grid-grid; + + .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..358389d28e 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -548,17 +548,29 @@ $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 +// This adjustment ensures the map is in the correct ascending order for the checks that follow. +// Note: This requires `$enable-bootstrap-compatibility` to be set before importing this file. +@if $enable-bootstrap-compatibility { + $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 +581,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 +612,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..4ea3809ff8 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: 1320px, 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: 1320px, 2xl: 1640px, 3xl: 1880px)) // md -// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl)) +// >> breakpoint-next(sm, $breakpoint-names: (2xs xs 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: 1320px, 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: 1320px, 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: 1320px, 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: 1320px, 2xl: 1640px, 3xl: 1880px)) // "-sm" @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); @@ -125,3 +125,16 @@ } } } + +// OUDS mod +// Get the breakpoint infix corresponding to a given width +@function get-breakpoint-from-width($width: $ouds-size-max-width-grid-grid, $breakpoints: $grid-breakpoints) { + $breakpoint-infix: ""; + @each $infix, $value in $grid-breakpoints { + @if $width >= $value { + $breakpoint-infix: $infix; + } + } + @return $breakpoint-infix; +} +// End mod diff --git a/scss/mixins/_container.scss b/scss/mixins/_container.scss index d1c064545b..49e920b9ae 100644 --- a/scss/mixins/_container.scss +++ b/scss/mixins/_container.scss @@ -2,29 +2,19 @@ // scss-docs-start container-mixins @mixin make-container($gutter: $container-padding-x) { - --#{$prefix}gutter-x: #{$gutter}; - --#{$prefix}gutter-y: 0; + // OUDS mod: no CSS variable gutter definition inside containers 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..8ab3e4755d 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: `--#{$prefix}gutter-x` is handled 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 } @@ -120,12 +122,12 @@ @each $key, $value in $gutters { .g#{$infix}-#{$key}, .gx#{$infix}-#{$key} { - --#{$prefix}gutter-x: #{$value}; + --#{$prefix}gutter-x: #{$value if($enable-important-utilities, !important, null)}; // OUDS mod: `$enable-important-utilities` check is added } .g#{$infix}-#{$key}, .gy#{$infix}-#{$key} { - --#{$prefix}gutter-y: #{$value}; + --#{$prefix}gutter-y: #{$value if($enable-important-utilities, !important, null)}; // OUDS mod: `$enable-important-utilities` check is added } } } diff --git a/scss/ouds-web.scss b/scss/ouds-web.scss index ce4c13c43a..a8c6c53adb 100644 --- a/scss/ouds-web.scss +++ b/scss/ouds-web.scss @@ -14,7 +14,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..00b3fb2deb 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,5723 @@ $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 { + 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 { + 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 { + 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 !important; + } + + .g-none, + .gy-none { + --bs-gutter-y: 0 !important; + } + + .g-smash, + .gx-smash { + --bs-gutter-x: 2px !important; + } + + .g-smash, + .gy-smash { + --bs-gutter-y: 2px !important; + } + + .g-shortest, + .gx-shortest { + --bs-gutter-x: 4px !important; + } + + .g-shortest, + .gy-shortest { + --bs-gutter-y: 4px !important; + } + + .g-shorter, + .gx-shorter { + --bs-gutter-x: 8px !important; + } + + .g-shorter, + .gy-shorter { + --bs-gutter-y: 8px !important; + } + + .g-short, + .gx-short { + --bs-gutter-x: 12px !important; + } + + .g-short, + .gy-short { + --bs-gutter-y: 12px !important; + } + + .g-medium, + .gx-medium { + --bs-gutter-x: 16px !important; + } + + .g-medium, + .gy-medium { + --bs-gutter-y: 16px !important; + } + + .g-tall, + .gx-tall { + --bs-gutter-x: 24px !important; + } + + .g-tall, + .gy-tall { + --bs-gutter-y: 24px !important; + } + + .g-taller, + .gx-taller { + --bs-gutter-x: 32px !important; + } + + .g-taller, + .gy-taller { + --bs-gutter-y: 32px !important; + } + + .g-tallest, + .gx-tallest { + --bs-gutter-x: 40px !important; + } + + .g-tallest, + .gy-tallest { + --bs-gutter-y: 40px !important; + } + + .g-spacious, + .gx-spacious { + --bs-gutter-x: 48px !important; + } + + .g-spacious, + .gy-spacious { + --bs-gutter-y: 48px !important; + } + + .g-huge, + .gx-huge { + --bs-gutter-x: 56px !important; + } + + .g-huge, + .gy-huge { + --bs-gutter-y: 56px !important; + } + + .g-jumbo, + .gx-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-jumbo, + .gy-jumbo { + --bs-gutter-y: 64px !important; + } + + @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 !important; + } + + .g-xs-none, + .gy-xs-none { + --bs-gutter-y: 0 !important; + } + + .g-xs-smash, + .gx-xs-smash { + --bs-gutter-x: 2px !important; + } + + .g-xs-smash, + .gy-xs-smash { + --bs-gutter-y: 2px !important; + } + + .g-xs-shortest, + .gx-xs-shortest { + --bs-gutter-x: 4px !important; + } + + .g-xs-shortest, + .gy-xs-shortest { + --bs-gutter-y: 4px !important; + } + + .g-xs-shorter, + .gx-xs-shorter { + --bs-gutter-x: 8px !important; + } + + .g-xs-shorter, + .gy-xs-shorter { + --bs-gutter-y: 8px !important; + } + + .g-xs-short, + .gx-xs-short { + --bs-gutter-x: 12px !important; + } + + .g-xs-short, + .gy-xs-short { + --bs-gutter-y: 12px !important; + } + + .g-xs-medium, + .gx-xs-medium { + --bs-gutter-x: 16px !important; + } + + .g-xs-medium, + .gy-xs-medium { + --bs-gutter-y: 16px !important; + } + + .g-xs-tall, + .gx-xs-tall { + --bs-gutter-x: 24px !important; + } + + .g-xs-tall, + .gy-xs-tall { + --bs-gutter-y: 24px !important; + } + + .g-xs-taller, + .gx-xs-taller { + --bs-gutter-x: 32px !important; + } + + .g-xs-taller, + .gy-xs-taller { + --bs-gutter-y: 32px !important; + } + + .g-xs-tallest, + .gx-xs-tallest { + --bs-gutter-x: 40px !important; + } + + .g-xs-tallest, + .gy-xs-tallest { + --bs-gutter-y: 40px !important; + } + + .g-xs-spacious, + .gx-xs-spacious { + --bs-gutter-x: 48px !important; + } + + .g-xs-spacious, + .gy-xs-spacious { + --bs-gutter-y: 48px !important; + } + + .g-xs-huge, + .gx-xs-huge { + --bs-gutter-x: 56px !important; + } + + .g-xs-huge, + .gy-xs-huge { + --bs-gutter-y: 56px !important; + } + + .g-xs-jumbo, + .gx-xs-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-xs-jumbo, + .gy-xs-jumbo { + --bs-gutter-y: 64px !important; + } + } + + @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 !important; + } + + .g-sm-none, + .gy-sm-none { + --bs-gutter-y: 0 !important; + } + + .g-sm-smash, + .gx-sm-smash { + --bs-gutter-x: 2px !important; + } + + .g-sm-smash, + .gy-sm-smash { + --bs-gutter-y: 2px !important; + } + + .g-sm-shortest, + .gx-sm-shortest { + --bs-gutter-x: 4px !important; + } + + .g-sm-shortest, + .gy-sm-shortest { + --bs-gutter-y: 4px !important; + } + + .g-sm-shorter, + .gx-sm-shorter { + --bs-gutter-x: 8px !important; + } + + .g-sm-shorter, + .gy-sm-shorter { + --bs-gutter-y: 8px !important; + } + + .g-sm-short, + .gx-sm-short { + --bs-gutter-x: 12px !important; + } + + .g-sm-short, + .gy-sm-short { + --bs-gutter-y: 12px !important; + } + + .g-sm-medium, + .gx-sm-medium { + --bs-gutter-x: 16px !important; + } + + .g-sm-medium, + .gy-sm-medium { + --bs-gutter-y: 16px !important; + } + + .g-sm-tall, + .gx-sm-tall { + --bs-gutter-x: 24px !important; + } + + .g-sm-tall, + .gy-sm-tall { + --bs-gutter-y: 24px !important; + } + + .g-sm-taller, + .gx-sm-taller { + --bs-gutter-x: 32px !important; + } + + .g-sm-taller, + .gy-sm-taller { + --bs-gutter-y: 32px !important; + } + + .g-sm-tallest, + .gx-sm-tallest { + --bs-gutter-x: 40px !important; + } + + .g-sm-tallest, + .gy-sm-tallest { + --bs-gutter-y: 40px !important; + } + + .g-sm-spacious, + .gx-sm-spacious { + --bs-gutter-x: 48px !important; + } + + .g-sm-spacious, + .gy-sm-spacious { + --bs-gutter-y: 48px !important; + } + + .g-sm-huge, + .gx-sm-huge { + --bs-gutter-x: 56px !important; + } + + .g-sm-huge, + .gy-sm-huge { + --bs-gutter-y: 56px !important; + } + + .g-sm-jumbo, + .gx-sm-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-sm-jumbo, + .gy-sm-jumbo { + --bs-gutter-y: 64px !important; + } + } + + @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 !important; + } + + .g-md-none, + .gy-md-none { + --bs-gutter-y: 0 !important; + } + + .g-md-smash, + .gx-md-smash { + --bs-gutter-x: 2px !important; + } + + .g-md-smash, + .gy-md-smash { + --bs-gutter-y: 2px !important; + } + + .g-md-shortest, + .gx-md-shortest { + --bs-gutter-x: 4px !important; + } + + .g-md-shortest, + .gy-md-shortest { + --bs-gutter-y: 4px !important; + } + + .g-md-shorter, + .gx-md-shorter { + --bs-gutter-x: 8px !important; + } + + .g-md-shorter, + .gy-md-shorter { + --bs-gutter-y: 8px !important; + } + + .g-md-short, + .gx-md-short { + --bs-gutter-x: 12px !important; + } + + .g-md-short, + .gy-md-short { + --bs-gutter-y: 12px !important; + } + + .g-md-medium, + .gx-md-medium { + --bs-gutter-x: 16px !important; + } + + .g-md-medium, + .gy-md-medium { + --bs-gutter-y: 16px !important; + } + + .g-md-tall, + .gx-md-tall { + --bs-gutter-x: 24px !important; + } + + .g-md-tall, + .gy-md-tall { + --bs-gutter-y: 24px !important; + } + + .g-md-taller, + .gx-md-taller { + --bs-gutter-x: 32px !important; + } + + .g-md-taller, + .gy-md-taller { + --bs-gutter-y: 32px !important; + } + + .g-md-tallest, + .gx-md-tallest { + --bs-gutter-x: 40px !important; + } + + .g-md-tallest, + .gy-md-tallest { + --bs-gutter-y: 40px !important; + } + + .g-md-spacious, + .gx-md-spacious { + --bs-gutter-x: 48px !important; + } + + .g-md-spacious, + .gy-md-spacious { + --bs-gutter-y: 48px !important; + } + + .g-md-huge, + .gx-md-huge { + --bs-gutter-x: 56px !important; + } + + .g-md-huge, + .gy-md-huge { + --bs-gutter-y: 56px !important; + } + + .g-md-jumbo, + .gx-md-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-md-jumbo, + .gy-md-jumbo { + --bs-gutter-y: 64px !important; + } + } + + @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 !important; + } + + .g-lg-none, + .gy-lg-none { + --bs-gutter-y: 0 !important; + } + + .g-lg-smash, + .gx-lg-smash { + --bs-gutter-x: 2px !important; + } + + .g-lg-smash, + .gy-lg-smash { + --bs-gutter-y: 2px !important; + } + + .g-lg-shortest, + .gx-lg-shortest { + --bs-gutter-x: 4px !important; + } + + .g-lg-shortest, + .gy-lg-shortest { + --bs-gutter-y: 4px !important; + } + + .g-lg-shorter, + .gx-lg-shorter { + --bs-gutter-x: 8px !important; + } + + .g-lg-shorter, + .gy-lg-shorter { + --bs-gutter-y: 8px !important; + } + + .g-lg-short, + .gx-lg-short { + --bs-gutter-x: 12px !important; + } + + .g-lg-short, + .gy-lg-short { + --bs-gutter-y: 12px !important; + } + + .g-lg-medium, + .gx-lg-medium { + --bs-gutter-x: 16px !important; + } + + .g-lg-medium, + .gy-lg-medium { + --bs-gutter-y: 16px !important; + } + + .g-lg-tall, + .gx-lg-tall { + --bs-gutter-x: 24px !important; + } + + .g-lg-tall, + .gy-lg-tall { + --bs-gutter-y: 24px !important; + } + + .g-lg-taller, + .gx-lg-taller { + --bs-gutter-x: 32px !important; + } + + .g-lg-taller, + .gy-lg-taller { + --bs-gutter-y: 32px !important; + } + + .g-lg-tallest, + .gx-lg-tallest { + --bs-gutter-x: 40px !important; + } + + .g-lg-tallest, + .gy-lg-tallest { + --bs-gutter-y: 40px !important; + } + + .g-lg-spacious, + .gx-lg-spacious { + --bs-gutter-x: 48px !important; + } + + .g-lg-spacious, + .gy-lg-spacious { + --bs-gutter-y: 48px !important; + } + + .g-lg-huge, + .gx-lg-huge { + --bs-gutter-x: 56px !important; + } + + .g-lg-huge, + .gy-lg-huge { + --bs-gutter-y: 56px !important; + } + + .g-lg-jumbo, + .gx-lg-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-lg-jumbo, + .gy-lg-jumbo { + --bs-gutter-y: 64px !important; + } + } + + @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 !important; + } + + .g-xl-none, + .gy-xl-none { + --bs-gutter-y: 0 !important; + } + + .g-xl-smash, + .gx-xl-smash { + --bs-gutter-x: 2px !important; + } + + .g-xl-smash, + .gy-xl-smash { + --bs-gutter-y: 2px !important; + } + + .g-xl-shortest, + .gx-xl-shortest { + --bs-gutter-x: 4px !important; + } + + .g-xl-shortest, + .gy-xl-shortest { + --bs-gutter-y: 4px !important; + } + + .g-xl-shorter, + .gx-xl-shorter { + --bs-gutter-x: 8px !important; + } + + .g-xl-shorter, + .gy-xl-shorter { + --bs-gutter-y: 8px !important; + } + + .g-xl-short, + .gx-xl-short { + --bs-gutter-x: 12px !important; + } + + .g-xl-short, + .gy-xl-short { + --bs-gutter-y: 12px !important; + } + + .g-xl-medium, + .gx-xl-medium { + --bs-gutter-x: 16px !important; + } + + .g-xl-medium, + .gy-xl-medium { + --bs-gutter-y: 16px !important; + } + + .g-xl-tall, + .gx-xl-tall { + --bs-gutter-x: 24px !important; + } + + .g-xl-tall, + .gy-xl-tall { + --bs-gutter-y: 24px !important; + } + + .g-xl-taller, + .gx-xl-taller { + --bs-gutter-x: 32px !important; + } + + .g-xl-taller, + .gy-xl-taller { + --bs-gutter-y: 32px !important; + } + + .g-xl-tallest, + .gx-xl-tallest { + --bs-gutter-x: 40px !important; + } + + .g-xl-tallest, + .gy-xl-tallest { + --bs-gutter-y: 40px !important; + } + + .g-xl-spacious, + .gx-xl-spacious { + --bs-gutter-x: 48px !important; + } + + .g-xl-spacious, + .gy-xl-spacious { + --bs-gutter-y: 48px !important; + } + + .g-xl-huge, + .gx-xl-huge { + --bs-gutter-x: 56px !important; + } + + .g-xl-huge, + .gy-xl-huge { + --bs-gutter-y: 56px !important; + } + + .g-xl-jumbo, + .gx-xl-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-xl-jumbo, + .gy-xl-jumbo { + --bs-gutter-y: 64px !important; + } + } + + @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 !important; + } + + .g-2xl-none, + .gy-2xl-none { + --bs-gutter-y: 0 !important; + } + + .g-2xl-smash, + .gx-2xl-smash { + --bs-gutter-x: 2px !important; + } + + .g-2xl-smash, + .gy-2xl-smash { + --bs-gutter-y: 2px !important; + } + + .g-2xl-shortest, + .gx-2xl-shortest { + --bs-gutter-x: 4px !important; + } + + .g-2xl-shortest, + .gy-2xl-shortest { + --bs-gutter-y: 4px !important; + } + + .g-2xl-shorter, + .gx-2xl-shorter { + --bs-gutter-x: 8px !important; + } + + .g-2xl-shorter, + .gy-2xl-shorter { + --bs-gutter-y: 8px !important; + } + + .g-2xl-short, + .gx-2xl-short { + --bs-gutter-x: 12px !important; + } + + .g-2xl-short, + .gy-2xl-short { + --bs-gutter-y: 12px !important; + } + + .g-2xl-medium, + .gx-2xl-medium { + --bs-gutter-x: 16px !important; + } + + .g-2xl-medium, + .gy-2xl-medium { + --bs-gutter-y: 16px !important; + } + + .g-2xl-tall, + .gx-2xl-tall { + --bs-gutter-x: 24px !important; + } + + .g-2xl-tall, + .gy-2xl-tall { + --bs-gutter-y: 24px !important; + } + + .g-2xl-taller, + .gx-2xl-taller { + --bs-gutter-x: 32px !important; + } + + .g-2xl-taller, + .gy-2xl-taller { + --bs-gutter-y: 32px !important; + } + + .g-2xl-tallest, + .gx-2xl-tallest { + --bs-gutter-x: 40px !important; + } + + .g-2xl-tallest, + .gy-2xl-tallest { + --bs-gutter-y: 40px !important; + } + + .g-2xl-spacious, + .gx-2xl-spacious { + --bs-gutter-x: 48px !important; + } + + .g-2xl-spacious, + .gy-2xl-spacious { + --bs-gutter-y: 48px !important; + } + + .g-2xl-huge, + .gx-2xl-huge { + --bs-gutter-x: 56px !important; + } + + .g-2xl-huge, + .gy-2xl-huge { + --bs-gutter-y: 56px !important; + } + + .g-2xl-jumbo, + .gx-2xl-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-2xl-jumbo, + .gy-2xl-jumbo { + --bs-gutter-y: 64px !important; + } + } + + @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 !important; + } + + .g-3xl-none, + .gy-3xl-none { + --bs-gutter-y: 0 !important; + } + + .g-3xl-smash, + .gx-3xl-smash { + --bs-gutter-x: 2px !important; + } + + .g-3xl-smash, + .gy-3xl-smash { + --bs-gutter-y: 2px !important; + } + + .g-3xl-shortest, + .gx-3xl-shortest { + --bs-gutter-x: 4px !important; + } + + .g-3xl-shortest, + .gy-3xl-shortest { + --bs-gutter-y: 4px !important; + } + + .g-3xl-shorter, + .gx-3xl-shorter { + --bs-gutter-x: 8px !important; + } + + .g-3xl-shorter, + .gy-3xl-shorter { + --bs-gutter-y: 8px !important; + } + + .g-3xl-short, + .gx-3xl-short { + --bs-gutter-x: 12px !important; + } + + .g-3xl-short, + .gy-3xl-short { + --bs-gutter-y: 12px !important; + } + + .g-3xl-medium, + .gx-3xl-medium { + --bs-gutter-x: 16px !important; + } + + .g-3xl-medium, + .gy-3xl-medium { + --bs-gutter-y: 16px !important; + } + + .g-3xl-tall, + .gx-3xl-tall { + --bs-gutter-x: 24px !important; + } + + .g-3xl-tall, + .gy-3xl-tall { + --bs-gutter-y: 24px !important; + } + + .g-3xl-taller, + .gx-3xl-taller { + --bs-gutter-x: 32px !important; + } + + .g-3xl-taller, + .gy-3xl-taller { + --bs-gutter-y: 32px !important; + } + + .g-3xl-tallest, + .gx-3xl-tallest { + --bs-gutter-x: 40px !important; + } + + .g-3xl-tallest, + .gy-3xl-tallest { + --bs-gutter-y: 40px !important; + } + + .g-3xl-spacious, + .gx-3xl-spacious { + --bs-gutter-x: 48px !important; + } + + .g-3xl-spacious, + .gy-3xl-spacious { + --bs-gutter-y: 48px !important; + } + + .g-3xl-huge, + .gx-3xl-huge { + --bs-gutter-x: 56px !important; + } + + .g-3xl-huge, + .gy-3xl-huge { + --bs-gutter-y: 56px !important; + } + + .g-3xl-jumbo, + .gx-3xl-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-3xl-jumbo, + .gy-3xl-jumbo { + --bs-gutter-y: 64px !important; + } + } + } + } + } + + @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 !important; + } + + .g-none, + .gy-none { + --bs-gutter-y: 0 !important; + } + + .g-smash, + .gx-smash { + --bs-gutter-x: 2px !important; + } + + .g-smash, + .gy-smash { + --bs-gutter-y: 2px !important; + } + + .g-shortest, + .gx-shortest { + --bs-gutter-x: 4px !important; + } + + .g-shortest, + .gy-shortest { + --bs-gutter-y: 4px !important; + } + + .g-shorter, + .gx-shorter { + --bs-gutter-x: 8px !important; + } + + .g-shorter, + .gy-shorter { + --bs-gutter-y: 8px !important; + } + + .g-short, + .gx-short { + --bs-gutter-x: 12px !important; + } + + .g-short, + .gy-short { + --bs-gutter-y: 12px !important; + } + + .g-medium, + .gx-medium { + --bs-gutter-x: 16px !important; + } + + .g-medium, + .gy-medium { + --bs-gutter-y: 16px !important; + } + + .g-tall, + .gx-tall { + --bs-gutter-x: 24px !important; + } + + .g-tall, + .gy-tall { + --bs-gutter-y: 24px !important; + } + + .g-taller, + .gx-taller { + --bs-gutter-x: 32px !important; + } + + .g-taller, + .gy-taller { + --bs-gutter-y: 32px !important; + } + + .g-tallest, + .gx-tallest { + --bs-gutter-x: 40px !important; + } + + .g-tallest, + .gy-tallest { + --bs-gutter-y: 40px !important; + } + + .g-spacious, + .gx-spacious { + --bs-gutter-x: 48px !important; + } + + .g-spacious, + .gy-spacious { + --bs-gutter-y: 48px !important; + } + + .g-huge, + .gx-huge { + --bs-gutter-x: 56px !important; + } + + .g-huge, + .gy-huge { + --bs-gutter-y: 56px !important; + } + + .g-jumbo, + .gx-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-jumbo, + .gy-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-0, + .gx-0 { + --bs-gutter-x: 0 !important; + } + + .g-0, + .gy-0 { + --bs-gutter-y: 0 !important; + } + + .g-1, + .gx-1 { + --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-1, + .gy-1 { + --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2, + .gx-2 { + --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2, + .gy-2 { + --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-3, + .gx-3 { + --bs-gutter-x: 1.25rem !important; + } + + .g-3, + .gy-3 { + --bs-gutter-y: 1.25rem !important; + } + + .g-4, + .gx-4 { + --bs-gutter-x: 1.875rem !important; + } + + .g-4, + .gy-4 { + --bs-gutter-y: 1.875rem !important; + } + + .g-5, + .gx-5 { + --bs-gutter-x: 3.75rem !important; + } + + .g-5, + .gy-5 { + --bs-gutter-y: 3.75rem !important; + } + + @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 !important; + } + + .g-xs-none, + .gy-xs-none { + --bs-gutter-y: 0 !important; + } + + .g-xs-smash, + .gx-xs-smash { + --bs-gutter-x: 2px !important; + } + + .g-xs-smash, + .gy-xs-smash { + --bs-gutter-y: 2px !important; + } + + .g-xs-shortest, + .gx-xs-shortest { + --bs-gutter-x: 4px !important; + } + + .g-xs-shortest, + .gy-xs-shortest { + --bs-gutter-y: 4px !important; + } + + .g-xs-shorter, + .gx-xs-shorter { + --bs-gutter-x: 8px !important; + } + + .g-xs-shorter, + .gy-xs-shorter { + --bs-gutter-y: 8px !important; + } + + .g-xs-short, + .gx-xs-short { + --bs-gutter-x: 12px !important; + } + + .g-xs-short, + .gy-xs-short { + --bs-gutter-y: 12px !important; + } + + .g-xs-medium, + .gx-xs-medium { + --bs-gutter-x: 16px !important; + } + + .g-xs-medium, + .gy-xs-medium { + --bs-gutter-y: 16px !important; + } + + .g-xs-tall, + .gx-xs-tall { + --bs-gutter-x: 24px !important; + } + + .g-xs-tall, + .gy-xs-tall { + --bs-gutter-y: 24px !important; + } + + .g-xs-taller, + .gx-xs-taller { + --bs-gutter-x: 32px !important; + } + + .g-xs-taller, + .gy-xs-taller { + --bs-gutter-y: 32px !important; + } + + .g-xs-tallest, + .gx-xs-tallest { + --bs-gutter-x: 40px !important; + } + + .g-xs-tallest, + .gy-xs-tallest { + --bs-gutter-y: 40px !important; + } + + .g-xs-spacious, + .gx-xs-spacious { + --bs-gutter-x: 48px !important; + } + + .g-xs-spacious, + .gy-xs-spacious { + --bs-gutter-y: 48px !important; + } + + .g-xs-huge, + .gx-xs-huge { + --bs-gutter-x: 56px !important; + } + + .g-xs-huge, + .gy-xs-huge { + --bs-gutter-y: 56px !important; + } + + .g-xs-jumbo, + .gx-xs-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-xs-jumbo, + .gy-xs-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-xs-0, + .gx-xs-0 { + --bs-gutter-x: 0 !important; + } + + .g-xs-0, + .gy-xs-0 { + --bs-gutter-y: 0 !important; + } + + .g-xs-1, + .gx-xs-1 { + --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xs-1, + .gy-xs-1 { + --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xs-2, + .gx-xs-2 { + --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xs-2, + .gy-xs-2 { + --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xs-3, + .gx-xs-3 { + --bs-gutter-x: 1.25rem !important; + } + + .g-xs-3, + .gy-xs-3 { + --bs-gutter-y: 1.25rem !important; + } + + .g-xs-4, + .gx-xs-4 { + --bs-gutter-x: 1.875rem !important; + } + + .g-xs-4, + .gy-xs-4 { + --bs-gutter-y: 1.875rem !important; + } + + .g-xs-5, + .gx-xs-5 { + --bs-gutter-x: 3.75rem !important; + } + + .g-xs-5, + .gy-xs-5 { + --bs-gutter-y: 3.75rem !important; + } + } + + @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 !important; + } + + .g-sm-none, + .gy-sm-none { + --bs-gutter-y: 0 !important; + } + + .g-sm-smash, + .gx-sm-smash { + --bs-gutter-x: 2px !important; + } + + .g-sm-smash, + .gy-sm-smash { + --bs-gutter-y: 2px !important; + } + + .g-sm-shortest, + .gx-sm-shortest { + --bs-gutter-x: 4px !important; + } + + .g-sm-shortest, + .gy-sm-shortest { + --bs-gutter-y: 4px !important; + } + + .g-sm-shorter, + .gx-sm-shorter { + --bs-gutter-x: 8px !important; + } + + .g-sm-shorter, + .gy-sm-shorter { + --bs-gutter-y: 8px !important; + } + + .g-sm-short, + .gx-sm-short { + --bs-gutter-x: 12px !important; + } + + .g-sm-short, + .gy-sm-short { + --bs-gutter-y: 12px !important; + } + + .g-sm-medium, + .gx-sm-medium { + --bs-gutter-x: 16px !important; + } + + .g-sm-medium, + .gy-sm-medium { + --bs-gutter-y: 16px !important; + } + + .g-sm-tall, + .gx-sm-tall { + --bs-gutter-x: 24px !important; + } + + .g-sm-tall, + .gy-sm-tall { + --bs-gutter-y: 24px !important; + } + + .g-sm-taller, + .gx-sm-taller { + --bs-gutter-x: 32px !important; + } + + .g-sm-taller, + .gy-sm-taller { + --bs-gutter-y: 32px !important; + } + + .g-sm-tallest, + .gx-sm-tallest { + --bs-gutter-x: 40px !important; + } + + .g-sm-tallest, + .gy-sm-tallest { + --bs-gutter-y: 40px !important; + } + + .g-sm-spacious, + .gx-sm-spacious { + --bs-gutter-x: 48px !important; + } + + .g-sm-spacious, + .gy-sm-spacious { + --bs-gutter-y: 48px !important; + } + + .g-sm-huge, + .gx-sm-huge { + --bs-gutter-x: 56px !important; + } + + .g-sm-huge, + .gy-sm-huge { + --bs-gutter-y: 56px !important; + } + + .g-sm-jumbo, + .gx-sm-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-sm-jumbo, + .gy-sm-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-sm-0, + .gx-sm-0 { + --bs-gutter-x: 0 !important; + } + + .g-sm-0, + .gy-sm-0 { + --bs-gutter-y: 0 !important; + } + + .g-sm-1, + .gx-sm-1 { + --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-sm-1, + .gy-sm-1 { + --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-sm-2, + .gx-sm-2 { + --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-sm-2, + .gy-sm-2 { + --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-sm-3, + .gx-sm-3 { + --bs-gutter-x: 1.25rem !important; + } + + .g-sm-3, + .gy-sm-3 { + --bs-gutter-y: 1.25rem !important; + } + + .g-sm-4, + .gx-sm-4 { + --bs-gutter-x: 1.875rem !important; + } + + .g-sm-4, + .gy-sm-4 { + --bs-gutter-y: 1.875rem !important; + } + + .g-sm-5, + .gx-sm-5 { + --bs-gutter-x: 3.75rem !important; + } + + .g-sm-5, + .gy-sm-5 { + --bs-gutter-y: 3.75rem !important; + } + } + + @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 !important; + } + + .g-md-none, + .gy-md-none { + --bs-gutter-y: 0 !important; + } + + .g-md-smash, + .gx-md-smash { + --bs-gutter-x: 2px !important; + } + + .g-md-smash, + .gy-md-smash { + --bs-gutter-y: 2px !important; + } + + .g-md-shortest, + .gx-md-shortest { + --bs-gutter-x: 4px !important; + } + + .g-md-shortest, + .gy-md-shortest { + --bs-gutter-y: 4px !important; + } + + .g-md-shorter, + .gx-md-shorter { + --bs-gutter-x: 8px !important; + } + + .g-md-shorter, + .gy-md-shorter { + --bs-gutter-y: 8px !important; + } + + .g-md-short, + .gx-md-short { + --bs-gutter-x: 12px !important; + } + + .g-md-short, + .gy-md-short { + --bs-gutter-y: 12px !important; + } + + .g-md-medium, + .gx-md-medium { + --bs-gutter-x: 16px !important; + } + + .g-md-medium, + .gy-md-medium { + --bs-gutter-y: 16px !important; + } + + .g-md-tall, + .gx-md-tall { + --bs-gutter-x: 24px !important; + } + + .g-md-tall, + .gy-md-tall { + --bs-gutter-y: 24px !important; + } + + .g-md-taller, + .gx-md-taller { + --bs-gutter-x: 32px !important; + } + + .g-md-taller, + .gy-md-taller { + --bs-gutter-y: 32px !important; + } + + .g-md-tallest, + .gx-md-tallest { + --bs-gutter-x: 40px !important; + } + + .g-md-tallest, + .gy-md-tallest { + --bs-gutter-y: 40px !important; + } + + .g-md-spacious, + .gx-md-spacious { + --bs-gutter-x: 48px !important; + } + + .g-md-spacious, + .gy-md-spacious { + --bs-gutter-y: 48px !important; + } + + .g-md-huge, + .gx-md-huge { + --bs-gutter-x: 56px !important; + } + + .g-md-huge, + .gy-md-huge { + --bs-gutter-y: 56px !important; + } + + .g-md-jumbo, + .gx-md-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-md-jumbo, + .gy-md-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-md-0, + .gx-md-0 { + --bs-gutter-x: 0 !important; + } + + .g-md-0, + .gy-md-0 { + --bs-gutter-y: 0 !important; + } + + .g-md-1, + .gx-md-1 { + --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-md-1, + .gy-md-1 { + --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-md-2, + .gx-md-2 { + --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-md-2, + .gy-md-2 { + --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-md-3, + .gx-md-3 { + --bs-gutter-x: 1.25rem !important; + } + + .g-md-3, + .gy-md-3 { + --bs-gutter-y: 1.25rem !important; + } + + .g-md-4, + .gx-md-4 { + --bs-gutter-x: 1.875rem !important; + } + + .g-md-4, + .gy-md-4 { + --bs-gutter-y: 1.875rem !important; + } + + .g-md-5, + .gx-md-5 { + --bs-gutter-x: 3.75rem !important; + } + + .g-md-5, + .gy-md-5 { + --bs-gutter-y: 3.75rem !important; + } + } + + @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 !important; + } + + .g-lg-none, + .gy-lg-none { + --bs-gutter-y: 0 !important; + } + + .g-lg-smash, + .gx-lg-smash { + --bs-gutter-x: 2px !important; + } + + .g-lg-smash, + .gy-lg-smash { + --bs-gutter-y: 2px !important; + } + + .g-lg-shortest, + .gx-lg-shortest { + --bs-gutter-x: 4px !important; + } + + .g-lg-shortest, + .gy-lg-shortest { + --bs-gutter-y: 4px !important; + } + + .g-lg-shorter, + .gx-lg-shorter { + --bs-gutter-x: 8px !important; + } + + .g-lg-shorter, + .gy-lg-shorter { + --bs-gutter-y: 8px !important; + } + + .g-lg-short, + .gx-lg-short { + --bs-gutter-x: 12px !important; + } + + .g-lg-short, + .gy-lg-short { + --bs-gutter-y: 12px !important; + } + + .g-lg-medium, + .gx-lg-medium { + --bs-gutter-x: 16px !important; + } + + .g-lg-medium, + .gy-lg-medium { + --bs-gutter-y: 16px !important; + } + + .g-lg-tall, + .gx-lg-tall { + --bs-gutter-x: 24px !important; + } + + .g-lg-tall, + .gy-lg-tall { + --bs-gutter-y: 24px !important; + } + + .g-lg-taller, + .gx-lg-taller { + --bs-gutter-x: 32px !important; + } + + .g-lg-taller, + .gy-lg-taller { + --bs-gutter-y: 32px !important; + } + + .g-lg-tallest, + .gx-lg-tallest { + --bs-gutter-x: 40px !important; + } + + .g-lg-tallest, + .gy-lg-tallest { + --bs-gutter-y: 40px !important; + } + + .g-lg-spacious, + .gx-lg-spacious { + --bs-gutter-x: 48px !important; + } + + .g-lg-spacious, + .gy-lg-spacious { + --bs-gutter-y: 48px !important; + } + + .g-lg-huge, + .gx-lg-huge { + --bs-gutter-x: 56px !important; + } + + .g-lg-huge, + .gy-lg-huge { + --bs-gutter-y: 56px !important; + } + + .g-lg-jumbo, + .gx-lg-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-lg-jumbo, + .gy-lg-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-lg-0, + .gx-lg-0 { + --bs-gutter-x: 0 !important; + } + + .g-lg-0, + .gy-lg-0 { + --bs-gutter-y: 0 !important; + } + + .g-lg-1, + .gx-lg-1 { + --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-lg-1, + .gy-lg-1 { + --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-lg-2, + .gx-lg-2 { + --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-lg-2, + .gy-lg-2 { + --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-lg-3, + .gx-lg-3 { + --bs-gutter-x: 1.25rem !important; + } + + .g-lg-3, + .gy-lg-3 { + --bs-gutter-y: 1.25rem !important; + } + + .g-lg-4, + .gx-lg-4 { + --bs-gutter-x: 1.875rem !important; + } + + .g-lg-4, + .gy-lg-4 { + --bs-gutter-y: 1.875rem !important; + } + + .g-lg-5, + .gx-lg-5 { + --bs-gutter-x: 3.75rem !important; + } + + .g-lg-5, + .gy-lg-5 { + --bs-gutter-y: 3.75rem !important; + } + } + + @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 !important; + } + + .g-xl-none, + .gy-xl-none { + --bs-gutter-y: 0 !important; + } + + .g-xl-smash, + .gx-xl-smash { + --bs-gutter-x: 2px !important; + } + + .g-xl-smash, + .gy-xl-smash { + --bs-gutter-y: 2px !important; + } + + .g-xl-shortest, + .gx-xl-shortest { + --bs-gutter-x: 4px !important; + } + + .g-xl-shortest, + .gy-xl-shortest { + --bs-gutter-y: 4px !important; + } + + .g-xl-shorter, + .gx-xl-shorter { + --bs-gutter-x: 8px !important; + } + + .g-xl-shorter, + .gy-xl-shorter { + --bs-gutter-y: 8px !important; + } + + .g-xl-short, + .gx-xl-short { + --bs-gutter-x: 12px !important; + } + + .g-xl-short, + .gy-xl-short { + --bs-gutter-y: 12px !important; + } + + .g-xl-medium, + .gx-xl-medium { + --bs-gutter-x: 16px !important; + } + + .g-xl-medium, + .gy-xl-medium { + --bs-gutter-y: 16px !important; + } + + .g-xl-tall, + .gx-xl-tall { + --bs-gutter-x: 24px !important; + } + + .g-xl-tall, + .gy-xl-tall { + --bs-gutter-y: 24px !important; + } + + .g-xl-taller, + .gx-xl-taller { + --bs-gutter-x: 32px !important; + } + + .g-xl-taller, + .gy-xl-taller { + --bs-gutter-y: 32px !important; + } + + .g-xl-tallest, + .gx-xl-tallest { + --bs-gutter-x: 40px !important; + } + + .g-xl-tallest, + .gy-xl-tallest { + --bs-gutter-y: 40px !important; + } + + .g-xl-spacious, + .gx-xl-spacious { + --bs-gutter-x: 48px !important; + } + + .g-xl-spacious, + .gy-xl-spacious { + --bs-gutter-y: 48px !important; + } + + .g-xl-huge, + .gx-xl-huge { + --bs-gutter-x: 56px !important; + } + + .g-xl-huge, + .gy-xl-huge { + --bs-gutter-y: 56px !important; + } + + .g-xl-jumbo, + .gx-xl-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-xl-jumbo, + .gy-xl-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-xl-0, + .gx-xl-0 { + --bs-gutter-x: 0 !important; + } + + .g-xl-0, + .gy-xl-0 { + --bs-gutter-y: 0 !important; + } + + .g-xl-1, + .gx-xl-1 { + --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xl-1, + .gy-xl-1 { + --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xl-2, + .gx-xl-2 { + --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xl-2, + .gy-xl-2 { + --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xl-3, + .gx-xl-3 { + --bs-gutter-x: 1.25rem !important; + } + + .g-xl-3, + .gy-xl-3 { + --bs-gutter-y: 1.25rem !important; + } + + .g-xl-4, + .gx-xl-4 { + --bs-gutter-x: 1.875rem !important; + } + + .g-xl-4, + .gy-xl-4 { + --bs-gutter-y: 1.875rem !important; + } + + .g-xl-5, + .gx-xl-5 { + --bs-gutter-x: 3.75rem !important; + } + + .g-xl-5, + .gy-xl-5 { + --bs-gutter-y: 3.75rem !important; + } + } + + @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 !important; + } + + .g-xxl-none, + .gy-xxl-none { + --bs-gutter-y: 0 !important; + } + + .g-xxl-smash, + .gx-xxl-smash { + --bs-gutter-x: 2px !important; + } + + .g-xxl-smash, + .gy-xxl-smash { + --bs-gutter-y: 2px !important; + } + + .g-xxl-shortest, + .gx-xxl-shortest { + --bs-gutter-x: 4px !important; + } + + .g-xxl-shortest, + .gy-xxl-shortest { + --bs-gutter-y: 4px !important; + } + + .g-xxl-shorter, + .gx-xxl-shorter { + --bs-gutter-x: 8px !important; + } + + .g-xxl-shorter, + .gy-xxl-shorter { + --bs-gutter-y: 8px !important; + } + + .g-xxl-short, + .gx-xxl-short { + --bs-gutter-x: 12px !important; + } + + .g-xxl-short, + .gy-xxl-short { + --bs-gutter-y: 12px !important; + } + + .g-xxl-medium, + .gx-xxl-medium { + --bs-gutter-x: 16px !important; + } + + .g-xxl-medium, + .gy-xxl-medium { + --bs-gutter-y: 16px !important; + } + + .g-xxl-tall, + .gx-xxl-tall { + --bs-gutter-x: 24px !important; + } + + .g-xxl-tall, + .gy-xxl-tall { + --bs-gutter-y: 24px !important; + } + + .g-xxl-taller, + .gx-xxl-taller { + --bs-gutter-x: 32px !important; + } + + .g-xxl-taller, + .gy-xxl-taller { + --bs-gutter-y: 32px !important; + } + + .g-xxl-tallest, + .gx-xxl-tallest { + --bs-gutter-x: 40px !important; + } + + .g-xxl-tallest, + .gy-xxl-tallest { + --bs-gutter-y: 40px !important; + } + + .g-xxl-spacious, + .gx-xxl-spacious { + --bs-gutter-x: 48px !important; + } + + .g-xxl-spacious, + .gy-xxl-spacious { + --bs-gutter-y: 48px !important; + } + + .g-xxl-huge, + .gx-xxl-huge { + --bs-gutter-x: 56px !important; + } + + .g-xxl-huge, + .gy-xxl-huge { + --bs-gutter-y: 56px !important; + } + + .g-xxl-jumbo, + .gx-xxl-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-xxl-jumbo, + .gy-xxl-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-xxl-0, + .gx-xxl-0 { + --bs-gutter-x: 0 !important; + } + + .g-xxl-0, + .gy-xxl-0 { + --bs-gutter-y: 0 !important; + } + + .g-xxl-1, + .gx-xxl-1 { + --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xxl-1, + .gy-xxl-1 { + --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xxl-2, + .gx-xxl-2 { + --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xxl-2, + .gy-xxl-2 { + --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xxl-3, + .gx-xxl-3 { + --bs-gutter-x: 1.25rem !important; + } + + .g-xxl-3, + .gy-xxl-3 { + --bs-gutter-y: 1.25rem !important; + } + + .g-xxl-4, + .gx-xxl-4 { + --bs-gutter-x: 1.875rem !important; + } + + .g-xxl-4, + .gy-xxl-4 { + --bs-gutter-y: 1.875rem !important; + } + + .g-xxl-5, + .gx-xxl-5 { + --bs-gutter-x: 3.75rem !important; + } + + .g-xxl-5, + .gy-xxl-5 { + --bs-gutter-y: 3.75rem !important; + } + } + + @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 !important; + } + + .g-2xl-none, + .gy-2xl-none { + --bs-gutter-y: 0 !important; + } + + .g-2xl-smash, + .gx-2xl-smash { + --bs-gutter-x: 2px !important; + } + + .g-2xl-smash, + .gy-2xl-smash { + --bs-gutter-y: 2px !important; + } + + .g-2xl-shortest, + .gx-2xl-shortest { + --bs-gutter-x: 4px !important; + } + + .g-2xl-shortest, + .gy-2xl-shortest { + --bs-gutter-y: 4px !important; + } + + .g-2xl-shorter, + .gx-2xl-shorter { + --bs-gutter-x: 8px !important; + } + + .g-2xl-shorter, + .gy-2xl-shorter { + --bs-gutter-y: 8px !important; + } + + .g-2xl-short, + .gx-2xl-short { + --bs-gutter-x: 12px !important; + } + + .g-2xl-short, + .gy-2xl-short { + --bs-gutter-y: 12px !important; + } + + .g-2xl-medium, + .gx-2xl-medium { + --bs-gutter-x: 16px !important; + } + + .g-2xl-medium, + .gy-2xl-medium { + --bs-gutter-y: 16px !important; + } + + .g-2xl-tall, + .gx-2xl-tall { + --bs-gutter-x: 24px !important; + } + + .g-2xl-tall, + .gy-2xl-tall { + --bs-gutter-y: 24px !important; + } + + .g-2xl-taller, + .gx-2xl-taller { + --bs-gutter-x: 32px !important; + } + + .g-2xl-taller, + .gy-2xl-taller { + --bs-gutter-y: 32px !important; + } + + .g-2xl-tallest, + .gx-2xl-tallest { + --bs-gutter-x: 40px !important; + } + + .g-2xl-tallest, + .gy-2xl-tallest { + --bs-gutter-y: 40px !important; + } + + .g-2xl-spacious, + .gx-2xl-spacious { + --bs-gutter-x: 48px !important; + } + + .g-2xl-spacious, + .gy-2xl-spacious { + --bs-gutter-y: 48px !important; + } + + .g-2xl-huge, + .gx-2xl-huge { + --bs-gutter-x: 56px !important; + } + + .g-2xl-huge, + .gy-2xl-huge { + --bs-gutter-y: 56px !important; + } + + .g-2xl-jumbo, + .gx-2xl-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-2xl-jumbo, + .gy-2xl-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-2xl-0, + .gx-2xl-0 { + --bs-gutter-x: 0 !important; + } + + .g-2xl-0, + .gy-2xl-0 { + --bs-gutter-y: 0 !important; + } + + .g-2xl-1, + .gx-2xl-1 { + --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2xl-1, + .gy-2xl-1 { + --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2xl-2, + .gx-2xl-2 { + --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2xl-2, + .gy-2xl-2 { + --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2xl-3, + .gx-2xl-3 { + --bs-gutter-x: 1.25rem !important; + } + + .g-2xl-3, + .gy-2xl-3 { + --bs-gutter-y: 1.25rem !important; + } + + .g-2xl-4, + .gx-2xl-4 { + --bs-gutter-x: 1.875rem !important; + } + + .g-2xl-4, + .gy-2xl-4 { + --bs-gutter-y: 1.875rem !important; + } + + .g-2xl-5, + .gx-2xl-5 { + --bs-gutter-x: 3.75rem !important; + } + + .g-2xl-5, + .gy-2xl-5 { + --bs-gutter-y: 3.75rem !important; + } + } + + @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 !important; + } + + .g-3xl-none, + .gy-3xl-none { + --bs-gutter-y: 0 !important; + } + + .g-3xl-smash, + .gx-3xl-smash { + --bs-gutter-x: 2px !important; + } + + .g-3xl-smash, + .gy-3xl-smash { + --bs-gutter-y: 2px !important; + } + + .g-3xl-shortest, + .gx-3xl-shortest { + --bs-gutter-x: 4px !important; + } + + .g-3xl-shortest, + .gy-3xl-shortest { + --bs-gutter-y: 4px !important; + } + + .g-3xl-shorter, + .gx-3xl-shorter { + --bs-gutter-x: 8px !important; + } + + .g-3xl-shorter, + .gy-3xl-shorter { + --bs-gutter-y: 8px !important; + } + + .g-3xl-short, + .gx-3xl-short { + --bs-gutter-x: 12px !important; + } + + .g-3xl-short, + .gy-3xl-short { + --bs-gutter-y: 12px !important; + } + + .g-3xl-medium, + .gx-3xl-medium { + --bs-gutter-x: 16px !important; + } + + .g-3xl-medium, + .gy-3xl-medium { + --bs-gutter-y: 16px !important; + } + + .g-3xl-tall, + .gx-3xl-tall { + --bs-gutter-x: 24px !important; + } + + .g-3xl-tall, + .gy-3xl-tall { + --bs-gutter-y: 24px !important; + } + + .g-3xl-taller, + .gx-3xl-taller { + --bs-gutter-x: 32px !important; + } + + .g-3xl-taller, + .gy-3xl-taller { + --bs-gutter-y: 32px !important; + } + + .g-3xl-tallest, + .gx-3xl-tallest { + --bs-gutter-x: 40px !important; + } + + .g-3xl-tallest, + .gy-3xl-tallest { + --bs-gutter-y: 40px !important; + } + + .g-3xl-spacious, + .gx-3xl-spacious { + --bs-gutter-x: 48px !important; + } + + .g-3xl-spacious, + .gy-3xl-spacious { + --bs-gutter-y: 48px !important; + } + + .g-3xl-huge, + .gx-3xl-huge { + --bs-gutter-x: 56px !important; + } + + .g-3xl-huge, + .gy-3xl-huge { + --bs-gutter-y: 56px !important; + } + + .g-3xl-jumbo, + .gx-3xl-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-3xl-jumbo, + .gy-3xl-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-3xl-0, + .gx-3xl-0 { + --bs-gutter-x: 0 !important; + } + + .g-3xl-0, + .gy-3xl-0 { + --bs-gutter-y: 0 !important; + } + + .g-3xl-1, + .gx-3xl-1 { + --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-3xl-1, + .gy-3xl-1 { + --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-3xl-2, + .gx-3xl-2 { + --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-3xl-2, + .gy-3xl-2 { + --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-3xl-3, + .gx-3xl-3 { + --bs-gutter-x: 1.25rem !important; + } + + .g-3xl-3, + .gy-3xl-3 { + --bs-gutter-y: 1.25rem !important; + } + + .g-3xl-4, + .gx-3xl-4 { + --bs-gutter-x: 1.875rem !important; + } + + .g-3xl-4, + .gy-3xl-4 { + --bs-gutter-y: 1.875rem !important; + } + + .g-3xl-5, + .gx-3xl-5 { + --bs-gutter-x: 3.75rem !important; + } + + .g-3xl-5, + .gy-3xl-5 { + --bs-gutter-y: 3.75rem !important; + } + } + } + } + } } +// stylelint-enable no-duplicate-at-import-rules diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 12e83f4c84..9f4cb1691c 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -112,6 +112,17 @@ // Grid examples // +// OUDS mod: Adjust container padding within the documentation to prevent excessive spacing +@each $breakpoint, $gutter-width in $grid-gutter-widths { + @include media-breakpoint-up($breakpoint) { + .bd-example-row [class^="container"] { + padding-right: $gutter-width * .5; + padding-left: $gutter-width * .5; + } + } +} +// End mod + .bd-example-row [class^="col"], .bd-example-cols [class^="col"] > *, .bd-example-cssgrid [class*="grid"] > * { 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..eb6c25f2b2 --- /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 (2x-small, this class infix is not used), xs (x-small), sm (small), md (medium), lg (large), xl (x-large), 2xl (2x-large) and 3xl (3x-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..99599b1bfa 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 (x-large) or wider
    +
    Stick to the top on viewports sized 2XL (2x-large) or wider
    +
    Stick to the top on viewports sized 3XL (3x-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 (x-large) or wider
    +
    Stick to the bottom on viewports sized 2XL (2x-large) or wider
    +
    Stick to the bottom on viewports sized 3XL (3x-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..3f67bf6254 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 >}} + +{{< bootstrap-compatibility >}} + +Includes support for xxl breakpoint, defined like 2xl. + +{{< bs-table "table" >}} +| Breakpoint | Class infix | Dimensions | +| --- | --- | --- | +| Extra extra large | `xxl` | ≥1640px | +{{< /bs-table >}} + +{{< /bootstrap-compatibility >}} + +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" >}}). + +## 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 x-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..edb9525dd6 100644 --- a/site/content/docs/0.0/layout/columns.md +++ b/site/content/docs/0.0/layout/columns.md @@ -8,4 +8,354 @@ 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, lg, 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. + +{{< callout info >}} +**Avoid using columns that are too narrow for the main grid.** For smaller breakpoints (`2xs`, `xs`, and `sm`), align with the design system by using columns in multiples of 3. For medium and larger breakpoints (`md` and `lg`), stick to columns in multiples of 2. +{{< /callout >}} + +## 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..98da3d712f 100644 --- a/site/content/docs/0.0/layout/containers.md +++ b/site/content/docs/0.0/layout/containers.md @@ -8,4 +8,156 @@ 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 provides a single responsive container, `.container-fluid`, which ensures a `width: 100%` at all breakpoints. To optimize its use, pair it with the `.container-max-width` class. For further details, refer to the [Fluid containers](#fluid-containers) section. + +The table below compares `.container-fluid` `max-width` with and without `.container-max-width` 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 websites.** 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 x-small breakpoint
    +
    100% wide until small breakpoint
    +
    100% wide until medium breakpoint
    +
    100% wide until large breakpoint
    +
    100% wide until x-large breakpoint
    +
    100% wide until 2x-large breakpoint
    +
    100% wide until 2x-large breakpoint
    +
    100% wide until 3x-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` |
    • Width `100% - (2 * 56px)`
    • Margin `2 * 56px`
    • Gutter `32px`
    |
    • Width `100% - (2 * 80px)`
    • Max-width `1520px`
    • Margin `2 * 80px`
    • Gutter `32px`
    |
    • Width `1520px`
    • Margin `2 * 80px`
    • Gutter `32px`
    | +| `.container-fluid` |
    • Width `100% - (2 * 56px)`
    • Margin `2 * 56px`
    • Gutter `32px`
    |
    • Width `100% - (2 * 80px)`
    • Margin `2 * 80px`
    • Gutter `32px`
    |
    • Width `100% - (2 * 112px)`
    • Margin `2 * 112px`
    • Gutter `40px`
    | +{{< /bs-table >}} + +### Custom max width + +If necessary, in specific cases, you can define a custom maximum width for the fluid container by overriding the `$ouds-size-max-width-grid-grid` variable before importing the OUDS Web SCSS files. + +This adjustment will apply to all containers using the `.container-max-width`class, ensuring that your layout stays within the specific width. Once the layout exceeds the `$ouds-size-max-width-grid-grid` value at larger breakpoints, the container's margins and gutter values will remain unchanged. + +```scss +@import "../node_modules/ouds-web/scss/functions"; + +$ouds-size-max-width-grid-grid: 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..a98d0b3d65 100644 --- a/site/content/docs/0.0/layout/grid.md +++ b/site/content/docs/0.0/layout/grid.md @@ -1,11 +1,685 @@ --- 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-fluid`. + +## 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-fluid` for a responsive container of `width: 100%` across all viewports and devices. + +- **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: + +- 2x-small (2xs) +- X-small (xs) +- Small (sm) +- Medium (md) +- Large (lg) +- X-large (xl) +- 2x-large (2xl) +- 3x-large (3xl) + +As noted above, each of these breakpoints have their own 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 fluid max-width100vw -
    (2 * 16px)    		100vw -
    (2 * 24px)    		100vw -
    (2 * 28px)    		100vw -
    (2 * 32px)    		100vw -
    (2 * 40px)    		100vw -
    (2 * 56px)    		100vw -
    (2 * 80px)    		100vw -
    (2 * 112px)
    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. + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + 2xs
    + <390px +     		+ xs
    + ≥390px +     		+ sm
    + ≥480px +     		+ md
    + ≥736px +     		+ lg
    + ≥1024px +     		+ xl
    + ≥1320px +     		+ 2xl or xxl
    + ≥1640px +     		+ 3xl
    + ≥1880px +
    Container max-width100vw -
    (2 * 16px)    		342px424px672px944px1208px1480px1656px
    Class prefix.col-.col-xs-.col-sm-.col-md-.col-lg-.col-xl-.col-2xl- or .col-xxl-.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 >}} + +## 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 x-small to 3x-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 doesn't rely on a single value for grid gutters via `$grid-gutter-width`; instead, it uses a map of values called `$grid-gutter-widths`, which 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`, `$container-max-widths`, `$grid-gutter-widths`, and `$container-fluid-margin` 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: 16px, + sm: 16px, + md: 24px, + lg: 24px +); +``` + +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..09df44003d 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -41,6 +41,20 @@ Technically, it means that you can get rid of the following things: - `orange-helvetica.*.css` file (default, RTL, or minified version). - If you were customizing your Sass compilation, you can remove the `@import "orange-helvetica";` line from your Sass files if it was there. +## Layout + +- Breaking Responsive breakpoints have changed: + - `2xs` and `3xl` have been added. + - `xxl` has been renamed to `2xl`. + - The breakpoints values have changed. Please refer to the [breakpoints' documentation]({{< docsref "/layout/breakpoints/" >}}). + - The default container to use is now `.container-fluid` associated to `.container-max-width` instead of `.container-xxl`. Please refer to the [fluid containers' documentation]({{< docsref "/layout/containers/#fluid-containers" >}}). + - Default gutter inside grid has been changed to have a fully responsive behavior. It should be a transparent change for you. + + All responsive classes, helpers, and utilities have been updated accordingly to match the new breakpoints. + +- Info `.container` and `.container-{breakpoint}` have been removed from the default build but you can still have them using `$enable-bootstrap-compatibility`. +- Info `xxl` breakpoint and thus all related classes (like `.container-xxl`, `.col-xxl-*`) can still be available when `$enable-bootstrap-compatibility` is enabled. + ## Components ### Close button @@ -53,6 +67,13 @@ 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. +## Helpers + +### Position + +- Breaking Responsive sticky helpers `.sticky-xxl-{top|bottom}` have been removed and replaced by their equivalent `.sticky-2xl-{top|bottom}`. You can still have them using `$enable-bootstrap-compatibility`. +- New Responsive sticky helpers: `.sticky-xs-{top|bottom}`, `.sticky-2xl-{top|bottom}` and `.sticky-3xl-{top|bottom}`. + ## Utilities ### Border @@ -81,6 +102,27 @@ Technically, it means that you can get rid of the following things: - New Border style utilities: `.border-drag`. +### Display + +- Breaking `.d-xxl-{value}` responsive display utility has been replaced by `.d-2xl-{value}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). You can still have it using `$enable-bootstrap-compatibility`. +- 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" >}}). + +### 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" >}}). You can still have them using `$enable-bootstrap-compatibility`. +- 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" >}}). + +### 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" >}}). You can still have it using `$enable-bootstrap-compatibility`. +- 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" >}}). + +### 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" >}}). You can still have them using `$enable-bootstrap-compatibility`. +- 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`. @@ -92,6 +134,10 @@ Technically, it means that you can get rid of the following things: - 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 [Grid system example]({{< docsref "/examples/grid-system" >}}). + ## CSS and Sass variables - New `$enable-bootstrap-compatibility` option set to `false` by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode. @@ -199,6 +245,50 @@ 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-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-lg-column-gap
    • +
  • $ouds-grid-lg-margin
    • +
  • $ouds-grid-lg-min-width
    • +
  • $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-size-max-width-grid-grid
    • +
  • $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-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-opacity-0
  • $ouds-opacity-100
  • $ouds-opacity-300
    • @@ -217,6 +307,7 @@ Technically, it means that you can get rid of the following things: -
    New Sass maps:
      +
    • $grid-gutter-widths
    • $ouds-border-radiuses
    • $ouds-border-styles
    • $ouds-border-widths
      • @@ -225,6 +316,13 @@ Technically, it means that you can get rid of the following things:
    +-
    + New Sass mixins: +
      +
    • get-breakpoint-from-width()
      • +
    +
    + -
    New keys in $utilities map:
      @@ -246,7 +344,14 @@ Technically, it means that you can get rid of the following things:
    -
    - Warning Dropped deprecated Sass variables: + New CSS variable: +
      +
    • --bs-container-margin-x
      • +
    +
    + +-
    + Warning Dropped Sass variables:
    • $boosted-prefix
    • $boosted-variable-prefix
      • @@ -263,6 +368,7 @@ Technically, it means that you can get rid of the following things:
    • $form-star-focus-color-dark
    • $form-star-focus-outline
    • $form-star-focus-outline-dark
      • +
    • $grid-gutter-breakpoint
    • $orange-filter
    • $outline-offset
    • $outline-width
      • @@ -272,7 +378,7 @@ Technically, it means that you can get rid of the following things:
    -
    - Warning Dropped deprecated CSS variables: + Warning Dropped CSS variables:
    • --bs-btn-close-active-border-color
    • --bs-btn-close-active-color
      • @@ -298,7 +404,13 @@ Technically, it means that you can get rid of the following things:
    • --bs-box-shadow-inset
    • --bs-box-shadow-lg
    • --bs-box-shadow-sm
      • +
    +
    +-
    + Warning Dropped Sass mixins: +
      +
    • make-container-fluid-margin()
    @@ -321,3 +433,5 @@ Technically, it means that you can get rid of the following things:
  • shadow
+ +- Warning Signature of `make-row($gutter, $gutter-sm)` is now `make-row($gutter)`. diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md index cb0e7f3558..e52f40efb2 100644 --- a/site/content/docs/0.0/migration.md +++ b/site/content/docs/0.0/migration.md @@ -11,8 +11,29 @@ 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 system with `.row` + - Column system with classes: `.col-{number}`, `.col-{breakpoint}-{number}`, and `.offset-{breakpoint}-{number}` + - Row columns classes: `.row-cols-{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 +#### API + +- New The `responsive` option is now available in the API to indicate if responsive classes should be generated. + #### Border - New Border operative utilities: `.border`, `.border-none`, `.border-top`, `.border-top-none`, `.border-bottom`, `.border-bottom-none`, `.border-start`, `.border-start-none`, `.border-end` and `.border-end-none`. @@ -30,6 +51,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 +77,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 [Grid example]({{< docsref "/examples/grid" >}}). + +- New New [Grid system example]({{< 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 @@ -53,9 +97,15 @@ toc: true ```
+- New `$enable-container-classes` to enable or disable the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). + -
New Sass variables:
    +
  • $enable-container-classes
    • +
  • $grid-columns
    • +
  • $grid-gutter-width
    • +
  • $grid-row-columns
  • $ouds-border-base
  • $ouds-border-radius-0
  • $ouds-border-radius-75
    • @@ -138,6 +188,50 @@ 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-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-lg-column-gap
    • +
  • $ouds-grid-lg-margin
    • +
  • $ouds-grid-lg-min-width
    • +
  • $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-size-max-width-grid-grid
    • +
  • $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-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-opacity-medium
  • $ouds-opacity-opaque
  • $ouds-opacity-strong
    • @@ -150,6 +244,11 @@ toc: true -
    New Sass maps:
      +
    • $container-fluid-margin
      • +
    • $container-max-widths
      • +
    • $grid-breakpoints
      • +
    • $grid-gutter-widths
      • +
    • $gutters
    • $ouds-border-radiuses
    • $ouds-border-styles
    • $ouds-border-widths
      • @@ -157,6 +256,26 @@ toc: true
    +-
    + New Sass mixins: +
      +
    • breakpoint-infix()
      • +
    • breakpoint-min()
      • +
    • breakpoint-max()
      • +
    • breakpoint-next()
      • +
    • get-breakpoint-from-width()
      • +
    • make-container()
      • +
    • make-col()
      • +
    • make-col-offset()
      • +
    • make-col-ready()
      • +
    • make-row()
      • +
    • media-breakpoint-between()
      • +
    • media-breakpoint-down()
      • +
    • media-breakpoint-only()
      • +
    • media-breakpoint-up()
      • +
    +
    + -
    New keys in $utilities map:
      @@ -176,6 +295,13 @@ toc: true
    +-
    + New CSS variable: +
      +
    • --bs-container-margin-x
      • +
    +
    + -
    Breaking CSS variables only available when $enable-bootstrap-compatibility is on:
      diff --git a/site/content/docs/0.0/utilities/api.md b/site/content/docs/0.0/utilities/api.md index 6ba9e1fc23..0425015bac 100644 --- a/site/content/docs/0.0/utilities/api.md +++ b/site/content/docs/0.0/utilities/api.md @@ -25,9 +25,9 @@ The `$utilities` map contains all our utilities and is later merged with your cu | [`css-variable-name`](#css-variable-utilities) | Optional | null | Custom un-prefixed name for the CSS variable inside the ruleset. | | [`local-vars`](#local-css-variables) | Optional | null | Map of local CSS variables to generate in addition to the CSS rules. | | [`state`](#states) | Optional | null | List of pseudo-class variants (e.g., `:hover` or `:focus`) to generate. | +| [`responsive`](#responsive) | Optional | `false` | Boolean indicating if responsive classes should be generated. | | [`print`](#print) | Optional | `false` | Boolean indicating if print classes need to be generated. | | `rtl` | Optional | `true` | Boolean indicating if utility should be kept in RTL. | - {{< /bs-table >}} @@ -91,7 +91,7 @@ As a list: +As a map, like with [`opacity` Bootstrap utilities]({{< docsref "/utilities/opacity" >}}): ```scss values: ( @@ -258,7 +258,7 @@ Output: .opacity-100-hover:hover { opacity: 1 !important; } ``` - + +@media (min-width: 1880px) { + .opacity-3xl-0 { opacity: 0 !important; } + .opacity-3xl-25 { opacity: .25 !important; } + .opacity-3xl-50 { opacity: .5 !important; } + .opacity-3xl-75 { opacity: .75 !important; } + .opacity-3xl-100 { opacity: 1 !important; } +} +``` ### Print @@ -388,7 +404,7 @@ $utilities: ( ); ``` - +``` - +``` - + +@media (min-width: 1880px) { + .border-3xl { ... } + .border-3xl-none { ... } +} +``` - +``` - +``` #### Remove utility in RTL diff --git a/site/content/docs/0.0/utilities/display.md b/site/content/docs/0.0/utilities/display.md index b5b6920c2e..d054b00ae4 100644 --- a/site/content/docs/0.0/utilities/display.md +++ b/site/content/docs/0.0/utilities/display.md @@ -1,7 +1,7 @@ --- layout: docs title: Display property -description: Quickly toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing. +description: Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing. group: utilities aliases: - "/docs/utilities/display/" @@ -10,16 +10,16 @@ toc: true ## How it works -Change the value of the [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) with our display utility classes. We purposely support only a subset of all possible values for `display`. Classes can be combined for various effects as you need. +Change the value of the [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) with our responsive display utility classes. We purposely support only a subset of all possible values for `display`. Classes can be combined for various effects as you need. ## Notation - +Display utility classes that apply to all [breakpoints]({{< docsref "/layout/breakpoints" >}}), from `2xs` to `3xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation. -The classes are named using the format: +As such, the classes are named using the format: -- `.d-{value}` - +- `.d-{value}` for `2xs` +- `.d-{breakpoint}-{value}` for `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, and `3xl`. Where *value* is one of: @@ -37,7 +37,7 @@ Where *value* is one of: The display values can be altered by changing the `display` values defined in `$utilities` and recompiling the SCSS. - +The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, `2xl`, and `3xl` screens. Use display classes for showing and hiding elements. +For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size. -To hide elements simply use the `.d-none` class. +To hide elements simply use the `.d-none` class or one of the `.d-{xs,sm,md,lg,xl,2xl,3xl}-none` classes for any responsive screen variation. - +To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-2xl-none` will hide the element for all screen sizes except on medium and large devices. {{< bs-table >}} | Screen size | Class | | --- | --- | | Hidden on all | `.d-none` | | Visible on all | `.d-block` | - - +| Visible only on xl | `.d-none .d-xl-block .d-2xl-none` | +| Visible only on 2xl | `.d-none .d-2xl-block .d-3xl-none` | +| Visible only on 3xl | `.d-none .d-3xl-block` | {{< /bs-table >}} - +{{< /example >}} ## Display in print -Change the `display` value of elements when printing with our print display utility classes. Includes support for the same `display` values as our `.d-*` utilities. +Change the `display` value of elements when printing with our print display utility classes. Includes support for the same `display` values as our responsive `.d-*` utilities. - `.d-print-none` - `.d-print-inline` @@ -104,7 +108,7 @@ The print and display classes can be combined. {{< example >}}
      Screen Only (Hide on print only)
      Print Only (Hide on screen only)
      - +
      Hide up to large on screen, but always show on print
      {{< /example >}} ## CSS diff --git a/site/content/docs/0.0/utilities/flex.md b/site/content/docs/0.0/utilities/flex.md index 4c4dc9cbf9..63d5b78e41 100644 --- a/site/content/docs/0.0/utilities/flex.md +++ b/site/content/docs/0.0/utilities/flex.md @@ -20,7 +20,7 @@ Apply `display` utilities to create a flexbox container and transform **direct c
      I'm an inline flexbox container!
      {{< /example >}} - +{{< /markdown >}} ## Direction @@ -65,7 +65,7 @@ Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to st
{{< /example >}} - +{{< /markdown >}} ## Justify content @@ -124,7 +124,7 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
...
``` - +{{< /markdown >}} ## Align items @@ -179,7 +179,7 @@ Use `align-items` utilities on flexbox containers to change the alignment of fle
...
``` - +{{< /markdown >}} ## Align self @@ -233,7 +233,7 @@ Use `align-self` utilities on flexbox items to individually change their alignme
Aligned flex item
``` - +{{< /markdown >}} ## Fill @@ -259,7 +259,7 @@ Use the `.flex-fill` class on a series of sibling elements to force them into wi
{{< /example >}} - +{{< /markdown >}} ## Grow and shrink @@ -290,7 +290,7 @@ Use `.flex-shrink-*` utilities to toggle a flex item's ability to shrink if nece
{{< /example >}} - +{{< /markdown >}} ## Auto margins @@ -414,7 +414,7 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all ( ``` - +{{< /markdown >}} ## Order @@ -438,7 +438,7 @@ Change the _visual_ order of specific flex items with a handful of `order` utili
{{< /example >}} - +{{< /markdown >}} ## Align content @@ -614,7 +614,7 @@ Use `align-content` utilities on flexbox containers to align flex items _togethe
...
``` - +{{< /markdown >}} ## Media object diff --git a/site/content/docs/0.0/utilities/float.md b/site/content/docs/0.0/utilities/float.md index ed8baa0aa9..98dea0ac51 100644 --- a/site/content/docs/0.0/utilities/float.md +++ b/site/content/docs/0.0/utilities/float.md @@ -20,16 +20,18 @@ These utility classes float an element to the left or right, or disable floating Use the [clearfix helper]({{< docsref "/helpers/clearfix" >}}) on a parent element to clear floats. - +{{< /markdown >}} ## CSS diff --git a/site/content/docs/0.0/utilities/object-fit.md b/site/content/docs/0.0/utilities/object-fit.md index daa13b29cd..ed0272a23b 100644 --- a/site/content/docs/0.0/utilities/object-fit.md +++ b/site/content/docs/0.0/utilities/object-fit.md @@ -10,7 +10,7 @@ toc: true ## How it works -Change the value of the [`object-fit` property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) with our `object-fit` utility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible. +Change the value of the [`object-fit` property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) with our responsive `object-fit` utility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible. Classes for the value of `object-fit` are named using the format `.object-fit-{value}`. Choose from the following values: @@ -32,17 +32,19 @@ Add the `object-fit-{value}` class to the [replaced element](https://developer.m {{< placeholder width="140" height="120" class="object-fit-none border" text="Object fit none" markup="img" color="#333" background="#bbb" >}} {{< /example >}} - +{{< placeholder width="140" height="80" class="object-fit-2xl-contain border" text="Contain on 2xl" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="80" class="object-fit-3xl-contain border" text="Contain on 3xl" markup="img" color="#333" background="#bbb" >}} +{{< /example >}} ## Video diff --git a/site/data/breakpoints.yml b/site/data/breakpoints.yml index a5ebde4d45..b06e41b5c7 100644 --- a/site/data/breakpoints.yml +++ b/site/data/breakpoints.yml @@ -1,35 +1,47 @@ -- breakpoint: xs +- breakpoint: 2xs abbr: "" - name: X-Small + name: 2x-small min-width: 0px container: "" +- breakpoint: xs + abbr: -xs + name: X-small + min-width: 390px + container: 342px + - breakpoint: sm abbr: -sm name: Small - min-width: 576px - container: 540px + min-width: 480px + container: 424px - breakpoint: md abbr: -md name: Medium - min-width: 768px - container: 720px + min-width: 736px + container: 672px - breakpoint: lg abbr: -lg name: Large - min-width: 992px - container: 960px + min-width: 1024px + container: 944px - breakpoint: xl abbr: -xl - name: X-Large - min-width: 1200px - container: 1140px + name: X-large + min-width: 1320px + container: 1208px + +- breakpoint: 2xl + abbr: -2xl + name: 2x-large + min-width: 1640px + container: 1480px -- breakpoint: xxl - abbr: -xxl - name: XX-Large - min-width: 1400px - container: 1320px +- breakpoint: 3xl + abbr: -3xl + name: 3x-large + min-width: 1880px + container: 1656px diff --git a/site/data/examples.yml b/site/data/examples.yml index ad126bdef9..b777dab722 100644 --- a/site/data/examples.yml +++ b/site/data/examples.yml @@ -36,3 +36,11 @@ description: "Import and bundle Bootstrap's source Sass and JavaScript with Webpack." url: /examples/tree/main/webpack indexPath: src/index.html + +- category: Framework + description: "Examples that focus on implementing uses of built-in components provided by OUDS Web." + examples: + - name: Grid + description: "Multiple examples of grid layouts with all four tiers, nesting, and more." + - name: Grid system + description: "OUDS Web default grid system illustration." diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 0ad8e510b5..6d4d4b88a6 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -53,17 +53,12 @@ icon_color: body-color pages: - title: Breakpoints - draft: true - title: Containers - draft: true - title: Grid - draft: true - title: Columns - draft: true - title: Gutters draft: true - title: Utilities - draft: true - title: Z-index - title: CSS Grid diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index 540cadc76b..c3d5445747 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -1,6 +1,6 @@ {{ define "body_override" }}{{ end }} {{ define "main" }} -
+