remove bootstrap compat from this PR, removing gutters, finalizing, s…

…tart migration guide
Orange-OpenSource · Oct 9, 2024 · ec548ac · ec548ac
1 parent 4a87c6b
commit ec548ac
Show file tree

Hide file tree

Showing 9 changed files with 184 additions and 133 deletions.
diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -194,14 +194,22 @@ $gutters: (
 ) !default;
 // scss-docs-end grid-gutters
 
-// scss-docs-start gutters
+// scss-docs-start gutters-utilities
 $gutters-utilities: (
   none: 0,
-  extra-short: $ouds-grid-column-gap-200, // 16
-  short: $ouds-grid-column-gap-400, // 24
-  large: $ouds-grid-column-gap-800 // 40
+  smash: 2px,
+  shortest: 4px,
+  shorter: $ouds-grid-column-gap-100, // 8
+  short: 12px,
+  medium: $ouds-grid-column-gap-200, // 16
+  tall: $ouds-grid-column-gap-400, // 24
+  taller: $ouds-grid-column-gap-600, // 32
+  tallest: $ouds-grid-column-gap-800, // 40
+  spacious: 48px,
+  huge: 56px,
+  jumbo: 64px
 ) !default;
-// scss-docs-end gutters
+// scss-docs-end gutters-utilities
 
 // End mod
 

diff --git a/site/content/docs/0.0/layout/breakpoints.md b/site/content/docs/0.0/layout/breakpoints.md
@@ -44,18 +44,6 @@ 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,12 +20,6 @@ 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,18 +38,6 @@ 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.
@@ -78,15 +66,6 @@ Responsive containers allow you to specify a class that follows the `.container-
 <div class="container-3xl">100% wide until extra extra extra large breakpoint</div>
 ```
 
-{{< bootstrap-compatibility >}}
-
-Includes support for xxl breakpoint, defined like 2xl.
-
-```html
-<div class="container-xxl">100% wide until extra extra large breakpoint</div>
-```
-{{< /bootstrap-compatibility >}}
-
 ## Fluid containers
 
 Use `.container-fluid` for a full width container with minimum margins, spanning almost the entire width of the viewport.

diff --git a/site/content/docs/0.0/layout/grid.md b/site/content/docs/0.0/layout/grid.md
@@ -167,59 +167,6 @@ 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`.