Add hstack and vstack helpers

diff --git a/scss/_helpers.scss b/scss/_helpers.scss
index 8f566d12f8461a8b609f5779630014c5763f631f..13fb1bbb5d95f0b23a2f11ab9d87d96d6c9b0573 100644 (file)
--- a/scss/_helpers.scss
+++ b/scss/_helpers.scss
@@ -2,6 +2,7 @@
 @import "helpers/colored-links";
 @import "helpers/ratio";
 @import "helpers/position";
+@import "helpers/stacks";
 @import "helpers/visually-hidden";
 @import "helpers/stretched-link";
 @import "helpers/text-truncation";

diff --git a/scss/helpers/_stacks.scss b/scss/helpers/_stacks.scss
new file mode 100644 (file)
index 0000000..bb0d4d5
--- /dev/null
+++ b/scss/helpers/_stacks.scss
@@ -0,0 +1,24 @@
+// scss-docs-start stacks
+.hstack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+}
+
+.vstack {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-self: stretch;
+}
+// scss-docs-end stacks
+
+.vr {
+  display: inline-block;
+  align-self: stretch;
+  width: 1px;
+  min-height: 1em;
+  background-color: currentColor;
+  opacity: $hr-opacity;
+}

diff --git a/site/content/docs/5.0/helpers/stacks.md b/site/content/docs/5.0/helpers/stacks.md
new file mode 100644 (file)
index 0000000..41c0ac5
--- /dev/null
+++ b/site/content/docs/5.0/helpers/stacks.md
@@ -0,0 +1,82 @@
+---
+layout: docs
+title: Stacks
+description: Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
+group: helpers
+toc: true
+---
+
+Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/).
+
+## Vertical
+
+Use `.vstack` to create vertical layouts. Stacked items are full-width by default. Use `.gap-*` utilities to add space between items.
+
+{{< example >}}
+<div class="vstack gap-3">
+  <div class="bg-light border">First item</div>
+  <div class="bg-light border">Second item</div>
+  <div class="bg-light border">Third item</div>
+</div>
+{{< /example >}}
+
+## Horizontal
+
+Use `.hstack` for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use `.gap-*` utilities to add space between items.
+
+{{< example >}}
+<div class="hstack gap-3">
+  <div class="bg-light border">First item</div>
+  <div class="bg-light border">Second item</div>
+  <div class="bg-light border">Third item</div>
+</div>
+{{< /example >}}
+
+Using horizontal margin utilities like `.ms-auto` as spacers:
+
+{{< example >}}
+<div class="hstack gap-3">
+  <div class="bg-light border">First item</div>
+  <div class="bg-light border ms-auto">Second item</div>
+  <div class="bg-light border">Third item</div>
+</div>
+{{< /example >}}
+
+<div class="d-flex" style="height: 200px;">
+<div class="vr"></div>
+</div>
+
+{{< example >}}
+<div class="hstack gap-3">
+  <div class="bg-light border">First item</div>
+  <div class="bg-light border ms-auto">Second item</div>
+  <div class="vr"></div>
+  <div class="bg-light border">Third item</div>
+</div>
+{{< /example >}}
+
+## Examples
+
+Use `.vstack` to stack buttons and other elements:
+
+{{< example >}}
+<div class="vstack gap-2 col-md-5 mx-auto">
+  <button type="button" class="btn btn-secondary">Save changes</button>
+  <button type="button" class="btn btn-outline-secondary">Cancel</button>
+</div>
+{{< /example >}}
+
+Create an inline form with `.hstack`:
+
+{{< example >}}
+<div class="hstack gap-3">
+  <input class="form-control me-auto" type="text" placeholder="Add your item here...">
+  <button type="button" class="btn btn-secondary">Submit</button>
+  <div class="vr"></div>
+  <button type="button" class="btn btn-outline-danger">Reset</button>
+</div>
+{{< /example >}}
+
+## Sass
+
+{{< scss-docs name="stacks" file="scss/helpers/_stacks.scss" >}}

diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index ab99029b03a8975e286d71a3177049edcae8a2f3..fa37b81972841deca4c1fb214571d21e129d8d9d 100644 (file)
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -88,6 +88,7 @@
     - title: Colored links
     - title: Ratio
     - title: Position
+    - title: Stacks
     - title: Visually hidden
     - title: Stretched link
     - title: Text truncation