v2 - Utilities-Vertical Alignment: rebuild and responsive rework

docs/_data/nav.yml

@@ -57,6 +57,7 @@
     - title: Sizing & Positioning
     - title: Spacing
     - title: Typography
+    - title: Vertical Alignment
 
 - title: Widgets
   pages:

docs/utilities/sizing-positioning.md

@@ -46,39 +46,3 @@ The `.position-f-t` class can be used to easily position elements at the top of
   z-index: $zindex-navbar-fixed;
 }
 {% endhighlight %}
-
-## Vertical Row Alignment
-
-Give some vertical alignment, using `display: table;` to keep items in a full width row.  Child items need to be defined with `.valign-item` in order to receive alignment.
-
-{% example html %}
-<div class="valign-top">
-    <div class="valign-item">
-        <a href="#">View more in teacher's guide</a> |
-        <a href="#">Common Core alignment</a>
-    </div>
-    <div class="valign-item text-right">
-        <button type="button" class="btn btn-primary btn-lg">Continue</button>
-    </div>
-</div>
-
-<div class="valign-middle">
-    <div class="valign-item">
-        <a href="#">View more in teacher's guide</a> |
-        <a href="#">Common Core alignment</a>
-    </div>
-    <div class="valign-item text-right">
-        <button type="button" class="btn btn-primary btn-lg">Continue</button>
-    </div>
-</div>
-
-<div class="valign-bottom">
-    <div class="valign-item">
-        <a href="#">View more in teacher's guide</a> |
-        <a href="#">Common Core alignment</a>
-    </div>
-    <div class="valign-item text-right">
-        <button type="button" class="btn btn-primary btn-lg">Continue</button>
-    </div>
-</div>
-{% endexample %}

docs/utilities/vertical-alignment.md

@@ -0,0 +1,68 @@
+---
+layout: docs
+title: Vertical Alignment
+group: utilities
+---
+
+Give some vertical alignment to elements by manipulating their [`vertical-align` property](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align).
+
+Note that only items with the following display properties can be vertically aligned:
+- inline
+- inline-block
+- inline-table
+- table-cell
+
+The alignments consist of the items in the following list and are also available in responsive variants. Please refer to how our [breakpoint nomenclature]({{ site.baseurl }}/layout/overview/#breakpoint-nomenclature) is used.
+- `.valign-baseline`
+- `.valign-top`
+- `.valign-middle`
+- `.valign-bottom`
+- `.valign-text-top`
+- `.valign-text-bottom`
+
+Example with inline elements.
+
+{% example html %}
+<div class="bg-gray-50">
+    <span class="bg-cyan-100 valign-baseline">baseline</span>
+    -
+    <span class="bg-cyan-100 valign-top">top</span>
+    -
+    <span class="bg-cyan-100 valign-middle">middle</span>
+    -
+    <span class="bg-cyan-100 valign-bottom">bottom</span>
+    -
+    <span class="bg-cyan-100 valign-text-top">text-top</span>
+    -
+    <span class="bg-cyan-100 valign-text-bottom">text-bottom</span>
+</div>
+{% endexample %}
+
+Using table cells.
+
+{% example html %}
+<table class="table table-bordered" style="height: 100px;">
+    <tbody>
+        <td class="valign-baseline">baseline</td>
+        <td class="valign-top">top</td>
+        <td class="valign-middle">middle</td>
+        <td class="valign-bottom">bottom</td>
+        <td class="valign-text-top">text-top</td>
+        <td class="valign-text-bottom">text-bottom</td>
+    </tbody>
+</table>
+{% endexample %}
+
+Slightly more complex uses, such as being able to align items in a row, become quick and easy.
+
+{% example html %}
+<div class="bg-gray-50 width-100 display-table">
+    <div class="display-table-cell valign-bottom">
+        <a href="#">View more in teacher's guide</a> |
+        <a href="#">Common Core alignment</a>
+    </div>
+    <div class="display-table-cell valign-bottom text-right">
+        <button type="button" class="btn btn-primary btn-lg">Continue</button>
+    </div>
+</div>
+{% endexample %}

scss/utilities/_valign.scss

@@ -1,31 +1,14 @@
 // scss-lint:disable ImportantRule
 
-// Vertical row alignments
-.valign-top,
-.valign-middle,
-.valign-bottom {
-    display: table;
-    width: 100%;
-}
+@each $breakpoint in map-keys($grid-breakpoints) {
+    $bprule: breakpoint-designator($breakpoint);
 
-.valign-top {
-    > .valign-item {
-        display: table-cell;
-        float: none !important;
-        vertical-align: top;
-    }
-}
-.valign-middle {
-    > .valign-item {
-        display: table-cell;
-        float: none !important;
-        vertical-align: middle;
-    }
-}
-.valign-bottom {
-    > .valign-item {
-        display: table-cell;
-        float: none !important;
-        vertical-align: bottom;
+    @include media-breakpoint-up($breakpoint) {
+        .valign#{$bprule}-baseline { vertical-align: baseline !important; }
+        .valign#{$bprule}-top { vertical-align: top !important; }
+        .valign#{$bprule}-middle { vertical-align: middle !important; }
+        .valign#{$bprule}-bottom { vertical-align: bottom !important; }
+        .valign#{$bprule}-text-bottom { vertical-align: text-bottom !important; }
+        .valign#{$bprule}-text-top { vertical-align: text-top !important; }
     }
 }