Merge pull request #765 from texastribune/flex-helpers

Flexbox helpers 💪

.vscode/settings.json

@@ -2,6 +2,7 @@
     "conventionalCommits.scopes": [
         "icons",
         "deps",
+        "layout",
         "type"
     ]
 }

assets/scss/7-layout/_align-items.scss

@@ -0,0 +1,13 @@
+// Align items (l-ai-<position>)
+//
+// Alignment utilities for flex/grid elements. {{isHelper}}
+//
+// l-ai-center - **align-items: center** Center items vertically (if row).
+//
+// Markup: Parent: <code>display: flex</code> + <code>.{{className}}</code>  <div style="border: 2px solid black; height: 100px; display:flex" class="{{ className }}"><div class="has-bg-yellow has-padding">Child</div></div>
+//
+//
+// Styleguide 7.0.4
+.l-ai-center {
+  align-items: center;
+}

assets/scss/7-layout/_all.scss

@@ -4,11 +4,14 @@
 //
 // Styleguide 7.0.0
 @import 'align';
+@import 'align-items';
 @import 'container';
 @import 'col-grid';
 @import 'content-grid';
 @import 'display';
+@import 'flex';
 @import 'height';
+@import 'justify-content';
 @import 'multicol';
 @import 'position';
 @import 'width';

assets/scss/7-layout/_flex.scss

@@ -0,0 +1,24 @@
+// Flex  (l-flex)
+//
+// Barebones flex helpers. This breaks some convention with other layout classes, but we use flexbox enough to justify it. <br><br>💡 See [align-items](/sections/layout/l-ai-position/) and [justify-content](/sections/layout/l-jc-position/) helpers for alignment helpers. {{isHelper}}
+//
+// .l-flex - **display:flex** Uses flexbox.
+// .l-flex-row - **flex-direction: row** Horizontal flexbox. (default)
+// .l-flex-column - **flex-direction: column** Vertical flexbox.
+//
+// Markup: 7-layout/flex.html
+// 
+//
+// Styleguide 7.0.4
+
+.l-flex {
+  display: flex;
+}
+
+.l-flex-row {
+  flex-direction: row;
+}
+
+.l-flex-column {
+  flex-direction: column;
+}

assets/scss/7-layout/_justify-content.scss

@@ -0,0 +1,18 @@
+// Justify content (l-jc-<position>)
+//
+// Alignment utilities for flex/grid elements. {{isHelper}}
+//
+// l-jc-center - **align-items: center** Center items horizontally (if row).
+// l-jc-space - **justify-content: space-between** Evenly space items horizontally (if row).
+//
+// Markup: Parent: <code>display: flex</code> + <code>.{{className}}</code>  <div style="border: 2px solid black; height: 100px; display:flex" class="{{ className }}"><div class="has-bg-yellow has-padding">Child</div><div class="has-bg-black has-text-white has-padding">Child</div></div>
+//
+//
+// Styleguide 7.0.4
+.l-jc-center {
+  justify-content: center;
+}
+
+.l-jc-space {
+  justify-content: space-between;
+}

assets/scss/7-layout/flex.html

@@ -0,0 +1,11 @@
+{% if className == 'l-flex' %}
+    <div class="has-padding {{className}}">
+        <div class="has-bg-black has-text-white" style="width: 150px; height: 150px;">1</div>
+        <div class="has-bg-yellow" style="width: 150px; height: 150px;">2</div>
+    </div>    
+{% else %}
+<div class="has-padding has-section-padding has-border l-flex {{className}}">
+    <div class="has-bg-black has-text-white" style="width: 150px; height: 150px;">1</div>
+    <div class="has-bg-yellow" style="width: 150px; height: 150px;">2</div>
+  </div>
+{% endif %}