Some small tweaks before reviews.

Orange-OpenSource · Oct 25, 2024 · f0847dd · f0847dd
1 parent fdab9a8
commit f0847dd
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 33 deletions.
diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -292,7 +292,7 @@ $grid-gutter-widths: (
 // scss-docs-end grid-gutters
 
 // scss-docs-start gutters
-$gutters: $ouds-dimension-space-fixed !default;
+$gutters: $ouds-dimension-space-fixed !default; // instead of `$spacers`
 // scss-docs-end gutters
 
 @if $enable-bootstrap-compatibility {

diff --git a/scss/_root.scss b/scss/_root.scss
@@ -122,6 +122,7 @@
   --#{$prefix}border-color-translucent: #{$border-color-translucent};
   // scss-docs-end root-border-var-ouds
 
+  // OUDS mod
   // scss-docs-start root-space-scaled-var-ouds
   --#{$prefix}space-scaled-none: #{$ouds-space-scaled-none-mobile};
   --#{$prefix}space-scaled-smash: #{$ouds-space-scaled-smash-mobile};
@@ -160,6 +161,7 @@
     --#{$prefix}space-scaled-spacious: #{$ouds-space-scaled-spacious-desktop};
   }
   // scss-docs-end root-space-scaled-var-ouds
+  // End mod
 
   // scss-docs-start root-border-var
   @if $enable-bootstrap-compatibility {

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -600,6 +600,7 @@ $utilities: map-merge(
       bootstrap-compatibility: true
     ),
     // scss-docs-end utils-spacing
+    // OUDS mod
     // TODO: Decide whether we keep them stacked under or split under each utilities
     //        First scenario: some issue such as `.gap-none.row-gap-3` doesn't work, but `.gap-0.row-gap-medium`, `.gap-0.row-gap-3` and `.gap-none.row-gap-medium` work well
     //        Second scenario: some issue regarding the documentation
@@ -873,6 +874,7 @@ $utilities: map-merge(
       values: $ouds-dimension-space-scaled
     ),
     // scss-docs-end utils-spacing-ouds
+    // End mod
     // Text
     // scss-docs-start utils-text
     "font-family": (

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -119,6 +119,11 @@
       padding-right: $gutter-width * .5;
       padding-left: $gutter-width * .5;
     }
+
+    .bd-example-cols [class^="container"] {
+      padding-right: 0;
+      padding-left: 0;
+    }
   }
 }
 // End mod

diff --git a/site/content/docs/0.0/layout/columns.md b/site/content/docs/0.0/layout/columns.md
@@ -268,7 +268,7 @@ $utilities: map-merge(
 
 ### Offsetting columns
 
-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-->.
+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
 

diff --git a/site/content/docs/0.0/layout/css-grid.md b/site/content/docs/0.0/layout/css-grid.md
@@ -178,7 +178,7 @@ Customize the number of columns, the number of rows, and the width of the gaps w
 | --- | --- | --- |
 | `--bs-rows` | `1` | The number of rows in your grid template |
 | `--bs-columns` | `12` | The number of columns in your grid template |
-<!--| `-bs-gap` | `1.25rem` | The size of the gap between columns (vertical and horizontal) |-->
+| `--bs-gap` | `1.25rem` | The size of the gap between columns (vertical and horizontal) |
 {{< /bs-table >}}
 
 These CSS variables have no default value; instead, they apply fallback values that are used _until_ a local instance is provided. For example, we use `var(--bs-rows, 1)` for our CSS Grid rows, which ignores `--bs-rows` because that hasn't been set anywhere yet. Once it is, the `.grid` instance will use that value instead of the fallback value of `1`.

diff --git a/site/content/docs/0.0/layout/gutters.md b/site/content/docs/0.0/layout/gutters.md
@@ -150,6 +150,29 @@ In practice, here's how it looks. Note that you can continue to use this with al
 </div>
 {{< /example >}}
 
+## Nesting
+
+Nested `.row`s will reset their own gutters to follow the main grid gutters. Here is an example with a `.gx-none` on the upper `.row`.
+
+{{< example class="bd-example-cols" >}}
+<div class="row gx-none text-center">
+  <div class="col-12 col-md-8">
+    <div>
+      <p>.col-12 .col-md-8</p>
+      <div class="row">
+        <div class="col-3"><div>.col-3</div></div>
+        <div class="col-3"><div>.col-3</div></div>
+        <div class="col-3"><div>.col-3</div></div>
+        <div class="col-3"><div>.col-3</div></div>
+      </div>
+    </div>
+  </div>
+  <div class="col-6 col-md-4">
+    <div>.col-6 .col-md-4</div>
+  </div>
+</div>
+{{< /example >}}
+
 ## Change the gutters
 
 Classes are built from the `$gutters` Sass map which is inherited from the `$ouds-dimension-space-fixed` Sass map.

diff --git a/site/content/docs/0.0/utilities/shadows.md b/site/content/docs/0.0/utilities/shadows.md
@@ -33,10 +33,10 @@ You can <!--also -->quickly add or remove a shadow with our `box-shadow` utility
 Includes support for three default sizes (which have associated variables to match).
 
 {{< example class="overflow-hidden" >}}
-<div class="shadow-none p-medium mb-spacious bg-body-tertiary">No shadow</div>
-<div class="shadow-sm p-medium mb-spacious bg-body-tertiary">Small shadow</div>
-<div class="shadow p-medium mb-spacious bg-body-tertiary">Regular shadow</div>
-<div class="shadow-lg p-medium mb-spacious bg-body-tertiary">Larger shadow</div>
+<div class="shadow-none p-3 mb-5 bg-body-tertiary">No shadow</div>
+<div class="shadow-sm p-3 mb-5 bg-body-tertiary">Small shadow</div>
+<div class="shadow p-3 mb-5 bg-body-tertiary">Regular shadow</div>
+<div class="shadow-lg p-3 mb-5 bg-body-tertiary">Larger shadow</div>
 {{< /example >}}
 
 {{< /bootstrap-compatibility >}}

diff --git a/site/content/docs/0.0/utilities/spacing.md b/site/content/docs/0.0/utilities/spacing.md
@@ -113,10 +113,8 @@ Where *sides* is one of:
 
 Where *size* is one of:
 
-<!-- TODO: Rework th of the next table -->
-
 {{< bs-table "table" >}}
-| Size name | Size for mobile (`2xs` to `md` or `0 - 735.98px`) | Size for tablet (`md` to `xl` or `736px - 1319.98px`) | Size for desktop (`xl` to `3xl` and above or `1320px - 1880px and above`) |
+| Size name | Size for mobile (`2xs` to `md`) | Size for tablet (`md` to `xl`) | Size for desktop (`xl` to `3xl` and above) |
 | --- | --- | --- | --- |
 | `none` | `0` | `0` | `0` |
 | `smash` | `2px` | `4px` | `4px` |
@@ -158,20 +156,20 @@ Here are some representative examples of these classes:
 {{< bootstrap-compatibility >}}
 
 ```scss
-.mt-none {
+.mt-0 {
   margin-top: 0 !important;
 }
 
-.ms-shortest {
+.ms-1 {
   margin-left: ($spacer * .25) !important;
 }
 
-.px-shorter {
+.px-2 {
   padding-left: ($spacer * .5) !important;
   padding-right: ($spacer * .5) !important;
 }
 
-.p-medium {
+.p-3 {
   padding: $spacer !important;
 }
 ```
@@ -212,10 +210,10 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
 
 {{< bootstrap-compatibility >}}
 
-Here's an example class that's the opposite of `.mt-shortest`:
+Here's an example class that's the opposite of `.mt-1`:
 
 ```scss
-.mt-nshortest {
+.mt-n1 {
   margin-top: -0.25rem !important;
 }
 ```
@@ -242,15 +240,15 @@ Support includes responsive options for all of OUDS Web's grid breakpoints, as w
 Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
 
 {{< example class="bd-example-cssgrid" >}}
-<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-medium">
-  <div class="p-shorter">Grid item 1</div>
-  <div class="p-shorter">Grid item 2</div>
-  <div class="p-shorter">Grid item 3</div>
-  <div class="p-shorter">Grid item 4</div>
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
+  <div class="p-2">Grid item 1</div>
+  <div class="p-2">Grid item 2</div>
+  <div class="p-2">Grid item 3</div>
+  <div class="p-2">Grid item 4</div>
 </div>
 {{< /example >}}
 
-Support includes responsive options for all of OUDS Web's grid breakpoints, as well as six sizes from the `$spacers` map (`0`–`5`). There is no `.gap-auto` utility class as it's effectively the same as `.gap-none`.
+Support includes responsive options for all of OUDS Web's grid breakpoints, as well as six sizes from the `$spacers` map (`0`–`5`). There is no `.gap-auto` utility class as it's effectively the same as `.gap-0`.
 
 {{< /bootstrap-compatibility >}}
 
@@ -270,11 +268,11 @@ Support includes responsive options for all of OUDS Web's grid breakpoints, as w
 {{< bootstrap-compatibility >}}
 
 {{< example class="bd-example-cssgrid" >}}
-<div style="grid-template-columns: 1fr 1fr;" class="d-grid row-gap-medium">
-  <div class="p-shorter">Grid item 1</div>
-  <div class="p-shorter">Grid item 2</div>
-  <div class="p-shorter">Grid item 3</div>
-  <div class="p-shorter">Grid item 4</div>
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid row-gap-3">
+  <div class="p-2">Grid item 1</div>
+  <div class="p-2">Grid item 2</div>
+  <div class="p-2">Grid item 3</div>
+  <div class="p-2">Grid item 4</div>
 </div>
 {{< /example >}}
 
@@ -285,7 +283,7 @@ Support includes responsive options for all of OUDS Web's grid breakpoints, as w
 `column-gap` sets the horizontal space between children items in the specified container.
 
 {{< example class="bd-example-cssgrid" >}}
-<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-none column-gap-medium">
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid column-gap-medium">
   <div class="p-shorter">Grid item 1</div>
   <div class="p-shorter">Grid item 2</div>
   <div class="p-shorter">Grid item 3</div>
@@ -296,11 +294,11 @@ Support includes responsive options for all of OUDS Web's grid breakpoints, as w
 {{< bootstrap-compatibility >}}
 
 {{< example class="bd-example-cssgrid" >}}
-<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-none column-gap-medium">
-  <div class="p-shorter">Grid item 1</div>
-  <div class="p-shorter">Grid item 2</div>
-  <div class="p-shorter">Grid item 3</div>
-  <div class="p-shorter">Grid item 4</div>
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid column-gap-3">
+  <div class="p-2">Grid item 1</div>
+  <div class="p-2">Grid item 2</div>
+  <div class="p-2">Grid item 3</div>
+  <div class="p-2">Grid item 4</div>
 </div>
 {{< /example >}}