diff --git a/scss/_containers.scss b/scss/_containers.scss index 3af155496c..d2a15877cf 100644 --- a/scss/_containers.scss +++ b/scss/_containers.scss @@ -41,22 +41,16 @@ // OUDS mod // scss-docs-start containers-max - .max-width-public-website { - @include media-breakpoint-up(2xl) { - --#{$prefix}container-margin-x: #{$ouds-grid-2xl-margin}; // 80px - max-width: $ouds-grid-2xl-max-width-public-website; // 1680px + .container-max-width { + @include media-breakpoint-up(get-breakpoint-from-width()) { + --#{$prefix}container-margin-x: #{map-get($container-fluid-margin, get-breakpoint-from-width())}; + max-width: $ouds-grid-container-max-width; .row { - --#{$prefix}gutter-x: #{$ouds-grid-2xl-column-gap}; // 32px + --#{$prefix}gutter-x: #{map-get($grid-gutter-widths, get-breakpoint-from-width())}; } } } - - .max-width-specific-tools { - @include media-breakpoint-up(3xl) { - max-width: $ouds-grid-3xl-max-width; // 1920px - } - } // scss-docs-end containers-max // End mod } diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index b4f1e70a68..ec2499ebf7 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -125,3 +125,14 @@ } } } + +// Get the breakpoint infix corresponding to a given width +@function get-breakpoint-from-width($width: $ouds-grid-container-max-width, $breakpoints: $grid-breakpoints) { + $breakpoint-infix: ""; + @each $infix, $value in $grid-breakpoints { + @if $width >= $value { + $breakpoint-infix: $infix; + } + } + @return $breakpoint-infix; +} diff --git a/scss/ouds-web.scss b/scss/ouds-web.scss index ce4c13c43a..aba49c4b0e 100644 --- a/scss/ouds-web.scss +++ b/scss/ouds-web.scss @@ -1,4 +1,5 @@ @import "mixins/banner"; + @include bsBanner(""); // scss-docs-start import-stack @@ -14,7 +15,6 @@ @import "mixins"; @import "utilities"; - // Layout & components @import "root"; @import "reboot"; diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss index 468b91dc7d..50dd7e938f 100644 --- a/scss/tokens/_raw.scss +++ b/scss/tokens/_raw.scss @@ -89,8 +89,8 @@ $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-800: 1920px !default; +//$ouds-grid-max-width-700: 1879px !default; +//$ouds-grid-max-width-800: 1920px !default; $ouds-grid-min-width-100: 1px !default; $ouds-grid-min-width-200: 390px !default; $ouds-grid-min-width-300: 480px !default; diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss index 06e1fb77fa..d0b2b59c6d 100644 --- a/scss/tokens/_semantic.scss +++ b/scss/tokens/_semantic.scss @@ -83,8 +83,6 @@ $ouds-elevation-y-sticky-navigation-scrolled: $ouds-elevation-y-300 !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; @@ -96,7 +94,7 @@ $ouds-grid-2xs-margin: $ouds-grid-margin-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-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; @@ -129,6 +127,7 @@ $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; +$ouds-grid-container-max-width: $ouds-grid-max-width-650 !default; // scss-docs-end ouds-semantic-grid // Opacity diff --git a/site/content/docs/0.0/examples/grid-system/index.html b/site/content/docs/0.0/examples/grid-system/index.html index cd19de8137..79a14507c0 100644 --- a/site/content/docs/0.0/examples/grid-system/index.html +++ b/site/content/docs/0.0/examples/grid-system/index.html @@ -23,7 +23,7 @@
-
+

OUDS Web grid system example

Use this page to see how containers behave while resizing the browser window.

Legend

@@ -32,17 +32,17 @@

Legend

Gutters color (#FFFFFF)

-
+

- Class .container-fluid with class .max-width-public-website

+ Class .container-fluid with class .container-max-width

- To be used for public websites + To be used by default

-
+
@@ -59,39 +59,13 @@

Legend

-
-

Class .container-fluid with class .max-width-specific-tools

+
+

Class .container-fluid

- To be used for specific tools which need more horizontal space -

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-

Class .container-fluid

-

- - - - Should not be used alone to be compatible with Orange Unified Design System + To be used if more space is needed

@@ -111,7 +85,7 @@

Legend

-
+

Class .container

@@ -137,7 +111,7 @@

Legend

-
+

Class .container-xs

@@ -163,7 +137,7 @@

Legend

-
+

Class .container-sm

@@ -189,7 +163,7 @@

Legend

-
+

Class .container-md

@@ -215,7 +189,7 @@

Legend

-
+

Class .container-lg

@@ -241,7 +215,7 @@

Legend

-
+

Class .container-xl

@@ -267,7 +241,7 @@

Legend

-
+

Class .container-2xl

@@ -293,7 +267,7 @@

Legend

-
+

Class .container-3xl

@@ -319,6 +293,6 @@

Legend

-
+
diff --git a/site/content/docs/0.0/examples/grid/index.html b/site/content/docs/0.0/examples/grid/index.html index 5dbfecf737..ec5425758c 100644 --- a/site/content/docs/0.0/examples/grid/index.html +++ b/site/content/docs/0.0/examples/grid/index.html @@ -10,7 +10,7 @@ ---
-
+

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.

@@ -185,7 +185,7 @@

Gutters

-
+

Containers

@@ -201,6 +201,5 @@

Containers

.container-2xl
.container-3xl
.container-fluid
-
.container-fluid with .max-width-public-website
-
.container-fluid with .max-width-specific-tools
+
.container-fluid with .container-max-width
diff --git a/site/content/docs/0.0/helpers/stretched-link.md b/site/content/docs/0.0/helpers/stretched-link.md index dd84df5841..59733d983c 100644 --- a/site/content/docs/0.0/helpers/stretched-link.md +++ b/site/content/docs/0.0/helpers/stretched-link.md @@ -38,7 +38,7 @@ Most custom components do not have `position: relative` by default, so we need t {{< /example >}} {{< example >}} -
+
{{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}}
diff --git a/site/content/docs/0.0/layout/breakpoints.md b/site/content/docs/0.0/layout/breakpoints.md index c2c47e715c..b1082eb1b3 100644 --- a/site/content/docs/0.0/layout/breakpoints.md +++ b/site/content/docs/0.0/layout/breakpoints.md @@ -78,11 +78,11 @@ OUDS Web primarily uses the following media query ranges—or breakpoints—in o // Usage -// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint +// Example: Hide starting at `min-width: 0`, and then show at the `xs` breakpoint .custom-class { display: none; } -@include media-breakpoint-up(sm) { +@include media-breakpoint-up(xs) { .custom-class { display: block; } diff --git a/site/content/docs/0.0/layout/columns.md b/site/content/docs/0.0/layout/columns.md index 3e16f0da42..0d6ef4e0bb 100644 --- a/site/content/docs/0.0/layout/columns.md +++ b/site/content/docs/0.0/layout/columns.md @@ -20,7 +20,7 @@ toc: true - **OUDS Web includes predefined classes for creating fast, responsive layouts.** With [eight breakpoints]({{< docsref "/layout/breakpoints" >}}) (2xs, xs, sm, md, xl, 2xl and 3xl) and a dozen columns at each grid tier, we have dozens of classes already built for you to create your desired layouts. This can be disabled via Sass if you wish. -- **Don't use too small columns for the main grid.** In order to respect the design system, on main site grid, you should only use columns with multiple of **3** for small breakpoints (`2xs`, `xs` and `sm`). You also should use multiple of **2** for medium breakpoints (`2xs`, `xs`, `sm`, `md` and `lg`). +- **Don't use columns that are too small for the main grid.** To align with the design system, for the main site grid, you should only use columns in multiples of **3** for smaller breakpoints (`2xs`, `xs`, and `sm`). For medium and larger breakpoints (`md` and `lg`), use columns in multiples of **2**. {{< bootstrap-compatibility >}} @@ -272,7 +272,7 @@ $utilities: map-merge( ### Offsetting columns -You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{< docsref "/utilities/spacing" >}}). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable. +You can offset grid columns with our responsive `.offset-` grid classes. Grid classes are sized to match columns. #### Offset classes @@ -309,7 +309,7 @@ In addition to column clearing at responsive breakpoints, you may need to reset
{{< /example >}} -#### Margin utilities + ## Standalone column classes diff --git a/site/content/docs/0.0/layout/containers.md b/site/content/docs/0.0/layout/containers.md index 31f07545a6..9a9e34de05 100644 --- a/site/content/docs/0.0/layout/containers.md +++ b/site/content/docs/0.0/layout/containers.md @@ -16,7 +16,7 @@ OUDS Web comes with three different containers: - `.container`, which sets a static `max-width` between each responsive breakpoint. **This container should not be used for Orange sites.** - `.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. **`.container-fluid` is the container recommended for Orange sites in order to be compliant with the Orange brand. It should be associated to `.max-width-public-website` or `.max-width-specific-tools`** (See [Fluid containers](#fluid-containers) for more information). +- `.container-fluid`, which sets the `width: 100%` at all breakpoints. **`.container-fluid` is the container recommended for Orange sites in order to be compliant with the Orange brand. It should be associated to `.container-max-width`** (See [Fluid containers](#fluid-containers) for more information). The table below illustrates how each container's `max-width` compares to the original `.container` and `.container-fluid` across each breakpoint. @@ -89,28 +89,33 @@ Use `.container-fluid` for a full width container with minimum margins, spanning
``` -This container is the default one to use, associated or not with one of the following class: -- `.max-width-public-website` to be used for public websites. 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. -- `.max-width-specific-tools` to be used for specific tools which need more horizontal space. After breakpoint `3xl`, this class: - - limits the container width to 1920px (including margins). +### Default max width -They are defined as follows: +This container is the default one to use, by default associated 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`, `.container-fluid` width `.max-width-public-website` and `.container-fluid` width `.max-width-specific-tools` can be seen in the following table: +Comparison between `.container-fluid` and `.container-fluid` width `.container-max-width` can be seen in the following table: {{< bs-table "table" >}} | | X-Large
≥1320px
| 2X-Large
≥1640px
| 3X-Large
≥1880px
| | --- | --- | --- | --- | --- | | `.container-fluid` | | | | -| `.container-fluid`
with `.max-width-public-website` | | | | -| `.container-fluid`
with `.max-width-specific-tools` | | | | +| `.container-fluid`
with `.container-max-width` | | | | {{< /bs-table >}} +### Custom max width + +You can set a custom maximum width for the fluid container by overloading `$ouds-grid-container-max-width` before importing our OUDS scss files. + +This will affect all containers that have `.container-max-width` and will make sure that your layout does not exceed this value. +When going up the breakpoint above `$ouds-grid-container-max-width` value, the container margins and gutter values are kept as they are. + ## CSS ### Sass variables diff --git a/site/content/docs/0.0/layout/grid.md b/site/content/docs/0.0/layout/grid.md index a185d30b14..db27647089 100644 --- a/site/content/docs/0.0/layout/grid.md +++ b/site/content/docs/0.0/layout/grid.md @@ -46,7 +46,7 @@ Breaking it down, here's how the grid system comes together: - **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-0` is also available to remove gutters. +- **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. diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md index cd96507f65..1339a18efa 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -60,7 +60,7 @@ Technically, it means that you can get rid of the following things: - `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" >}}). + - 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 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`. @@ -260,7 +260,6 @@ Technically, it means that you can get rid of the following things:
  • $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
    • @@ -305,6 +304,7 @@ Technically, it means that you can get rid of the following things:
  • $ouds-grid-xs-column-gap
  • $ouds-grid-xs-margin
  • $ouds-grid-xs-min-width
    • +
  • $ouds-grid-container-max-width
  • $ouds-opacity-0
  • $ouds-opacity-100
  • $ouds-opacity-300
    • @@ -324,6 +324,7 @@ Technically, it means that you can get rid of the following things: New Sass maps: