feat: Add flexbox utility classes

_sparkle-defaults.scss

@@ -24,3 +24,9 @@
 @import "utilities/text-align/map";
 @import "utilities/text-decoration/map";
 @import "utilities/text-transform/map";
+@import "utilities/justify-content/map";
+@import "utilities/align-items/map";
+@import "utilities/align-self/map";
+@import "utilities/order/map";
+@import "utilities/flex-direction/map";
+@import "utilities/flex-wrap/map";

_sparkle-settings.scss

@@ -25,5 +25,13 @@ $settings: (
   'utility-text-align': true,
   'utility-text-decoration': true,
   'utility-text-transform': true,
-  'utility-visually-hidden': true
+  'utility-visually-hidden': true,
+  'utility-justify-content': true,
+  'utility-align-items': true,
+  'utility-align-self': true,
+  'utility-order': true,
+  'utility-flex-direction': true,
+  'utility-flex-grow': true,
+  'utility-flex-shrink': true,
+  'utility-flex-wrap': true
 ) !default;

_utilities.scss

@@ -5,3 +5,12 @@
 @import "utilities/text-decoration/utility";
 @import "utilities/text-transform/utility";
 @import "utilities/visually-hidden/utility";
+@import "utilities/justify-content/utility";
+@import "utilities/align-items/utility";
+@import "utilities/align-self/utility";
+@import "utilities/order/utility";
+@import "utilities/flex-direction/utility";
+@import "utilities/flex-grow/utility";
+@import "utilities/flex-shrink/utility";
+@import "utilities/flex-wrap/utility";
+

test/test.scss

@@ -44,6 +44,14 @@
 @import "../utilities/text-align/test";
 @import "../utilities/text-decoration/test";
 @import "../utilities/visually-hidden/test";
+@import "../utilities/justify-content/test";
+@import "../utilities/align-items/test";
+@import "../utilities/align-self/test";
+@import "../utilities/order/test";
+@import "../utilities/flex-direction/test";
+@import "../utilities/flex-grow/test";
+@import "../utilities/flex-shrink/test";
+@import "../utilities/flex-wrap/test";
 
 // Globals
 @import "../globals/media-queries/test";

utilities/align-items/_map.scss

@@ -0,0 +1,8 @@
+$util-align-items-values: (
+  start,
+  end,
+  flex-start,
+  flex-end,
+  center,
+  stretch
+) !default;

utilities/align-items/_mixin.scss

@@ -0,0 +1,9 @@
+@mixin sparkle-align-items {
+  @each $value in $util-align-items-values {
+    .#{settings(prefix)}-align-items-#{$value} {
+      @include loop-mq {
+        align-items: $value;
+      }
+    }
+  }
+}

utilities/align-items/_test.scss

@@ -0,0 +1,49 @@
+@import 'true';
+@import 'mixin';
+@import '../../tools/settings/function';
+@import '../../tools/loop-mq/mixin';
+
+$settings: (
+  'prefix': 'util',
+  'loop-mq': true
+);
+
+$util-align-items-values: (
+  center,
+  stretch
+);
+
+$media-queries: (
+  'sm': 40rem
+);
+
+@include describe('The align-items utility mixin') {
+  @include it('outputs the proper utility classes') {
+    @include assert {
+      @include output {
+        @include sparkle-align-items();
+      }
+      @include expect {
+        .util-align-items-center {
+          align-items: center;
+        }
+
+        @media (min-width: 40rem) {
+          .util-align-items-center\@sm {
+            align-items: center;
+          }
+        }
+
+        .util-align-items-stretch {
+          align-items: stretch;
+        }
+
+        @media (min-width: 40rem) {
+          .util-align-items-stretch\@sm {
+            align-items: stretch;
+          }
+        }
+      }
+    }
+  }
+}

utilities/align-items/_utility.scss

@@ -0,0 +1,38 @@
+@import "mixin";
+
+@if settings(utility-align-items) {
+  /* ---
+  title: Align Items Utility
+  section: Utilities
+  ---
+  <table>
+  <thead>
+  <tr>
+  <th>Class Name</th>
+  <th>Property</th>
+  </thead>
+  <tbody>
+  */
+
+  // NOTE: This @each loop is only for document generation
+  @each $value in $util-align-items-values {
+    /* ---
+    section: Utilities
+    ---
+    <tr>
+    <td>`.#{settings(prefix)}-align-items-#{$value}`</td>
+    <td>`align-items: #{$value}`</td>
+    </tr>
+    */
+  }
+
+  /* ---
+  section: Utilities
+  ---
+  </tbody>
+  </table>
+  */
+
+  // Load the mixin
+  @include sparkle-align-items;
+}

utilities/align-self/_map.scss

@@ -0,0 +1,8 @@
+$util-align-self-values: (
+  start,
+  end,
+  flex-start,
+  flex-end,
+  center,
+  stretch
+) !default;

utilities/align-self/_mixin.scss

@@ -0,0 +1,9 @@
+@mixin sparkle-align-self {
+  @each $value in $util-align-self-values {
+    .#{settings(prefix)}-align-self-#{$value} {
+      @include loop-mq {
+        align-self: $value;
+      }
+    }
+  }
+}

utilities/align-self/_test.scss

@@ -0,0 +1,49 @@
+@import 'true';
+@import 'mixin';
+@import '../../tools/settings/function';
+@import '../../tools/loop-mq/mixin';
+
+$settings: (
+  'prefix': 'util',
+  'loop-mq': true
+);
+
+$util-align-self-values: (
+  center,
+  stretch
+);
+
+$media-queries: (
+  'sm': 40rem
+);
+
+@include describe('The align-self utility mixin') {
+  @include it('outputs the proper utility classes') {
+    @include assert {
+      @include output {
+        @include sparkle-align-self();
+      }
+      @include expect {
+        .util-align-self-center {
+          align-self: center;
+        }
+
+        @media (min-width: 40rem) {
+          .util-align-self-center\@sm {
+            align-self: center;
+          }
+        }
+
+        .util-align-self-stretch {
+          align-self: stretch;
+        }
+
+        @media (min-width: 40rem) {
+          .util-align-self-stretch\@sm {
+            align-self: stretch;
+          }
+        }
+      }
+    }
+  }
+}

utilities/align-self/_utility.scss

@@ -0,0 +1,38 @@
+@import "mixin";
+
+@if settings(utility-align-self) {
+  /* ---
+  title: Align Self Utility
+  section: Utilities
+  ---
+  <table>
+  <thead>
+  <tr>
+  <th>Class Name</th>
+  <th>Property</th>
+  </thead>
+  <tbody>
+  */
+
+  // NOTE: This @each loop is only for document generation
+  @each $value in $util-align-self-values {
+    /* ---
+    section: Utilities
+    ---
+    <tr>
+    <td>`.#{settings(prefix)}-align-self-#{$value}`</td>
+    <td>`align-self: #{$value}`</td>
+    </tr>
+    */
+  }
+
+  /* ---
+  section: Utilities
+  ---
+  </tbody>
+  </table>
+  */
+
+  // Load the mixin
+  @include sparkle-align-self;
+}

utilities/flex-direction/_map.scss

@@ -0,0 +1,6 @@
+$util-flex-direction-values: (
+  row,
+  row-reverse,
+  column,
+  column-reverse
+) !default;

utilities/flex-direction/_mixin.scss

@@ -0,0 +1,9 @@
+@mixin sparkle-flex-direction {
+  @each $value in $util-flex-direction-values {
+    .#{settings(prefix)}-flex-#{$value} {
+      @include loop-mq {
+        flex-direction: $value;
+      }
+    }
+  }
+}

utilities/flex-direction/_test.scss

@@ -0,0 +1,49 @@
+@import 'true';
+@import 'mixin';
+@import '../../tools/settings/function';
+@import '../../tools/loop-mq/mixin';
+
+$settings: (
+  'prefix': 'util',
+  'loop-mq': true
+);
+
+$util-flex-direction-values: (
+  row,
+  column
+);
+
+$media-queries: (
+  'sm': 40rem
+);
+
+@include describe('The flex-direction utility mixin') {
+  @include it('outputs the proper utility classes') {
+    @include assert {
+      @include output {
+        @include sparkle-flex-direction();
+      }
+      @include expect {
+        .util-flex-row {
+          flex-direction: row;
+        }
+
+        @media (min-width: 40rem) {
+          .util-flex-row\@sm {
+            flex-direction: row;
+          }
+        }
+
+        .util-flex-column {
+          flex-direction: column;
+        }
+
+        @media (min-width: 40rem) {
+          .util-flex-column\@sm {
+            flex-direction: column;
+          }
+        }
+      }
+    }
+  }
+}

utilities/flex-direction/_utility.scss

@@ -0,0 +1,38 @@
+@import "mixin";
+
+@if settings(utility-flex-direction) {
+  /* ---
+  title: Flex Direction Utility
+  section: Utilities
+  ---
+  <table>
+  <thead>
+  <tr>
+  <th>Class Name</th>
+  <th>Property</th>
+  </thead>
+  <tbody>
+  */
+
+  // NOTE: This @each loop is only for document generation
+  @each $value in $util-flex-direction-values {
+    /* ---
+    section: Utilities
+    ---
+    <tr>
+    <td>`.#{settings(prefix)}-flex-#{$value}`</td>
+    <td>`flex-direction: #{$value}`</td>
+    </tr>
+    */
+  }
+
+  /* ---
+  section: Utilities
+  ---
+  </tbody>
+  </table>
+  */
+
+  // Load the mixin
+  @include sparkle-flex-direction;
+}

utilities/flex-grow/_mixin.scss

@@ -0,0 +1,9 @@
+@mixin sparkle-flex-grow {
+  @for $value from 0 through 2 {
+    .#{settings(prefix)}-flex-grow-#{$value} {
+      @include loop-mq {
+        flex-grow: $value;
+      }
+    }
+  }
+}