Git init

_assets/sass/mixins/_breakpoint.scss

@@ -0,0 +1,27 @@
+/*
+ * Media query shorthand, to be used with variables from $site-breakpoints
+ * Defaults to min-width
+ * 
+ * Usage: @include mq(lg, min/max(optional) ) { ... }
+ */
+
+@function breakpoint-min($name, $breakpoints: $site-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+@mixin mq($name, $type: min) {
+  $min: breakpoint-min($name);
+
+  @if $min {
+    @if $type == max {
+        $min: $min - 1px;
+    }
+
+    @media ( #{$type}-width: $min ) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}

_assets/sass/mixins/_columns.scss

@@ -0,0 +1,48 @@
+/*
+ * Generate grid cols
+ * 
+ */
+
+@mixin grid-col-padding ($gutter) {
+  padding-left: $gutter / 2;
+  padding-right: $gutter / 2;
+  /*
+   * Default columns align left width smallest width
+   */
+  flex: 0 0 auto;
+}
+
+@mixin grid-col-flex ($size) {
+  width: percentage($size / $column-count);
+  max-width: percentage($size / $column-count);
+  flex: 0 0 percentage($size / $column-count);
+}
+
+// generate paddings
+@each $breakpoint, $gutter in $column-gutter {
+  @include mq($breakpoint) {
+    #{$row-class} > * {
+      @include grid-col-padding($gutter);
+    }
+  }
+}
+
+// generate flex styles
+@each $breakpoint, $size in $site-breakpoints {
+  @include mq($breakpoint) {
+
+    $index: index($site-breakpoints, $breakpoint $size);
+
+    @for $i from 1 through $column-count {
+      // ignore first breakpoint class, e.g. .col instead of .col-sm
+      $className : if( $index > 1, 
+                       #{$column-class}-#{$breakpoint}-#{$i}, 
+                       #{$column-class}-#{$i} );
+
+      #{$className} {
+        @include grid-col-flex($i);
+      }
+    }
+
+  }
+}

_assets/sass/mixins/_rows.scss

@@ -0,0 +1,27 @@
+/*
+ * Generate grid rows
+ * 
+ * $row-class defines the row classname. E.G. .row
+ * $column-gutter sets the negative margins for each defined breakpoint.
+ * 
+ */
+
+@mixin row-gutters($gutter) {
+  margin-left: ($gutter / -2);
+  margin-right: ($gutter / -2);
+}
+
+@mixin row () {
+  display: flex;
+  flex-wrap: wrap;
+
+  @each $breakpoint, $gutter in $column-gutter {
+    @include mq($breakpoint) {
+      @include row-gutters($gutter);
+    }
+  }
+}
+
+#{$row-class} {
+  @include row();
+}