diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss index 0fb2d35aee..468b91dc7d 100644 --- a/scss/tokens/_raw.scss +++ b/scss/tokens/_raw.scss @@ -36,6 +36,12 @@ $ouds-border-width-100: $ouds-border-base !default; // $ouds-border-width-200: $ouds-border-base * 2 !default; // scss-docs-end ouds-raw-border +// Dimension + +// scss-docs-start ouds-raw-dimension +$ouds-dimension-base: 4px !default; +// scss-docs-end ouds-raw-dimension + // Elevation // scss-docs-start ouds-raw-elevation @@ -69,60 +75,55 @@ $ouds-elevation-y-500: 12px !default; // Grid // scss-docs-start ouds-raw-grid -//$ouds-grid-width-100: 360px !default; -//$ouds-grid-width-200: 390px !default; -//$ouds-grid-width-300: 480px !default; -//$ouds-grid-width-400: 768px !default; -//$ouds-grid-width-500: 1024px !default; -//$ouds-grid-width-600: 1440px !default; -//$ouds-grid-width-700: 1680px !default; -//$ouds-grid-width-800: 1920px !default; - -//$ouds-grid-min-width-100: 1px !default; // 2xs -$ouds-grid-min-width-200: 390px !default; // xs -$ouds-grid-min-width-300: 480px !default; // sm -$ouds-grid-min-width-400: 736px !default; // md -$ouds-grid-min-width-500: 1024px !default; // lg -$ouds-grid-min-width-600: 1320px !default; // xl -$ouds-grid-min-width-700: 1640px !default; // xxl -$ouds-grid-min-width-800: 1880px !default; // 3xl - -//$ouds-grid-max-width-100: 389px !default; -//$ouds-grid-max-width-200: 479px !default; -//$ouds-grid-max-width-300: 735px !default; -//$ouds-grid-max-width-400: 1023px !default; -//$ouds-grid-max-width-500: 1319px !default; -//$ouds-grid-max-width-600: 1639px !default; +// $ouds-grid-column-count-100: 1px !default; +// $ouds-grid-column-count-200: 2px !default; +$ouds-grid-column-count-400: 4px !default; +$ouds-grid-column-count-600: 6px !default; +// $ouds-grid-column-count-800: 8px !default; +// $ouds-grid-column-count-1000: 10px !default; +$ouds-grid-column-count-1200: 12px !default; +$ouds-grid-max-width-100: 389px !default; +$ouds-grid-max-width-200: 479px !default; +$ouds-grid-max-width-300: 735px !default; +$ouds-grid-max-width-400: 1023px !default; +$ouds-grid-max-width-500: 1319px !default; +$ouds-grid-max-width-600: 1639px !default; $ouds-grid-max-width-650: 1680px !default; -//$ouds-grid-max-width-700: 1879px !default; +$ouds-grid-max-width-700: 1879px !default; $ouds-grid-max-width-800: 1920px !default; - -$ouds-grid-margin-100: 16px !default; -$ouds-grid-margin-300: 24px !default; -$ouds-grid-margin-400: 28px !default; -$ouds-grid-margin-500: 32px !default; -//$ouds-grid-margin-600: 36px !default; -$ouds-grid-margin-700: 40px !default; -//$ouds-grid-margin-1000: 52px !default; -$ouds-grid-margin-1100: 56px !default; -$ouds-grid-margin-1700: 80px !default; -$ouds-grid-margin-2500: 112px !default; - -//$ouds-grid-column-gap-10: 1px !default; -$ouds-grid-column-gap-100: 8px !default; -$ouds-grid-column-gap-200: 16px !default; -//$ouds-grid-column-gap-300: 20px !default; -$ouds-grid-column-gap-400: 24px !default; -$ouds-grid-column-gap-600: 32px !default; -$ouds-grid-column-gap-800: 40px !default; - -//$ouds-grid-column-count-100: 1px !default; -//$ouds-grid-column-count-200: 2px !default; -//$ouds-grid-column-count-400: 4px !default; -//$ouds-grid-column-count-600: 6px !default; -//$ouds-grid-column-count-800: 8px !default; -//$ouds-grid-column-count-1000: 10px !default; -//$ouds-grid-column-count-1200: 12px !default; +$ouds-grid-min-width-100: 1px !default; +$ouds-grid-min-width-200: 390px !default; +$ouds-grid-min-width-300: 480px !default; +$ouds-grid-min-width-400: 736px !default; +$ouds-grid-min-width-500: 1024px !default; +$ouds-grid-min-width-600: 1320px !default; +$ouds-grid-min-width-700: 1640px !default; +$ouds-grid-min-width-800: 1880px !default; +$ouds-grid-width-100: 360px !default; +$ouds-grid-width-200: 390px !default; +$ouds-grid-width-300: 480px !default; +$ouds-grid-width-400: 768px !default; +$ouds-grid-width-500: 1024px !default; +$ouds-grid-width-600: 1440px !default; +$ouds-grid-width-700: 1680px !default; +$ouds-grid-width-800: 1920px !default; +// $ouds-grid-column-gap-10: $ouds-dimension-base * .25 !default; // 1 +$ouds-grid-column-gap-100: $ouds-dimension-base * 2 !default; // 8 +$ouds-grid-column-gap-200: $ouds-dimension-base * 4 !default; // 16 +// $ouds-grid-column-gap-300: $ouds-dimension-base * 5 !default; // 20 +$ouds-grid-column-gap-400: $ouds-dimension-base * 6 !default; // 24 +$ouds-grid-column-gap-600: $ouds-dimension-base * 8 !default; // 32 +$ouds-grid-column-gap-800: $ouds-dimension-base * 10 !default; // 40 +$ouds-grid-margin-100: $ouds-dimension-base * 4 !default; // 16 +$ouds-grid-margin-300: $ouds-dimension-base * 6 !default; // 24 +$ouds-grid-margin-400: $ouds-dimension-base * 7 !default; // 28 +$ouds-grid-margin-500: $ouds-dimension-base * 8 !default; // 32 +// $ouds-grid-margin-600: $ouds-dimension-base * 9 !default; // 36 +$ouds-grid-margin-700: $ouds-dimension-base * 10 !default; // 40 +// $ouds-grid-margin-1000: $ouds-dimension-base * 13 !default; // 52 +$ouds-grid-margin-1100: $ouds-dimension-base * 14 !default; // 56 +$ouds-grid-margin-1700: $ouds-dimension-base * 20 !default; // 80 +$ouds-grid-margin-2500: $ouds-dimension-base * 28 !default; // 112 // scss-docs-end ouds-raw-grid // Opacity diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss index f4ae7db76f..06e1fb77fa 100644 --- a/scss/tokens/_semantic.scss +++ b/scss/tokens/_semantic.scss @@ -80,62 +80,55 @@ $ouds-elevation-y-sticky-navigation-scrolled: $ouds-elevation-y-300 !default; // Grid // scss-docs-start ouds-semantic-grid -//$ouds-grid-2xs-width: $ouds-grid-width-100 !default; -//$ouds-grid-2xs-min-width: $ouds-grid-min-width-100 !default; -//$ouds-grid-2xs-max-width: $ouds-grid-max-width-100 !default; -$ouds-grid-2xs-margin: $ouds-grid-margin-100 !default; -$ouds-grid-2xs-column-gap: $ouds-grid-column-gap-100 !default; -//$ouds-grid-2xs-column-count: $ouds-grid-column-count-400 !default; - -//$ouds-grid-xs-width: $ouds-grid-width-200 !default; -$ouds-grid-xs-min-width: $ouds-grid-min-width-200 !default; -//$ouds-grid-xs-max-width: $ouds-grid-max-width-200 !default; -$ouds-grid-xs-margin: $ouds-grid-margin-300 !default; -$ouds-grid-xs-column-gap: $ouds-grid-column-gap-200 !default; -//$ouds-grid-xs-column-count: $ouds-grid-column-count-400 !default; - -//$ouds-grid-sm-width: $ouds-grid-width-300 !default; -$ouds-grid-sm-min-width: $ouds-grid-min-width-300 !default; -//$ouds-grid-sm-max-width: $ouds-grid-max-width-300 !default; -$ouds-grid-sm-margin: $ouds-grid-margin-400 !default; -$ouds-grid-sm-column-gap: $ouds-grid-column-gap-200 !default; -//$ouds-grid-sm-column-count: $ouds-grid-column-count-400 !default; - -//$ouds-grid-md-width: $ouds-grid-width-400 !default; -$ouds-grid-md-min-width: $ouds-grid-min-width-400 !default; -//$ouds-grid-md-max-width: $ouds-grid-max-width-400 !default; -$ouds-grid-md-margin: $ouds-grid-margin-500 !default; -$ouds-grid-md-column-gap: $ouds-grid-column-gap-400 !default; -//$ouds-grid-md-column-count: $ouds-grid-column-count-600 !default; - -//$ouds-grid-lg-width: $ouds-grid-width-500 !default; -$ouds-grid-lg-min-width: $ouds-grid-min-width-500 !default; -//$ouds-grid-lg-max-width: $ouds-grid-max-width-500 !default; -$ouds-grid-lg-margin: $ouds-grid-margin-700 !default; -$ouds-grid-lg-column-gap: $ouds-grid-column-gap-400 !default; -//$ouds-grid-lg-column-count: $ouds-grid-column-count-600 !default; - -//$ouds-grid-xl-width: $ouds-grid-width-600 !default; -$ouds-grid-xl-min-width: $ouds-grid-min-width-600 !default; -//$ouds-grid-xl-max-width: $ouds-grid-max-width-600 !default; -$ouds-grid-xl-margin: $ouds-grid-margin-1100 !default; -$ouds-grid-xl-column-gap: $ouds-grid-column-gap-600 !default; -//$ouds-grid-xl-column-count: $ouds-grid-column-count-1200 !default; - -//$ouds-grid-2xl-width: $ouds-grid-width-700 !default; -$ouds-grid-2xl-min-width: $ouds-grid-min-width-700 !default; -//$ouds-grid-2xl-max-width-specific-tools: $ouds-grid-max-width-700 !default; -$ouds-grid-2xl-max-width-public-website: $ouds-grid-max-width-650 !default; -$ouds-grid-2xl-margin: $ouds-grid-margin-1700 !default; -$ouds-grid-2xl-column-gap: $ouds-grid-column-gap-600 !default; -//$ouds-grid-2xl-column-count: $ouds-grid-column-count-1200 !default; - -//$ouds-grid-3xl-width: $ouds-grid-width-800 !default; -$ouds-grid-3xl-min-width: $ouds-grid-min-width-800 !default; -$ouds-grid-3xl-max-width: $ouds-grid-max-width-800 !default; -$ouds-grid-3xl-margin: $ouds-grid-margin-2500 !default; -$ouds-grid-3xl-column-gap: $ouds-grid-column-gap-800 !default; -//$ouds-grid-3xl-column-count: $ouds-grid-column-count-1200 !default; +// $ouds-grid-2xl-column-count: $ouds-grid-column-count-1200 !default; +$ouds-grid-2xl-column-gap: $ouds-grid-column-gap-600 !default; +$ouds-grid-2xl-margin: $ouds-grid-margin-1700 !default; +$ouds-grid-2xl-max-width-public-website: $ouds-grid-max-width-650 !default; +// $ouds-grid-2xl-max-width-specific-tools: $ouds-grid-max-width-700 !default; +$ouds-grid-2xl-min-width: $ouds-grid-min-width-700 !default; +// $ouds-grid-2xl-width: $ouds-grid-width-700 !default; +// $ouds-grid-2xs-column-count: $ouds-grid-column-count-400 !default; +$ouds-grid-2xs-column-gap: $ouds-grid-column-gap-100 !default; +$ouds-grid-2xs-margin: $ouds-grid-margin-100 !default; +// $ouds-grid-2xs-max-width: $ouds-grid-max-width-100 !default; +// $ouds-grid-2xs-min-width: $ouds-grid-min-width-100 !default; +// $ouds-grid-2xs-width: $ouds-grid-width-100 !default; +// $ouds-grid-3xl-column-count: $ouds-grid-column-count-1200 !default; +$ouds-grid-3xl-column-gap: $ouds-grid-column-gap-800 !default; +$ouds-grid-3xl-margin: $ouds-grid-margin-2500 !default; +$ouds-grid-3xl-max-width: $ouds-grid-max-width-800 !default; +$ouds-grid-3xl-min-width: $ouds-grid-min-width-800 !default; +// $ouds-grid-3xl-width: $ouds-grid-width-800 !default; +// $ouds-grid-lg-column-count: $ouds-grid-column-count-600 !default; +$ouds-grid-lg-column-gap: $ouds-grid-column-gap-400 !default; +$ouds-grid-lg-margin: $ouds-grid-margin-700 !default; +// $ouds-grid-lg-max-width: $ouds-grid-max-width-500 !default; +$ouds-grid-lg-min-width: $ouds-grid-min-width-500 !default; +// $ouds-grid-lg-width: $ouds-grid-width-500 !default; +// $ouds-grid-md-column-count: $ouds-grid-column-count-600 !default; +$ouds-grid-md-column-gap: $ouds-grid-column-gap-400 !default; +$ouds-grid-md-margin: $ouds-grid-margin-500 !default; +// $ouds-grid-md-max-width: $ouds-grid-max-width-400 !default; +$ouds-grid-md-min-width: $ouds-grid-min-width-400 !default; +// $ouds-grid-md-width: $ouds-grid-width-400 !default; +// $ouds-grid-sm-column-count: $ouds-grid-column-count-400 !default; +$ouds-grid-sm-column-gap: $ouds-grid-column-gap-200 !default; +$ouds-grid-sm-margin: $ouds-grid-margin-400 !default; +// $ouds-grid-sm-max-width: $ouds-grid-max-width-300 !default; +$ouds-grid-sm-min-width: $ouds-grid-min-width-300 !default; +// $ouds-grid-sm-width: $ouds-grid-width-300 !default; +// $ouds-grid-xl-column-count: $ouds-grid-column-count-1200 !default; +$ouds-grid-xl-column-gap: $ouds-grid-column-gap-600 !default; +$ouds-grid-xl-margin: $ouds-grid-margin-1100 !default; +// $ouds-grid-xl-max-width: $ouds-grid-max-width-600 !default; +$ouds-grid-xl-min-width: $ouds-grid-min-width-600 !default; +// $ouds-grid-xl-width: $ouds-grid-width-600 !default; +// $ouds-grid-xs-column-count: $ouds-grid-column-count-400 !default; +$ouds-grid-xs-column-gap: $ouds-grid-column-gap-200 !default; +$ouds-grid-xs-margin: $ouds-grid-margin-300 !default; +// $ouds-grid-xs-max-width: $ouds-grid-max-width-200 !default; +$ouds-grid-xs-min-width: $ouds-grid-min-width-200 !default; +// $ouds-grid-xs-width: $ouds-grid-width-200 !default; // scss-docs-end ouds-semantic-grid // Opacity diff --git a/site/content/docs/0.0/examples/fake/fake.css b/site/content/docs/0.0/examples/fake/fake.css deleted file mode 100644 index 6ee53d9ae9..0000000000 --- a/site/content/docs/0.0/examples/fake/fake.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - color: #fd0; -} diff --git a/site/content/docs/0.0/examples/fake/index.html b/site/content/docs/0.0/examples/fake/index.html deleted file mode 100644 index cf83ee4cec..0000000000 --- a/site/content/docs/0.0/examples/fake/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: examples -title: Fake -extra_css: - - "fake.css" -aliases: - - "/examples/fake" - - "/docs/examples/fake" ---- diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md index dfaeb4e341..cd96507f65 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -59,12 +59,22 @@ Technically, it means that you can get rid of the following things: - `xxl` has been renamed `2xl`. - `2xs` and `3xl` have been added. - The breakpoints values have changed. Please refer to the [breakpoints' documentation]({{< docsref "/layout/breakpoints/" >}}). + - `.col-{breakpoint}-{number}`, `.g-col-{} - The default container to use is now `.container-fluid` associated to `.max-width-public-website` or `.max-width-specific-tools` instead of `.container-xxl`. Please refer to the [fluid containers' documentation]({{< docsref "/layout/containers/#fluid-containers" >}}). + - Default gutter inside grid have been changed to have a fully responsive behavior. It should be a transparent change for you. + - All gutter utilities have been changed. `.g{-breakpoint}-{value}`, `.gx{-breakpoint}-{value}` and `.gy{-breakpoint}-{value}` which value is inside `0|1|2|3|4|5`. Gutter utilities values now use `none|smash|shortest|shorter|short|medium|tall|taller|tallest|spacious|huge|jumbo`. Proportional equivalence between `0` → `none`, `1` → `shortest`, `2` → `shorter`, `3` → `medium`, `4` → `tall`, `5` → `spacious`. All responsive classes, helpers and utilities have been changed accordingly to the new breakpoints. - Info `xxl` breakpoint and thus all related classes (like `.container-xxl`) can still be available when $enable-bootstrap-compatibility is on. +## Helpers + +### Position + +- Breaking Responsive sticky helpers `.sticky-xxl-{top|bottom}` have been removed and replaced by their equivalent `.sticky-2xl-{top|bottom}`. +- New Responsive sticky helpers: `.sticky-xs-{top|bottom}`, `.sticky-2xl-{top|bottom}` and `.sticky-3xl-{top|bottom}`. + ## Utilities ### Border @@ -132,6 +142,10 @@ Technically, it means that you can get rid of the following things: `shadow-none`, `shadow-raised`, `shadow-drag`, `shadow-overlay-default`, `shadow-overlay-emphasized`, `shadow-sticky-default`, `shadow-sticky-emphasized`, `shadow-sticky-navigation-scrolled` and `shadow-focus`. - Info `.shadow-{|sm|lg}` utilities can still be available when $enable-bootstrap-compatibility is on. +## Examples + +- New New OUDS Web [example for the usable grids]({{< docsref "/examples/grid-system" >}}). + ## CSS and Sass variables - New `$enable-bootstrap-compatibility` option set to `false` by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode. @@ -244,6 +258,53 @@ Technically, it means that you can get rid of the following things:
  • $ouds-elevation-y-sticky-default
  • $ouds-elevation-y-sticky-emphasized
  • $ouds-elevation-y-sticky-navigation-scrolled
    • +
  • $ouds-grid-2xl-column-gap
    • +
  • $ouds-grid-2xl-margin
    • +
  • $ouds-grid-2xl-max-width-public-website
    • +
  • $ouds-grid-2xl-min-width
    • +
  • $ouds-grid-2xs-column-gap
    • +
  • $ouds-grid-2xs-margin
    • +
  • $ouds-grid-3xl-column-gap
    • +
  • $ouds-grid-3xl-margin
    • +
  • $ouds-grid-3xl-max-width
    • +
  • $ouds-grid-3xl-min-width
    • +
  • $ouds-grid-column-gap-100
    • +
  • $ouds-grid-column-gap-200
    • +
  • $ouds-grid-column-gap-400
    • +
  • $ouds-grid-column-gap-600
    • +
  • $ouds-grid-column-gap-800
    • +
  • $ouds-grid-margin-100
    • +
  • $ouds-grid-margin-1100
    • +
  • $ouds-grid-margin-1700
    • +
  • $ouds-grid-margin-2500
    • +
  • $ouds-grid-margin-300
    • +
  • $ouds-grid-margin-400
    • +
  • $ouds-grid-margin-500
    • +
  • $ouds-grid-margin-700
    • +
  • $ouds-grid-max-width-650
    • +
  • $ouds-grid-max-width-800
    • +
  • $ouds-grid-md-column-gap
    • +
  • $ouds-grid-md-margin
    • +
  • $ouds-grid-md-min-width
    • +
  • $ouds-grid-min-width-200
    • +
  • $ouds-grid-min-width-300
    • +
  • $ouds-grid-min-width-400
    • +
  • $ouds-grid-min-width-500
    • +
  • $ouds-grid-min-width-600
    • +
  • $ouds-grid-min-width-700
    • +
  • $ouds-grid-min-width-800
    • +
  • $ouds-grid-lg-column-gap
    • +
  • $ouds-grid-lg-margin
    • +
  • $ouds-grid-lg-min-width
    • +
  • $ouds-grid-sm-column-gap
    • +
  • $ouds-grid-sm-margin
    • +
  • $ouds-grid-sm-min-width
    • +
  • $ouds-grid-xl-column-gap
    • +
  • $ouds-grid-xl-margin
    • +
  • $ouds-grid-xl-min-width
    • +
  • $ouds-grid-xs-column-gap
    • +
  • $ouds-grid-xs-margin
    • +
  • $ouds-grid-xs-min-width
  • $ouds-opacity-0
  • $ouds-opacity-100
  • $ouds-opacity-300
    • @@ -262,6 +323,7 @@ Technically, it means that you can get rid of the following things: -
    New Sass maps:
    @@ -373,3 +435,5 @@ Technically, it means that you can get rid of the following things:
  • shadow
    • + +- Warning OUDS Web changes the signature of `make-row($gutter, $gutter-sm)` to have `make-row($gutter)`. diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md index abcbbab3db..e086feb184 100644 --- a/site/content/docs/0.0/migration.md +++ b/site/content/docs/0.0/migration.md @@ -15,15 +15,17 @@ toc: true - New Responsive flexbox grid system is now available with eight default responsive tiers defined at breakpoints `2xs`, `xs`, `sm`, `md`, `xl`, `2xl` and `3xl`. - Containers classes: `.container`, `.container-fluid` and `.container-{breakpoint}` + - Limiting classes: `.max-width-public-website` and `.max-width-specific-tools` - Row columns classes: `.row-cols-{number}` - - Column classes: `.col`, `.col-{breakpoint}`, and `.offset-{breakpoint}` + - Column classes: `.col-{number}`, `.col-{breakpoint}-{number}`, and `.offset-{breakpoint}-{number}` - New Responsive css-grid classes: `.g-col-{breakpoint}-{number}`. ### Helpers #### Position -- New Responsive sticky helpers: `.sticky-{breakpoint}-top` and `.sticky-{breakpoint}-bottom`. + +- New Responsive sticky helpers: `.sticky-{breakpoint}-top` and `.sticky-{breakpoint}-bottom` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`. ### Utilities @@ -46,20 +48,20 @@ toc: true #### Display -- New Responsive display utilities: `.d-{breakpoint}-{value}`. +- New Responsive display utilities: `.d-{breakpoint}-{value}` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`. #### Flex -- New Responsive flex utilities: +- 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}`. +- 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}`. +- 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 @@ -70,6 +72,12 @@ toc: true - New Shadows utilities: `shadow-none`, `shadow-raised`, `shadow-drag`, `shadow-overlay-default`, `shadow-overlay-emphasized`, `shadow-sticky-default`, `shadow-sticky-emphasized`, `shadow-sticky-navigation-scrolled` and `shadow-focus`. +### Examples + +- New New OUDS Web [example for the grids]({{< docsref "/examples/grid" >}}). + +- New New OUDS Web [example for the usable grids]({{< docsref "/examples/grid-system" >}}). + ### CSS and Sass variables - New A new file containing maps of token for utilities has been added. If you were using the Sass compilation, you must import this new Sass file before the variables. @@ -174,43 +182,67 @@ 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-max-width-public-website
    • +
  • $ouds-grid-2xl-min-width
    • +
  • $ouds-grid-2xs-column-gap
    • +
  • $ouds-grid-2xs-margin
    • +
  • $ouds-grid-3xl-column-gap
    • +
  • $ouds-grid-3xl-margin
    • +
  • $ouds-grid-3xl-max-width
    • +
  • $ouds-grid-3xl-min-width
    • +
  • $ouds-grid-column-gap-100
    • +
  • $ouds-grid-column-gap-200
    • +
  • $ouds-grid-column-gap-400
    • +
  • $ouds-grid-column-gap-600
    • +
  • $ouds-grid-column-gap-800
    • +
  • $ouds-grid-margin-100
    • +
  • $ouds-grid-margin-1100
    • +
  • $ouds-grid-margin-1700
    • +
  • $ouds-grid-margin-2500
    • +
  • $ouds-grid-margin-300
    • +
  • $ouds-grid-margin-400
    • +
  • $ouds-grid-margin-500
    • +
  • $ouds-grid-margin-700
    • +
  • $ouds-grid-max-width-650
    • +
  • $ouds-grid-max-width-800
    • +
  • $ouds-grid-md-column-gap
    • +
  • $ouds-grid-md-margin
    • +
  • $ouds-grid-md-min-width
    • +
  • $ouds-grid-min-width-200
    • +
  • $ouds-grid-min-width-300
    • +
  • $ouds-grid-min-width-400
    • +
  • $ouds-grid-min-width-500
    • +
  • $ouds-grid-min-width-600
    • +
  • $ouds-grid-min-width-700
    • +
  • $ouds-grid-min-width-800
    • +
  • $ouds-grid-lg-column-gap
    • +
  • $ouds-grid-lg-margin
    • +
  • $ouds-grid-lg-min-width
    • +
  • $ouds-grid-sm-column-gap
    • +
  • $ouds-grid-sm-margin
    • +
  • $ouds-grid-sm-min-width
    • +
  • $ouds-grid-xl-column-gap
    • +
  • $ouds-grid-xl-margin
    • +
  • $ouds-grid-xl-min-width
    • +
  • $ouds-grid-xs-column-gap
    • +
  • $ouds-grid-xs-margin
    • +
  • $ouds-grid-xs-min-width
  • $ouds-opacity-medium
  • $ouds-opacity-opaque
  • $ouds-opacity-strong
  • $ouds-opacity-transparent
  • $ouds-opacity-weak
  • $ouds-opacity-weaker
    • -
  • $ouds-grid-2xs-margin
    • -
  • $ouds-grid-2xs-column-gap
    • -
  • $ouds-grid-xs-min-width
    • -
  • $ouds-grid-xs-margin
    • -
  • $ouds-grid-xs-column-gap
    • -
  • $ouds-grid-sm-min-width
    • -
  • $ouds-grid-sm-margin
    • -
  • $ouds-grid-sm-column-gap
    • -
  • $ouds-grid-md-min-width
    • -
  • $ouds-grid-md-margin
    • -
  • $ouds-grid-md-column-gap
    • -
  • $ouds-grid-lg-min-width
    • -
  • $ouds-grid-lg-margin
    • -
  • $ouds-grid-lg-column-gap
    • -
  • $ouds-grid-xl-min-width
    • -
  • $ouds-grid-xl-margin
    • -
  • $ouds-grid-xl-column-gap
    • -
  • $ouds-grid-2xl-min-width
    • -
  • $ouds-grid-2xl-max-width-public-website
    • -
  • $ouds-grid-2xl-margin
    • -
  • $ouds-grid-2xl-column-gap
    • -
  • $ouds-grid-3xl-min-width
    • -
  • $ouds-grid-3xl-max-width
    • -
  • $ouds-grid-3xl-margin
    • -
  • $ouds-grid-3xl-column-gap
    • -
    New Sass maps:
    -
    - Breaking Dropped Sass variables: + New CSS variable:
    diff --git a/site/data/examples.yml b/site/data/examples.yml index 99f2048e0a..b777dab722 100644 --- a/site/data/examples.yml +++ b/site/data/examples.yml @@ -1,39 +1,39 @@ - category: Starters external: true - description: "Functional examples of using OUDS Web in common JS frameworks like Webpack, Parcel, Vite, and more you can edit in StackBlitz." + description: "Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more you can edit in StackBlitz." examples: - name: CDN starter - description: "Instantly include OUDS Web's compiled CSS and JavaScript via the jsDelivr CDN." + description: "Instantly include Bootstrap's compiled CSS and JavaScript via the jsDelivr CDN." url: /examples/tree/main/starter - name: Sass & JS - description: "Use npm to import and compile OUDS Web's Sass with Autoprefixer and Stylelint, plus our bundled JavaScript." + description: "Use npm to import and compile Bootstrap's Sass with Autoprefixer and Stylelint, plus our bundled JavaScript." url: /examples/tree/main/sass-js - name: Sass & ESM JS - description: "Import and compile OUDS Web's Sass with Autoprefixer and Stylelint, and compile our source JavaScript with an ESM shim." + description: "Import and compile Bootstrap's Sass with Autoprefixer and Stylelint, and compile our source JavaScript with an ESM shim." url: /examples/tree/main/sass-js-esm - - name: OUDS Web color modes - description: "Import and compile OUDS Web's Sass with Stylelint, and the OUDS Web color modes." + - name: Bootstrap color modes + description: "Import and compile Bootstrap's Sass with Stylelint, and the Bootstrap color modes." url: /examples/tree/main/color-modes - - name: OUDS Web Icons - description: "Import and compile OUDS Web's Sass with Stylelint, PurgeCSS, and the OUDS Web Icons web font." + - name: Bootstrap Icons + description: "Import and compile Bootstrap's Sass with Stylelint, PurgeCSS, and the Bootstrap Icons web font." url: /examples/tree/main/icons-font - name: Parcel - description: "Import and bundle OUDS Web's source Sass and JavaScript via Parcel." + description: "Import and bundle Bootstrap's source Sass and JavaScript via Parcel." url: /examples/tree/main/parcel indexPath: src/index.html indexPath: src/index.html - name: React - description: "Import and bundle OUDS Web's source Sass and JavaScript with React, Next.js, and React OUDS Web." + description: "Import and bundle Bootstrap's source Sass and JavaScript with React, Next.js, and React Bootstrap." url: /examples/tree/main/react-nextjs indexPath: src/pages/index.tsx - name: Vite - description: "Import and bundle OUDS Web's source Sass and JavaScript with Vite." + description: "Import and bundle Bootstrap's source Sass and JavaScript with Vite." url: /examples/tree/main/vite - name: Vue - description: "Import and bundle OUDS Web's source Sass and JavaScript with Vue and Vite." + description: "Import and bundle Bootstrap's source Sass and JavaScript with Vue and Vite." url: /examples/tree/main/vue - name: Webpack - description: "Import and bundle OUDS Web's source Sass and JavaScript with Webpack." + description: "Import and bundle Bootstrap's source Sass and JavaScript with Webpack." url: /examples/tree/main/webpack indexPath: src/index.html