Add more

twbs · Nov 30, 2021 · 757a75d · 757a75d
1 parent e521bd4
commit 757a75d
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 8 deletions.
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -276,13 +276,13 @@
   .position-relative {
     height: 200px;
     background-color: #f5f5f5;
-  }
 
-  .position-absolute {
-    width: 2em;
-    height: 2em;
-    background-color: $dark;
-    @include border-radius();
+    [class^="position-"] {
+      width: 2em;
+      height: 2em;
+      background-color: $dark;
+      @include border-radius();
+    }
   }
 }
 

diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
@@ -27,6 +27,8 @@
 @import "../../../scss/functions";
 @import "../../../scss/variables";
 @import "../../../scss/mixins";
+@import "../../../scss/maps";
+@import "../../../scss/utilities";
 
 // fusv-disable
 $enable-grid-classes: false; // stylelint-disable-line scss/dollar-variable-default
@@ -59,3 +61,18 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
 @import "syntax";
 @import "anchor";
 @import "algolia";
+
+// stylelint-disable scss/dollar-variable-default
+$utilities: map-merge(
+  $utilities,
+  (
+    "position": map-merge(
+      map-get($utilities, "position"),
+      (
+        responsive: true
+      ),
+    ),
+  )
+);
+
+@import "../../../scss/utilities/api";
diff --git a/site/content/docs/5.1/extend/snippets.md b/site/content/docs/5.1/extend/snippets.md
@@ -3,6 +3,7 @@ layout: docs
 title: Snippets
 description: Extend Bootstrap with some common snippets of source code not included in the main project.
 group: extend
+toc: true
 ---
 
 ## Components
@@ -47,5 +48,74 @@ group: extend
 
 ## Utilities
 
-- Opacity
-- Expanded widths/heights
+### Responsive position
+
+```scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/utilities/api";
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "position": map-merge(
+      map-get($utilities, "position"),
+      (
+        responsive: true
+      ),
+    ),
+  )
+);
+```
+
+### Responsive width
+
+```scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/utilities/api";
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "width": map-merge(
+      map-get($utilities, "width"),
+      (
+        responsive: true
+      ),
+    ),
+  )
+);
+```
+
+### Additional height
+
+```scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/utilities/api";
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "height": map-merge(
+      map-get($utilities, "height"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "height"), "values"),
+          (10: 10%),
+        ),
+      ),
+    ),
+  )
+);
+```