Merge branch 'ouds/main-his-tokens-grid' into ouds/main-his-tokens-gr…

…id-xxl-compat # Conflicts: # site/content/docs/0.0/migration-from-boosted.md
Orange-OpenSource · Oct 18, 2024 · 4fdcd73 · 4fdcd73
2 parents e2642a9 + 7d4ec9a
commit 4fdcd73
Show file tree

Hide file tree

Showing 24 changed files with 118 additions and 135 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -23,7 +23,7 @@
 
 <main style="background-color: #ff9f9f" data-bs-theme="light">
 
-  <div class="container-fluid max-width-specific-tools mb-3 pt-3">
+  <div class="container-fluid container-max-width mb-3 pt-3">
     <h1>OUDS Web grid system example</h1>
     <p>Use this page to see how containers behave while resizing the browser window.</p>
     <h2>Legend</h2>
@@ -32,17 +32,17 @@ <h2>Legend</h2>
     <p><span class="bg-white legend border"></span> <span class="align-middle">Gutters color (#FFFFFF)</span></p>
   </div>
 
-  <div class="container-fluid max-width-specific-tools mb-3 pt-3">
+  <div class="container-fluid container-max-width mb-3 pt-3">
     <p class="text-center">
-      Class <code class="text-black">.container-fluid</code> with class <code class="text-black">.max-width-public-website</code></p>
+      Class <code class="text-black">.container-fluid</code> with class <code class="text-black">.container-max-width</code></p>
     <p class="text-center">
       <svg role="img" aria-label="Warning" class="text-info" height="1.5rem" width="1.5rem">
         <use xlink:href="#info"></use>
       </svg>
-      To be used for public websites
+      To be used by default
     </p>
   </div>
-  <div class="container-fluid max-width-public-website mb-3 bg-light">
+  <div class="container-fluid container-max-width mb-3 bg-light">
     <div class="row" style="min-height: 150px">
       <div class="col padding-color"></div>
       <div class="col padding-color"></div>
@@ -59,39 +59,13 @@ <h2>Legend</h2>
     </div>
   </div>
 
-  <div class="container-fluid max-width-specific-tools mb-3">
-    <p class="text-center">Class <code class="text-black">.container-fluid</code> with class <code class="text-black">.max-width-specific-tools</code></p>
+  <div class="container-fluid container-max-width mb-3 pt-3">
+    <p class="text-center">Class <code class="text-black">.container-fluid</code></p>
     <p class="text-center">
       <svg role="img" aria-label="Warning" class="text-info" height="1.5rem" width="1.5rem">
         <use xlink:href="#info"></use>
       </svg>
-      To be used for specific tools which need more horizontal space
-    </p>
-  </div>
-  <div class="container-fluid max-width-specific-tools bg-light">
-    <div class="row" style="min-height: 150px">
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-    </div>
-  </div>
-
-  <div class="container-fluid max-width-specific-tools mb-3 pt-3">
-    <p class="text-center">Class <code class="text-black">.container-fluid</code></p>
-    <p class="text-center">
-      <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
-        <use xlink:href="#warning-important-accessible"></use>
-      </svg>
-      Should not be used alone to be compatible with Orange Unified Design System
+      To be used if more space is needed
     </p>
   </div>
   <div class="container-fluid mb-3 bg-light">
@@ -111,7 +85,7 @@ <h2>Legend</h2>
     </div>
   </div>
 
-  <div class="container-fluid max-width-specific-tools mb-3 pt-3">
+  <div class="container-fluid container-max-width mb-3 pt-3">
     <p class="text-center">Class <code class="text-black">.container</code></p>
     <p class="text-center">
       <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
@@ -137,7 +111,7 @@ <h2>Legend</h2>
     </div>
   </div>
 
-  <div class="container-fluid max-width-specific-tools mb-3 pt-3">
+  <div class="container-fluid container-max-width mb-3 pt-3">
     <p class="text-center">Class <code class="text-black">.container-xs</code></p>
     <p class="text-center">
       <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
@@ -163,7 +137,7 @@ <h2>Legend</h2>
     </div>
   </div>
 
-  <div class="container-fluid max-width-specific-tools mb-3 pt-3">
+  <div class="container-fluid container-max-width mb-3 pt-3">
     <p class="text-center">Class <code class="text-black">.container-sm</code></p>
     <p class="text-center">
       <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
@@ -189,7 +163,7 @@ <h2>Legend</h2>
     </div>
   </div>
 
-  <div class="container-fluid max-width-specific-tools mb-3 pt-3">
+  <div class="container-fluid container-max-width mb-3 pt-3">
     <p class="text-center">Class <code class="text-black">.container-md</code></p>
     <p class="text-center">
       <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
@@ -215,7 +189,7 @@ <h2>Legend</h2>
     </div>
   </div>
 
-  <div class="container-fluid max-width-specific-tools mb-3 pt-3">
+  <div class="container-fluid container-max-width mb-3 pt-3">
     <p class="text-center">Class <code class="text-black">.container-lg</code></p>
     <p class="text-center">
       <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
@@ -241,7 +215,7 @@ <h2>Legend</h2>
     </div>
   </div>
 
-  <div class="container-fluid max-width-specific-tools mb-3 pt-3">
+  <div class="container-fluid container-max-width mb-3 pt-3">
     <p class="text-center">Class <code class="text-black">.container-xl</code></p>
     <p class="text-center">
       <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
@@ -267,7 +241,7 @@ <h2>Legend</h2>
     </div>
   </div>
 
-  <div class="container-fluid max-width-specific-tools mb-3 pt-3">
+  <div class="container-fluid container-max-width mb-3 pt-3">
     <p class="text-center">Class <code class="text-black">.container-2xl</code></p>
     <p class="text-center">
       <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
@@ -293,7 +267,7 @@ <h2>Legend</h2>
     </div>
   </div>
 
-  <div class="container-fluid max-width-specific-tools mb-3 pt-3">
+  <div class="container-fluid container-max-width mb-3 pt-3">
     <p class="text-center">Class <code class="text-black">.container-3xl</code></p>
     <p class="text-center">
       <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
@@ -319,6 +293,6 @@ <h2>Legend</h2>
     </div>
   </div>
 
-  <div class="container-fluid max-width-public-website pb-3">
+  <div class="container-fluid container-max-width pb-3">
   </div>
 </main>
diff --git a/site/content/docs/0.0/examples/grid/index.html b/site/content/docs/0.0/examples/grid/index.html
@@ -10,7 +10,7 @@
 ---
 
 <main>
-  <div class="container-fluid max-width-specific-tools">
+  <div class="container-fluid container-max-width">
     <h1>OUDS Web grid examples</h1>
     <p class="lead">Basic grid layouts to get you familiar with building within the OUDS Web grid system.</p>
     <p>In these examples the <code>.themed-grid-col</code> class is added to the columns to add some theming. This is not a class that is available in OUDS Web by default.</p>
@@ -185,7 +185,7 @@ <h2 class="mt-4">Gutters</h2>
     </div>
   </div>
 
-  <div class="container-fluid max-width-specific-tools" id="containers">
+  <div class="container-fluid container-max-width" id="containers">
     <hr class="my-4">
 
     <h2 class="mt-4">Containers</h2>
@@ -201,6 +201,5 @@ <h2 class="mt-4">Containers</h2>
   <div class="container-2xl themed-container text-center"><code>.container-2xl</code></div>
   <div class="container-3xl themed-container text-center"><code>.container-3xl</code></div>
   <div class="container-fluid themed-container text-center"><code>.container-fluid</code></div>
-  <div class="container-fluid max-width-public-website themed-container text-center"><code>.container-fluid</code> with <code>.max-width-public-website</code></div>
-  <div class="container-fluid max-width-specific-tools themed-container text-center"><code>.container-fluid</code> with <code>.max-width-specific-tools</code></div>
+  <div class="container-fluid container-max-width themed-container text-center"><code>.container-fluid</code> with <code>.container-max-width</code></div>
 </main>
diff --git 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 >}}
-<div class="row g-0 bg-body-secondary position-relative">
+<div class="row g-none bg-body-secondary position-relative">
   <div class="col-md-6 mb-md-0 p-md-4">
     {{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}}
   </div>

diff --git 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
@@ -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 <!--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-->.
 
 #### Offset classes
 
@@ -309,7 +309,7 @@ In addition to column clearing at responsive breakpoints, you may need to reset
 </div>
 {{< /example >}}
 
-#### Margin utilities
+<!-- #### Margin utilities
 
 With flexbox grids, you can use margin utilities like `.me-auto` to force sibling columns away from one another.
 
@@ -328,7 +328,7 @@ With flexbox grids, you can use margin utilities like `.me-auto` to force siblin
     <div class="col-auto">.col-auto</div>
   </div>
 </div>
-{{< /example >}}
+{{< /example >}} -->
 
 ## Standalone column classes
 

diff --git 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
 </div>
 ```
 
-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<div class="fw-normal">&ge;1320px</div> | 2X-Large<div class="fw-normal">&ge;1640px</div> | 3X-Large<div class="fw-normal">&ge;1880px</div> |
 | --- | --- | --- | --- | --- |
 | `.container-fluid` | <ul><li>Width `100% - (2 * 56px)`</li><li>Margin `2 * 56px`</li><li>Gutter `32px`</li></ul> | <ul><li>Width `100% - (2 * 80px)`</li><li>Margin `2 * 80px`</li><li>Gutter `32px`</li></ul> | <ul><li>Width `100% - (2 * 112px)`</li><li>Margin `2 * 112px`</li><li>Gutter `40px`</li></ul> |
-| `.container-fluid`<br>with `.max-width-public-website` | <ul><li>Width `100% - (2 * 56px)`</li><li>Margin `2 * 56px`</li><li>Gutter `32px`</li></ul> | <ul><li>Width `100% - (2 * 80px)`</li><li><b>Max-width `1520px`</b></li><li>Margin `2 * 80px`</li><li>Gutter `32px`</li></ul> | <ul><li><b>Width `1520px`</b></li><li><b>Margin `2 * 80px`</b></li><li><b>Gutter `32px`</b></li></ul> |
-| `.container-fluid`<br>with `.max-width-specific-tools` | <ul><li>Width `100% - (2 * 56px)`</li><li>Margin `2 * 56px`</li><li>Gutter `32px`</li></ul> | <ul><li>Width `100% - (2 * 80px)`</li><li>Margin `2 * 80px`</li><li>Gutter `32px`</li></ul> | <ul><li>Width `100% - (2 * 112px)`</li><li><b>Max-width `1696px`</b></li><li>Margin `2 * 112px`</li><li>Gutter `40px`</li></ul> |
+| `.container-fluid`<br>with `.container-max-width` | <ul><li>Width `100% - (2 * 56px)`</li><li>Margin `2 * 56px`</li><li>Gutter `32px`</li></ul> | <ul><li>Width `100% - (2 * 80px)`</li><li><b>Max-width `1520px`</b></li><li>Margin `2 * 80px`</li><li>Gutter `32px`</li></ul> | <ul><li><b>Width `1520px`</b></li><li><b>Margin `2 * 80px`</b></li><li><b>Gutter `32px`</b></li></ul> |
 {{< /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