Use numeric column names over descriptive ones

h/static/styles/grid.scss

@@ -25,12 +25,15 @@
 //     <div class="column-tablet-1-2 column-desktop-1-4"></div>
 //     <div class="column-tablet-1-2 column-desktop-1-4"></div>
 //   </div>
+
+$grid-default-gutter: 20px !default;
+
 .grid {
-  @include grid-row;
+  @include grid-row($grid-default-gutter);
 }
 
 [class^="column-"], [class*=" column-"] {
-  @include grid-column;
+  @include grid-column($grid-default-gutter);
 }
 
 @include grid-setup("column-");

h/static/styles/mixins/grid.scss

@@ -51,11 +51,11 @@
 
 // Defines selectors for a class based grid system. Only includes a few common
 // sizes at the moment, but can be expanded as necessary.
-@mixin grid-setup($prefix: "") {
-  .#{$prefix}one-whole { width: 100%; }
-  .#{$prefix}one-half  { width: 50%; }
-  .#{$prefix}one-third { width: 33.333%; }
-  .#{$prefix}two-thirds { width: 66.666%; }
-  .#{$prefix}one-quarter { width: 25%; }
-  .#{$prefix}three-quarters { width: 75%; }
+@mixin grid-setup($namespace: "") {
+  .#{$namespace}1-1 { width: 100%; }
+  .#{$namespace}1-2 { width: 50%; }
+  .#{$namespace}1-3 { width: 33.333%; }
+  .#{$namespace}2-3 { width: 66.666%; }
+  .#{$namespace}1-4 { width: 25%; }
+  .#{$namespace}3-4 { width: 75%; }
 }