After Julien's review

Author: hannahiss

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";

site/content/docs/0.0/layout/breakpoints.md

@@ -66,11 +66,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;
   }

site/content/docs/0.0/layout/columns.md

@@ -266,7 +266,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
 
@@ -303,7 +303,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.
 
@@ -322,7 +322,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
 

site/content/docs/0.0/migration-from-boosted.md

@@ -316,6 +316,7 @@ Technically, it means that you can get rid of the following things:
     <summary><span class="badge text-bg-success">New</span> Sass maps:</summary>
     <ul>
       <li><code>$grid-gutter-widths</code></li>
+      <li><code>$gutters</code></li>
       <li><code>$ouds-border-radiuses</code></li>
       <li><code>$ouds-border-styles</code></li>
       <li><code>$ouds-border-widths</code></li>

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

@@ -487,8 +487,8 @@ You can enable responsive classes for an existing set of utilities that are not
 
 $utilities: map-merge(
   $utilities, (
-    "border": map-merge(
-      map-get($utilities, "border"),
+    "border-ouds": map-merge(
+      map-get($utilities, "border-ouds"),
       ( responsive: true ),
     ),
   )
@@ -501,41 +501,41 @@ This will now generate responsive variations of `.border` and `.border-0` for ea
 
 ```css
 .border { ... }
-.border-0 { ... }
+.border-none { ... }
 
 @media (min-width: 390px) {
   .border-xs { ... }
-  .border-xs-0 { ... }
+  .border-xs-none { ... }
 }
 
 @media (min-width: 480px) {
   .border-sm { ... }
-  .border-sm-0 { ... }
+  .border-sm-none { ... }
 }
 
 @media (min-width: 736px) {
   .border-md { ... }
-  .border-md-0 { ... }
+  .border-md-none { ... }
 }
 
 @media (min-width: 1024px) {
   .border-lg { ... }
-  .border-lg-0 { ... }
+  .border-lg-none { ... }
 }
 
 @media (min-width: 1320px) {
   .border-xl { ... }
-  .border-xl-0 { ... }
+  .border-xl-none { ... }
 }
 
 @media (min-width: 1640px) {
   .border-2xl { ... }
-  .border-2xl-0 { ... }
+  .border-2xl-none { ... }
 }
 
 @media (min-width: 1880px) {
   .border-3xl { ... }
-  .border-3xl-0 { ... }
+  .border-3xl-none { ... }
 }
 ```
 
@@ -636,8 +636,8 @@ $utilities: map-merge(
     "width": null,
 
     // Make an existing utility responsive
-    "border": map-merge(
-      map-get($utilities, "border"),
+    "border-ouds": map-merge(
+      map-get($utilities, "border-ouds"),
       ( responsive: true ),
     ),