Add copy 2xl breakpoint + doc

Orange-OpenSource · Oct 14, 2024 · ff84009 · ff84009
1 parent ab19fac
commit ff84009
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 0 deletions.
diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -194,6 +194,11 @@ $grid-gutter-widths: (
 ) !default;
 // scss-docs-end grid-gutters
 
+@if $enable-bootstrap-compatibility {
+  // Copy 2xl breakpoint into xxl breakpoint
+  $gutters: map-merge($gutters, ("xxl": map-get($gutters, "2xl")));
+}
+
 // scss-docs-start gutters
 $gutters: (
   none: 0,

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -562,6 +562,11 @@ $grid-breakpoints: (
 ) !default;
 // scss-docs-end grid-breakpoints
 
+@if $enable-bootstrap-compatibility {
+  // Copy 2xl breakpoint into xxl breakpoint
+  $grid-breakpoints: map-merge($grid-breakpoints, ("xxl": map-get($grid-breakpoints, "2xl")));
+}
+
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
 @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
 

diff --git a/site/content/docs/0.0/layout/breakpoints.md b/site/content/docs/0.0/layout/breakpoints.md
@@ -44,6 +44,18 @@ These breakpoints are customizable via Sass—you'll find them in a Sass map in
 
 For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}).
 
+{{< bootstrap-compatibility >}}
+
+Includes support for xxl breakpoint, defined like 2xl.
+
+{{< bs-table "table" >}}
+| Breakpoint | Class infix | Dimensions |
+| --- | --- | --- |
+| XX-large | `xxl` | &ge;1640px |
+{{< /bs-table >}}
+
+{{< /bootstrap-compatibility >}}
+
 ## Media queries
 
 Since OUDS Web is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

diff --git a/site/content/docs/0.0/layout/columns.md b/site/content/docs/0.0/layout/columns.md
@@ -20,6 +20,12 @@ 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.
 
+{{< bootstrap-compatibility >}}
+
+Includes support for xxl breakpoint, defined like 2xl, making `.col-xxl-*` classes available.
+
+{{< /bootstrap-compatibility >}}
+
 ## Alignment
 
 Use flexbox alignment utilities to vertically and horizontally align columns.

diff --git a/site/content/docs/0.0/layout/containers.md b/site/content/docs/0.0/layout/containers.md
@@ -38,6 +38,19 @@ Please note that we apply an extra-padding on our containers (see [our mixins](#
 | `.container-fluid` | <span class="text-body-secondary">100vw -<br>(2 * 16px)</span> | <span class="text-body-secondary">100vw -<br>(2 * 24px)</span> | <span class="text-body-secondary">100vw -<br>(2 * 28px)</span> | <span class="text-body-secondary">100vw -<br>(2 * 32px)</span> | <span class="text-body-secondary">100vw -<br>(2 * 40px)</span> | <span class="text-body-secondary">100vw -<br>(2 * 56px)</span> | <span class="text-body-secondary">100vw -<br>(2 * 80px)</span> | <span class="text-body-secondary">100vw -<br>(2 * 112px)</span> |
 {{< /bs-table >}}
 
+{{< bootstrap-compatibility >}}
+
+Includes support for xxl breakpoint, defined like 2xl.
+
+{{< bs-table "table" >}}
+|  | 2X-small<div class="fw-normal">&lt;390px</div> | X-small<div class="fw-normal">&ge;390px</div> | Small<div class="fw-normal">&ge;480px</div> | Medium<div class="fw-normal">&ge;736px</div> | Large<div class="fw-normal">&ge;1024px</div> | 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-xxl` | <span class="text-body-secondary">100vw -<br>(2 * 16px)</span> | <span class="text-body-secondary">100vw -<br>(2 * 24px)</span> | <span class="text-body-secondary">100vw -<br>(2 * 28px)</span> | <span class="text-body-secondary">100vw -<br>(2 * 32px)</span> | <span class="text-body-secondary">100vw -<br>(2 * 40px)</span> | <span class="text-body-secondary">100vw -<br>(2 * 56px)</span> | 1480px | 1656px |
+{{< /bs-table >}}
+
+{{< /bootstrap-compatibility >}}
+
+
 ## Default container
 
 Our default `.container` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint.

diff --git a/site/content/docs/0.0/layout/grid.md b/site/content/docs/0.0/layout/grid.md
@@ -167,6 +167,59 @@ As noted above, each of these breakpoints have their own container, unique class
   </table>
 </div>
 
+{{< bootstrap-compatibility >}}
+
+Includes support for xxl breakpoint, defined like 2xl.
+
+<div class="table-responsive">
+  <table class="table mb-4">
+    <thead>
+      <tr>
+        <th scope="col"></th>
+        <th scope="col">
+          xxl<br>
+          <span class="fw-normal">&ge;1640px</span>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th class="text-nowrap" scope="row">Container <code class="fw-normal">max-width</code></th>
+        <td>1480px</td>
+      </tr>
+      <tr>
+        <th class="text-nowrap" scope="row">Class prefix</th>
+        <td><code>.col-xxl-</code></td>
+      </tr>
+      <tr>
+        <th class="text-nowrap" scope="row"># of columns</th>
+        <td>12</td>
+      </tr>
+      <tr>
+        <th class="text-nowrap" scope="row">Container padding width</th>
+        <td>80px (each side)</td>
+      </tr>
+      <tr>
+        <th class="text-nowrap" scope="row">Gutter width</th>
+        <td>32px (16px on left and right)</td>
+      </tr>
+      <tr>
+        <th class="text-nowrap" scope="row">Custom gutters</th>
+        <td><a href="{{< docsref "/layout/gutters" >}}">Yes</a></td>
+      </tr>
+      <tr>
+        <th class="text-nowrap" scope="row">Nestable</th>
+        <td><a href="#nesting">Yes</a></td>
+      </tr>
+      <tr>
+        <th class="text-nowrap" scope="row">Column ordering</th>
+        <td><a href="{{< docsref "/layout/columns#reordering" >}}">Yes</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+{{< /bootstrap-compatibility >}}
+
 ## Auto-layout columns
 
 Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like `.col-sm-6`.