Add responsive related content in aside pages.

site/content/docs/0.0/extend/approach.md

@@ -29,11 +29,9 @@ We'll dive into each of these more throughout, but at a high level, here's what
 
 OUDS Web's responsive styles are built to be responsive, an approach that's often referred to as _mobile-first_. We use this term in our docs and largely agree with it, but at times it can be too broad. While not every component _must_ be entirely responsive in OUDS Web, this responsive approach is about reducing CSS overrides by pushing you to add styles as the viewport becomes larger.
 
-<!--
 Across OUDS Web, you'll see this most clearly in our media queries. In most cases, we use `min-width` queries that begin to apply at a specific breakpoint and carry up through the higher breakpoints. For example, a `.d-none` applies from `min-width: 0` to infinity. On the other hand, a `.d-md-none` applies from the medium breakpoint and up.
 
 At times we'll use `max-width` when a component's inherent complexity requires it. At times, these overrides are functionally and mentally clearer to implement and support than rewriting core functionality from our components. We strive to limit this approach, but will use it from time to time.
--->
 
 ## Classes
 

site/content/docs/0.0/getting-started/contents.md

@@ -85,7 +85,7 @@ OUDS Web includes a handful of options for including some or all of our compiled
 | --- | --- | --- | --- | --- |
 | `ouds-web.css`<br> `ouds-web.min.css`<br> `ouds-web.rtl.css`<br> `ouds-web.rtl.min.css` | Included | Included | Included | Included without Bootstrap utilities |
 | `ouds-web-bootstrap.css`<br> `ouds-web-bootstrap.min.css`<br> `ouds-web-bootstrap.rtl.css`<br> `ouds-web-bootstrap.rtl.min.css` | Included | Included | Included | Included with Bootstrap utilities |
-| `ouds-web-grid.css`<br> `ouds-web-grid.rtl.css`<br> `ouds-web-grid.min.css`<br> `ouds-web-grid.rtl.min.css` | <!--[Only grid system]({{< docsref "/layout/grid" >}})-->— | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) |
+| `ouds-web-grid.css`<br> `ouds-web-grid.rtl.css`<br> `ouds-web-grid.min.css`<br> `ouds-web-grid.rtl.min.css` | [Only grid system]({{< docsref "/layout/grid" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) |
 | `ouds-web-utilities.css`<br> `ouds-web-utilities.rtl.css`<br> `ouds-web-utilities.min.css`<br> `ouds-web-utilities.rtl.min.css` | — | — | — | Included |
 | `ouds-web-reboot.css`<br> `ouds-web-reboot.rtl.css`<br> `ouds-web-reboot.min.css`<br> `ouds-web-reboot.rtl.min.css` | — | <!--[Only Reboot]({{< docsref "/content/reboot" >}})-->— | — | — |
 {{< /bs-table >}}

site/content/docs/0.0/helpers/position.md

@@ -32,17 +32,19 @@ Position an element at the top of the viewport, from edge to edge, but only afte
 <div class="sticky-top">...</div>
 ```
 
-<!--## Responsive sticky top
+## Responsive sticky top
 
 Responsive variations also exist for `.sticky-top` utility.
 
 ```html
+<div class="sticky-xs-top">Stick to the top on viewports sized XS (extra small) or wider</div>
 <div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
 <div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
 <div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
-<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
-<div class="sticky-xxl-top">Stick to the top on viewports sized XXL (extra-extra-large) or wider</div>
-```-->
+<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra large) or wider</div>
+<div class="sticky-2xl-top">Stick to the top on viewports sized 2XL (extra extra large) or wider</div>
+<div class="sticky-3xl-top">Stick to the top on viewports sized 3XL (extra extra extra large) or wider</div>
+```
 
 ## Sticky bottom
 
@@ -52,14 +54,16 @@ Position an element at the bottom of the viewport, from edge to edge, but only a
 <div class="sticky-bottom">...</div>
 ```
 
-<!--## Responsive sticky bottom
+## Responsive sticky bottom
 
 Responsive variations also exist for `.sticky-bottom` utility.
 
 ```html
+<div class="sticky-xs-bottom">Stick to the bottom on viewports sized XS (extra small) or wider</div>
 <div class="sticky-sm-bottom">Stick to the bottom on viewports sized SM (small) or wider</div>
 <div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
 <div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
-<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
-<div class="sticky-xxl-bottom">Stick to the bottom on viewports sized XXL (extra-extra-large) or wider</div>
-```-->
+<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra large) or wider</div>
+<div class="sticky-2xl-bottom">Stick to the bottom on viewports sized 2XL (extra extra large) or wider</div>
+<div class="sticky-3xl-bottom">Stick to the bottom on viewports sized 3XL (extra extra extra large) or wider</div>
+```

site/content/docs/0.0/helpers/stretched-link.md

@@ -37,18 +37,18 @@ Most custom components do not have `position: relative` by default, so we need t
 </div>
 {{< /example >}}
 
-<!--{{< example >}}
+{{< example >}}
 <div class="row g-0 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" >}}
+    {{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}}
   </div>
   <div class="col-md-6 p-4 ps-md-0">
     <h5 class="mt-0">Columns with stretched link</h5>
     <p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
     <a href="#" class="stretched-link">Go somewhere</a>
   </div>
 </div>
-{{< /example >}}-->
+{{< /example >}}
 
 ## Identifying the containing block
 

site/content/docs/0.0/layout/css-grid.md

@@ -46,7 +46,7 @@ Compared to the default grid system:
 
 ### Three columns
 
-Three equal-width columns across all viewports and devices can be created by using the `.g-col-4` classes. <!--Add [responsive classes](#responsive) to change the layout by viewport size.-->
+Three equal-width columns across all viewports and devices can be created by using the `.g-col-4` classes. Add [responsive classes](#responsive) to change the layout by viewport size.
 
 {{< example class="bd-example-cssgrid" >}}
 <div class="grid text-center">
@@ -56,7 +56,7 @@ Three equal-width columns across all viewports and devices can be created by usi
 </div>
 {{< /example >}}
 
-<!--### Responsive
+### Responsive
 
 Use responsive classes to adjust your layout across viewports. Here we start with two columns on the narrowest viewports, and then grow to three columns on medium viewports and above.
 
@@ -75,7 +75,7 @@ Compare that to this two column layout at all viewports.
   <div class="g-col-6">.g-col-6</div>
   <div class="g-col-6">.g-col-6</div>
 </div>
-{{< /example >}}-->
+{{< /example >}}
 
 ## Wrapping
 

site/content/docs/0.0/utilities/api.md

@@ -25,9 +25,9 @@ The `$utilities` map contains all our utilities and is later merged with your cu
 | [`css-variable-name`](#css-variable-utilities) | Optional | null | Custom un-prefixed name for the CSS variable inside the ruleset. |
 | [`local-vars`](#local-css-variables) | Optional | null | Map of local CSS variables to generate in addition to the CSS rules. |
 | [`state`](#states) | Optional | null | List of pseudo-class variants (e.g., `:hover` or `:focus`) to generate. |
+| [`responsive`](#responsive) | Optional | `false` | Boolean indicating if responsive classes should be generated. |
 | [`print`](#print) | Optional | `false` | Boolean indicating if print classes need to be generated. |
 | `rtl` | Optional | `true` | Boolean indicating if utility should be kept in RTL. |
-<!--| [`responsive`](#responsive) | Optional | `false` | Boolean indicating if responsive classes should be generated. |-->
 <!--| `rfs` | Optional | `false` | Boolean to enable [fluid rescaling with RFS]({{< docsref "/getting-started/rfs" >}}). |-->
 {{< /bs-table >}}
 
@@ -258,7 +258,7 @@ Output:
 .opacity-100-hover:hover { opacity: 1 !important; }
 ```
 
-<!--### Responsive
+### Responsive
 
 Add the `responsive` boolean to generate responsive utilities (e.g., `.opacity-md-25`) across [all breakpoints]({{< docsref "/layout/breakpoints" >}}).
 
@@ -287,6 +287,14 @@ Output:
 .opacity-75 { opacity: .75 !important; }
 .opacity-100 { opacity: 1 !important; }
 
+@media (min-width: 390px) {
+  .opacity-sm-0 { opacity: 0 !important; }
+  .opacity-sm-25 { opacity: .25 !important; }
+  .opacity-sm-50 { opacity: .5 !important; }
+  .opacity-sm-75 { opacity: .75 !important; }
+  .opacity-sm-100 { opacity: 1 !important; }
+}
+
 @media (min-width: 480px) {
   .opacity-sm-0 { opacity: 0 !important; }
   .opacity-sm-25 { opacity: .25 !important; }
@@ -295,7 +303,7 @@ Output:
   .opacity-sm-100 { opacity: 1 !important; }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 736px) {
   .opacity-md-0 { opacity: 0 !important; }
   .opacity-md-25 { opacity: .25 !important; }
   .opacity-md-50 { opacity: .5 !important; }
@@ -311,22 +319,30 @@ Output:
   .opacity-lg-100 { opacity: 1 !important; }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 1320px) {
   .opacity-xl-0 { opacity: 0 !important; }
   .opacity-xl-25 { opacity: .25 !important; }
   .opacity-xl-50 { opacity: .5 !important; }
   .opacity-xl-75 { opacity: .75 !important; }
   .opacity-xl-100 { opacity: 1 !important; }
 }
 
-@media (min-width: 1440px) {
+@media (min-width: 1640px) {
   .opacity-xxl-0 { opacity: 0 !important; }
   .opacity-xxl-25 { opacity: .25 !important; }
   .opacity-xxl-50 { opacity: .5 !important; }
   .opacity-xxl-75 { opacity: .75 !important; }
   .opacity-xxl-100 { opacity: 1 !important; }
 }
-```-->
+
+@media (min-width: 1880px) {
+  .opacity-xxl-0 { opacity: 0 !important; }
+  .opacity-xxl-25 { opacity: .25 !important; }
+  .opacity-xxl-50 { opacity: .5 !important; }
+  .opacity-xxl-75 { opacity: .75 !important; }
+  .opacity-xxl-100 { opacity: 1 !important; }
+}
+```
 
 ### Print
 

site/content/docs/0.0/utilities/display.md

@@ -10,16 +10,16 @@ toc: true
 
 ## How it works
 
-Change the value of the [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) with our <!--responsive -->display utility classes. We purposely support only a subset of all possible values for `display`. Classes can be combined for various effects as you need.
+Change the value of the [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) with our responsive display utility classes. We purposely support only a subset of all possible values for `display`. Classes can be combined for various effects as you need.
 
 ## Notation
 
-<!--Display utility classes that apply to all [breakpoints]({{< docsref "/layout/breakpoints" >}}), from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.-->
+Display utility classes that apply to all [breakpoints]({{< docsref "/layout/breakpoints" >}}), from `2xs` to `3xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
 
-<!--As such, t-->The classes are named using the format:
+As such, the classes are named using the format:
 
-- `.d-{value}`<!-- for `xs`-->
-<!--- `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `xxl`.-->
+- `.d-{value}` for `2xs`
+- `.d-{breakpoint}-{value}` for `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, and `3xl`.
 
 Where *value* is one of:
 
@@ -37,7 +37,7 @@ Where *value* is one of:
 
 The display values can be altered by changing the `display` values defined in `$utilities` and recompiling the SCSS.
 
-<!--The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, and `xxl` screens.-->
+The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, `2xl`, and `3xl` screens.
 
 <!--## Examples
 
@@ -53,35 +53,39 @@ The display values can be altered by changing the `display` values defined in `$
 
 ## Hiding elements
 
-<!--For faster mobile-friendly development, use responsive-->Use display classes for showing and hiding elements<!-- by device-->.<!-- Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.-->
+For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.
 
-To hide elements simply use the `.d-none` class<!-- or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation-->.
+To hide elements simply use the `.d-none` class or one of the `.d-{xs,sm,md,lg,xl,2xl,3xl}-none` classes for any responsive screen variation.
 
-<!--To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.-->
+To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-2xl-none` will hide the element for all screen sizes except on medium and large devices.
 
 {{< bs-table >}}
 | Screen size | Class |
 | --- | --- |
 | Hidden on all | `.d-none` |
 | Visible on all | `.d-block` |
-<!--| Hidden only on xs | `.d-none .d-sm-block` |
+| Hidden only on 2xs | `.d-none .d-xs-block` |
+| Hidden only on xs | `.d-xs-none .d-sm-block` |
 | Hidden only on sm | `.d-sm-none .d-md-block` |
 | Hidden only on md | `.d-md-none .d-lg-block` |
 | Hidden only on lg | `.d-lg-none .d-xl-block` |
-| Hidden only on xl | `.d-xl-none .d-xxl-block` |
-| Hidden only on xxl | `.d-xxl-none` |-->
-<!--| Visible only on xs | `.d-block .d-sm-none` |
+| Hidden only on xl | `.d-xl-none .d-2xl-block` |
+| Hidden only on 2xl | `.d-2xl-none .d-3xl-block` |
+| Hidden only on 3xl | `.d-2xl-none .d-3xl-block` |
+| Visible only on 2xs | `.d-block .d-xs-none` |
+| Visible only on xs | `.d-none .d-xs-block .d-sm-none` |
 | Visible only on sm | `.d-none .d-sm-block .d-md-none` |
 | Visible only on md | `.d-none .d-md-block .d-lg-none` |
 | Visible only on lg | `.d-none .d-lg-block .d-xl-none` |
-| Visible only on xl | `.d-none .d-xl-block .d-xxl-none` |
-| Visible only on xxl | `.d-none .d-xxl-block` |-->
+| Visible only on xl | `.d-none .d-xl-block .d-2xl-none` |
+| Visible only on 2xl | `.d-none .d-2xl-block .d-3xl-none` |
+| Visible only on 3xl | `.d-none .d-3xl-block` |-->
 {{< /bs-table >}}
 
-<!--{{< example >}}
+{{< example >}}
 <div class="d-lg-none">hide on lg and wider screens</div>
 <div class="d-none d-lg-block">hide on screens smaller than lg</div>
-{{< /example >}}-->
+{{< /example >}}
 
 ## Display in print
 
@@ -104,7 +108,7 @@ The print and display classes can be combined.
 {{< example >}}
 <div class="d-print-none">Screen Only (Hide on print only)</div>
 <div class="d-none d-print-block">Print Only (Hide on screen only)</div>
-<!--<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>-->
+<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
 {{< /example >}}
 
 ## CSS