From 0e70981e32595ab32c0916278757a6efcee5b1e7 Mon Sep 17 00:00:00 2001
From: Alex Windett <alex@bigfish.co.uk>
Date: Tue, 25 Oct 2016 16:43:34 +0100
Subject: [PATCH] Grid - refactoring columns with postcss-for

---
 ui/package.json                    |   1 +
 ui/src/components/column/style.css | 116 +++--------------------------
 ui/webpack/base.js                 |   3 +-
 3 files changed, 14 insertions(+), 106 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 500ffa3d..a3a0ad6e 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -44,6 +44,7 @@
     "nyc": "^8.3.1",
     "param-case": "^2.1.0",
     "postcss-cssnext": "^2.8.0",
+    "postcss-for": "^2.1.1",
     "postcss-loader": "^1.0.0",
     "postcss-mixins": "^5.4.0",
     "postcss-modules-values": "^1.2.2",
diff --git a/ui/src/components/column/style.css b/ui/src/components/column/style.css
index 5afc2a98..8aa3f8ad 100644
--- a/ui/src/components/column/style.css
+++ b/ui/src/components/column/style.css
@@ -3,11 +3,12 @@
  * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
  */
 
-@value half-gutter-width from "../../constants/sizes.css";
+@value half-gutter-width, grid-columns from "../../constants/sizes.css";
 @value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css";
 
 :root {
   --half-gutter-width: half-gutter-width;
+  --grid-columns: 12;
 }
 
 @define-mixin viewport $size {
@@ -17,112 +18,17 @@
     max-width: 100%;
   }
 
-  &.$(size)-1 {
-    flex-basis: 8.33333333%;
-    max-width: 8.33333333%;
+  @for $i from 1 to 12 {
+    &.$(size)-$i {
+      flex-basis: calc( ($i / var(--grid-columns)) * 100%);
+      max-width: calc( ($i / var(--grid-columns)) * 100%);
+    }
   }
 
-  &.$(size)-2 {
-    flex-basis: 16.66666667%;
-    max-width: 16.66666667%;
-  }
-
-  &.$(size)-3 {
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-
-  &.$(size)-4 {
-    flex-basis: 33.33333333%;
-    max-width: 33.33333333%;
-  }
-
-  &.$(size)-5 {
-    flex-basis: 41.66666667%;
-    max-width: 41.66666667%;
-  }
-
-  &.$(size)-6 {
-    flex-basis: 50%;
-    max-width: 50%;
-  }
-
-  &.$(size)-7 {
-    flex-basis: 58.33333333%;
-    max-width: 58.33333333%;
-  }
-
-  &.$(size)-8 {
-    flex-basis: 66.66666667%;
-    max-width: 66.66666667%;
-  }
-
-  &.$(size)-9 {
-    flex-basis: 75%;
-    max-width: 75%;
-  }
-
-  &.$(size)-10 {
-    flex-basis: 83.33333333%;
-    max-width: 83.33333333%;
-  }
-
-  &.$(size)-11 {
-    flex-basis: 91.66666667%;
-    max-width: 91.66666667%;
-  }
-
-  &.$(size)-12 {
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-
-  &.$(size)-offset-0 {
-    margin-left: 0;
-  }
-
-  &.$(size)-offset-1 {
-    margin-left: 8.33333333%;
-  }
-
-  &.$(size)-offset-2 {
-    margin-left: 16.66666667%;
-  }
-
-  &.$(size)-offset-3 {
-    margin-left: 25%;
-  }
-
-  &.$(size)-offset-4 {
-    margin-left: 33.33333333%;
-  }
-
-  &.$(size)-offset-5 {
-    margin-left: 41.66666667%;
-  }
-
-  &.$(size)-offset-6 {
-    margin-left: 50%;
-  }
-
-  &.$(size)-offset-7 {
-    margin-left: 58.33333333%;
-  }
-
-  &.$(size)-offset-8 {
-    margin-left: 66.66666667%;
-  }
-
-  &.$(size)-offset-9 {
-    margin-left: 75%;
-  }
-
-  &.$(size)-offset-10 {
-    margin-left: 83.33333333%;
-  }
-
-  &.$(size)-offset-11 {
-    margin-left: 91.66666667%;
+  @for $i from 0 to 12 {
+    &.$(size)-offset-$i {
+      margin-left: calc( ($i / var(--grid-columns)) * 100%);
+    }
   }
 }
 
diff --git a/ui/webpack/base.js b/ui/webpack/base.js
index 0586093f..73932904 100644
--- a/ui/webpack/base.js
+++ b/ui/webpack/base.js
@@ -14,7 +14,8 @@ const plugins = {
         plugins: [
           require('postcss-modules-values'),
           require('postcss-mixins')(),
-          require('postcss-cssnext')()
+          require('postcss-for'),
+          require('postcss-cssnext')(),
         ]
       },
       'embed-markdown-loader': {