Split out the container, display, positioning and spacing helpers.

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: [daveberning]
+patreon: daveberning
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.gitignore

@@ -2,3 +2,4 @@ node_modules
 .idea
 dist/editor.blocks.js
 .DS_Store
+.vscode

README.md

@@ -293,7 +293,7 @@ Feel free to add any modifiers to this to create different styled buttons.
 <button class="is-button is-cta is-rounded is-outline">Send Message</button>
 ```
 
-# Modifers
+# Modifiers
 These are classes that you can tack on to just about anything to add additional styles. These are typically agnostic to the HTML element it's attached to.
 
 ## Spacing Modifiers
@@ -329,7 +329,7 @@ We've also included helper classes to hide and show elements on touch screen dev
 `is-device`: Shows an element on a touch screen device
 `is-screen`: Shows an element on a non-touch screen device
 
-## Color Modifers
+## Color Modifiers
 We've touched on this briefly in other sections. But there are modifier classes for each color type (ex: primary) for text and backgrounds.
 
 `is-text-{type}`: Changes the color of the text per the type's value

dist/utils/containers.css

@@ -0,0 +1 @@
+.has-container{max-width:var(--container-width);width:100%;margin:0 auto}

dist/utils/positioning.css

@@ -0,0 +1 @@
+.is-centered{display:flex;align-items:center;justify-content:center}.is-centered-horizontally{display:flex;justify-content:center}.is-centered-vertically{display:flex;align-items:center}

src/scss/includes/utilities.scss

@@ -1,75 +1,10 @@
 @import 'functions';
 @import '../variables';
 
-/* Containers
------------------------------- */
-.has-container {
-  max-width: variable('container-width');
-  width: 100%;
-  margin: 0 auto;
-}
-
-/* Spacing
------------------------------- */
-$directions: "-top" "-right" "-bottom" "-left";
-$sizes: "" "-md" "-lg";
-
-@mixin generate_spacing($property) {
-  $propertyFirstLetter: get_first_chars($property, 1);
-
-  @each $size in $sizes {
-    .has-#{$propertyFirstLetter}#{$size} { #{$property}: variable("spacing#{$size}"); }
-    @each $direction in $directions {
-      .has-#{$propertyFirstLetter}#{$direction}#{$size} {
-        #{$property}#{$direction}: variable("spacing#{$size}");
-      }
-    }
-  }
-
-  .has-no-#{$propertyFirstLetter} { margin: 0; } // Ex: has-no-p and has-no-m
-  @each $direction in $directions {
-    .has-no#{$direction}-#{$propertyFirstLetter} { #{$property}#{$direction}: 0; } // Ex: has-no-top-p and has-no-top-m
-  }
-}
-
-@mixin generate_display_classes {
-  $display_types: "block" "inline-block" "flex" "inline-flex" "grid" "inline-grid";
-
-  @each $type in $display_types {
-    .is-#{$type} { display: #{$type}; }
-
-    @for $i from 1 through length($breakpoints) {
-      .is-#{$type}-#{nth($breakpoints, $i)} {
-        @media screen and (min-width: #{nth($breakpoint_values, $i)}) { display: #{$type}; }
-      }
-    }
-  }
-}
-
-@include generate_spacing('margin');
-@include generate_spacing('padding');
-
-/* Positioning
------------------------------- */
-.is-centered {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.is-centered-horizontally {
-  display: flex;
-  justify-content: center;
-}
-
-.is-centered-vertically {
-  display: flex;
-  align-items: center;
-}
-
-/* Display
------------------------------- */
-@include generate_display_classes;
+@import 'utilities/containers';
+@import 'utilities/spacing';
+@import 'utilities/positioning';
+@import 'utilities/displaying';
 
 /* Images
 ------------------------------ */

src/scss/includes/utilities/containers.scss

@@ -0,0 +1,7 @@
+@import '../functions';
+
+.has-container {
+    max-width: variable('container-width');
+    width: 100%;
+    margin: 0 auto;
+}

src/scss/includes/utilities/displaying.scss

@@ -0,0 +1,17 @@
+@import '../../variables';
+
+@mixin generate_display_classes {
+    $display_types: "block" "inline-block" "flex" "inline-flex" "grid" "inline-grid";
+
+    @each $type in $display_types {
+      .is-#{$type} { display: #{$type}; }
+
+      @for $i from 1 through length($breakpoints) {
+        .is-#{$type}-#{nth($breakpoints, $i)} {
+          @media screen and (min-width: #{nth($breakpoint_values, $i)}) { display: #{$type}; }
+        }
+      }
+    }
+  }
+
+@include generate_display_classes;

src/scss/includes/utilities/positioning.scss

@@ -0,0 +1,15 @@
+.is-centered {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.is-centered-horizontally {
+    display: flex;
+    justify-content: center;
+}
+
+.is-centered-vertically {
+    display: flex;
+    align-items: center;
+}

src/scss/includes/utilities/spacing.scss

@@ -0,0 +1,26 @@
+@import '../functions';
+@import '../../variables';
+
+$directions: "-top" "-right" "-bottom" "-left";
+$sizes: "" "-md" "-lg";
+
+@mixin generate_spacing($property) {
+  $propertyFirstLetter: get_first_chars($property, 1);
+
+  @each $size in $sizes {
+    .has-#{$propertyFirstLetter}#{$size} { #{$property}: variable("spacing#{$size}"); }
+    @each $direction in $directions {
+      .has-#{$propertyFirstLetter}#{$direction}#{$size} {
+        #{$property}#{$direction}: variable("spacing#{$size}");
+      }
+    }
+  }
+
+  .has-no-#{$propertyFirstLetter} { margin: 0; } // Ex: has-no-p and has-no-m
+  @each $direction in $directions {
+    .has-no#{$direction}-#{$propertyFirstLetter} { #{$property}#{$direction}: 0; } // Ex: has-no-top-p and has-no-top-m
+  }
+}
+
+@include generate_spacing('margin');
+@include generate_spacing('padding');

webpack.config.js

@@ -3,6 +3,10 @@ const path = require('path');
 module.exports = {
   mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
   entry: [
+    './src/scss/includes/utilities/containers.scss',
+    './src/scss/includes/utilities/displaying.scss',
+    './src/scss/includes/utilities/positioning.scss',
+    './src/scss/includes/utilities/spacing.scss',
     './src/scss/includes/grid.scss',
     './src/scss/includes/grid-plus.scss',
     './src/scss/main.scss'
@@ -18,7 +22,15 @@ module.exports = {
         use: [
           {
             loader: 'file-loader',
-            options: { name: '[name].css', }
+            options: { 
+                name: '[name].css',
+                outputPath: (url, resourcePath, context) => {
+                    if(/utilities/.test(resourcePath)) {
+                        return `utils/${url}`;
+                    }
+                    return url;
+                }
+            }
           },
           { loader: 'extract-loader' },
           { loader: 'css-loader?-url' },