[fix: #214] Add x-*, sm-*, md-*, lg-*, xl-* columns and offsets

Author: James Kolce

_globals.scss

@@ -93,6 +93,9 @@ $scale-ratio-secondary: $perfect-fourth !default;
 // Grid
 // ----
 
+// Create x-*, sm-*, md-*, lg-*, xl-* columns and offsets
+$full-grid: false;
+
 // Max width for container
 $container-width: 1200px !default;
 

src/_atgrid.scss

@@ -107,7 +107,6 @@
   //
   // Column widths
   //
-
   @for $i from 1 through $num-columns {
     [#{$prefix}column~="#{$i}"] {
       flex: 0 1 ($i/$num-columns) * 100%;
@@ -118,10 +117,116 @@
   //
   // Column offsets
   //
-
   @for $i from 1 through $num-columns {
     [#{$prefix}column~="+#{$i}"] {
       margin-left: ($i/$num-columns) * 100%;
     }
   }
 }
+
+@if ($full-grid) {
+  @media (--extra-small) {
+    //
+    // Column widths
+    //
+    @for $i from 1 through $num-columns {
+      [#{$prefix}column~="xs-#{$i}"] {
+        flex: 0 1 ($i/$num-columns) * 100%;
+        max-width: ($i/$num-columns) * 100%;
+      }
+    }
+
+    //
+    // Column offsets
+    //
+    @for $i from 1 through $num-columns {
+      [#{$prefix}column~="+xs-#{$i}"] {
+        margin-left: ($i/$num-columns) * 100%;
+      }
+    }
+  }
+
+  @media (--small) {
+    //
+    // Column widths
+    //
+    @for $i from 1 through $num-columns {
+      [#{$prefix}column~="sm-#{$i}"] {
+        flex: 0 1 ($i/$num-columns) * 100%;
+        max-width: ($i/$num-columns) * 100%;
+      }
+    }
+
+    //
+    // Column offsets
+    //
+    @for $i from 1 through $num-columns {
+      [#{$prefix}column~="+sm-#{$i}"] {
+        margin-left: ($i/$num-columns) * 100%;
+      }
+    }
+  }
+
+  @media (--medium) {
+    //
+    // Column widths
+    //
+    @for $i from 1 through $num-columns {
+      [#{$prefix}column~="md-#{$i}"] {
+        flex: 0 1 ($i/$num-columns) * 100%;
+        max-width: ($i/$num-columns) * 100%;
+      }
+    }
+
+    //
+    // Column offsets
+    //
+    @for $i from 1 through $num-columns {
+      [#{$prefix}column~="+md-#{$i}"] {
+        margin-left: ($i/$num-columns) * 100%;
+      }
+    }
+  }
+
+  @media (--large) {
+    //
+    // Column widths
+    //
+    @for $i from 1 through $num-columns {
+      [#{$prefix}column~="lg-#{$i}"] {
+        flex: 0 1 ($i/$num-columns) * 100%;
+        max-width: ($i/$num-columns) * 100%;
+      }
+    }
+
+    //
+    // Column offsets
+    //
+    @for $i from 1 through $num-columns {
+      [#{$prefix}column~="+lg-#{$i}"] {
+        margin-left: ($i/$num-columns) * 100%;
+      }
+    }
+  }
+
+  @media (--extra-large) {
+    //
+    // Column widths
+    //
+    @for $i from 1 through $num-columns {
+      [#{$prefix}column~="xl-#{$i}"] {
+        flex: 0 1 ($i/$num-columns) * 100%;
+        max-width: ($i/$num-columns) * 100%;
+      }
+    }
+
+    //
+    // Column offsets
+    //
+    @for $i from 1 through $num-columns {
+      [#{$prefix}column~="+xl-#{$i}"] {
+        margin-left: ($i/$num-columns) * 100%;
+      }
+    }
+  }
+}

test.html

@@ -236,6 +236,18 @@ <h6>Heading 6 <small>Helper text</small></h6>
     </div>
   </div>
 
+  <div grid>
+    <div column="xs-1 sm-2 md-3 lg-4 xl-5">
+      <span class="grid--example">xs-1 sm-2 md-3 lg-4 xl-5</span>
+    </div>
+  </div>
+
+  <div grid>
+    <div column="1 +xs-1 +sm-2 +md-3 +lg-4 +xl-5">
+      <span class="grid--example">1 +xs-1 +sm-2 +md-3 +lg-4 +xl-5</span>
+    </div>
+  </div>
+
   <table>
     <thead>
       <tr>