Splitting the grid and the rest

.gitignore

@@ -0,0 +1 @@
+.idea

quilk.js

@@ -0,0 +1,47 @@
+/**
+ * Simple build file for the sass.
+ * 1 - npm install -g quilk
+ * 2 - quilk (builds the non minified version)
+ * 3 - quilk release=prod (builds the minified version)
+ */
+
+
+module.exports = {
+    modules: [
+        {
+            name: 'To CSS',
+            module: 'sass_std',
+            outputStyle: 'nested',
+            sourceComments: false,
+            input_path: '/simple-grid.scss',
+            target: '/simple-grid.css'
+        }
+    ],
+
+    dont_watch: [
+        'simple-grid.css'
+    ],
+
+    release_commands_or_modules: {
+        prod: {
+            post: [{
+                name: "Minify the css",
+                module: "node_minify",
+                type: "sqwish",
+                input: [
+                    "/simple-grid.css"
+                ],
+                target: "/simple-grid.min.css"
+            }]
+        }
+    },
+
+    developers: {
+        default: {
+            platform: "windows",
+            notifier: {
+                on: false
+            }
+        }
+    }
+};

simple-grid.css

@@ -1,12 +1,4 @@
-/**
-*** SIMPLE GRID
-*** (C) ZACH COLE 2016
-**/
-
 @import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);
-
-/* UNIVERSAL */
-
 html,
 body {
   height: 100%;
@@ -15,99 +7,105 @@ body {
   padding: 0;
   left: 0;
   top: 0;
-  font-size: 100%;
-}
-
-/* ROOT FONT STYLES */
+  font-size: 100%; }
 
 * {
-  font-family: 'Lato', Helvetica, sans-serif;
+  font-family: "Lato", Helvetica, sans-serif;
   color: #333447;
-  line-height: 1.5;
-}
-
-/* TYPOGRAPHY */
+  line-height: 1.5; }
 
 h1 {
-  font-size: 2.5rem;
-}
+  font-size: 2.5rem; }
 
 h2 {
-  font-size: 2rem;
-}
+  font-size: 2rem; }
 
 h3 {
-  font-size: 1.375rem;
-}
+  font-size: 1.375rem; }
 
 h4 {
-  font-size: 1.125rem;
-}
+  font-size: 1.125rem; }
 
 h5 {
-  font-size: 1rem;
-}
+  font-size: 1rem; }
 
 h6 {
-  font-size: 0.875rem;
-}
+  font-size: 0.875rem; }
 
 p {
   font-size: 1.125rem;
   font-weight: 200;
-  line-height: 1.8;
-}
+  line-height: 1.8; }
 
 .font-light {
-  font-weight: 300;
-}
+  font-weight: 300; }
 
 .font-regular {
-  font-weight: 400;
-}
+  font-weight: 400; }
 
 .font-heavy {
-  font-weight: 700;
-}
-
-/* POSITIONING */
+  font-weight: 700; }
 
 .left {
-  text-align: left;
-}
+  text-align: left; }
 
 .right {
-  text-align: right;
-}
+  text-align: right; }
 
 .center {
   text-align: center;
   margin-left: auto;
-  margin-right: auto;
-}
+  margin-right: auto; }
 
 .justify {
-  text-align: justify;
-}
+  text-align: justify; }
 
-/* ==== GRID SYSTEM ==== */
+.hidden-sm {
+  display: none; }
 
 .container {
   width: 90%;
   margin-left: auto;
-  margin-right: auto;
-}
+  margin-right: auto; }
+  @media only screen and (min-width: 33.75em) {
+    .container {
+      width: 80%; } }
+  @media only screen and (min-width: 60em) {
+    .container {
+      width: 75%;
+      max-width: 60rem; } }
 
 .row {
   position: relative;
-  width: 100%;
-}
+  width: 100%; }
 
-.row [class^="col"] {
-  float: left;
-  margin: 0.5rem 2%;
-  min-height: 0.125rem;
-}
+.row {
+  position: relative;
+  width: 100%; }
+  .row:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .row .col-1, .row .col-1-sm,
+  .row .col-2, .row .col-2-sm,
+  .row .col-3, .row .col-3-sm,
+  .row .col-4, .row .col-4-sm,
+  .row .col-5, .row .col-5-sm,
+  .row .col-6, .row .col-6-sm,
+  .row .col-7, .row .col-7-sm,
+  .row .col-8, .row .col-8-sm,
+  .row .col-9, .row .col-9-sm,
+  .row .col-10, .row .col-10-sm,
+  .row .col-11, .row .col-11-sm,
+  .row .col-12, .row .col-12-sm {
+    float: left;
+    margin: 0.5rem 2%;
+    min-height: 0.125rem; }
+
+.row::after {
+  content: "";
+  display: table;
+  clear: both; }
 
 .col-1,
 .col-2,
@@ -121,130 +119,68 @@ p {
 .col-10,
 .col-11,
 .col-12 {
-  width: 96%;
-}
+  width: 96%; }
 
 .col-1-sm {
-  width: 4.33%;
-}
+  width: 4.33333%; }
 
 .col-2-sm {
-  width: 12.66%;
-}
+  width: 12.66667%; }
 
 .col-3-sm {
-  width: 21%;
-}
+  width: 21%; }
 
 .col-4-sm {
-  width: 29.33%;
-}
+  width: 29.33333%; }
 
 .col-5-sm {
-  width: 37.66%;
-}
+  width: 37.66667%; }
 
 .col-6-sm {
-  width: 46%;
-}
+  width: 46%; }
 
 .col-7-sm {
-  width: 54.33%;
-}
+  width: 54.33333%; }
 
 .col-8-sm {
-  width: 62.66%;
-}
+  width: 62.66667%; }
 
 .col-9-sm {
-  width: 71%;
-}
+  width: 71%; }
 
 .col-10-sm {
-  width: 79.33%;
-}
+  width: 79.33333%; }
 
 .col-11-sm {
-  width: 87.66%;
-}
+  width: 87.66667%; }
 
 .col-12-sm {
-  width: 96%;
-}
-
-.row::after {
-	content: "";
-	display: table;
-	clear: both;
-}
+  width: 96%; }
 
-.hidden-sm {
-  display: none;
-}
-
-@media only screen and (min-width: 33.75em) {  /* 540px */
-  .container {
-    width: 80%;
-  }
-}
-
-@media only screen and (min-width: 45em) {  /* 720px */
+@media only screen and (min-width: 45em) {
   .col-1 {
-    width: 4.33%;
-  }
-
+    width: 4.33333%; }
   .col-2 {
-    width: 12.66%;
-  }
-
+    width: 12.66667%; }
   .col-3 {
-    width: 21%;
-  }
-
+    width: 21%; }
   .col-4 {
-    width: 29.33%;
-  }
-
+    width: 29.33333%; }
   .col-5 {
-    width: 37.66%;
-  }
-
+    width: 37.66667%; }
   .col-6 {
-    width: 46%;
-  }
-
+    width: 46%; }
   .col-7 {
-    width: 54.33%;
-  }
-
+    width: 54.33333%; }
   .col-8 {
-    width: 62.66%;
-  }
-
+    width: 62.66667%; }
   .col-9 {
-    width: 71%;
-  }
-
+    width: 71%; }
   .col-10 {
-    width: 79.33%;
-  }
-
+    width: 79.33333%; }
   .col-11 {
-    width: 87.66%;
-  }
-
+    width: 87.66667%; }
   .col-12 {
-    width: 96%;
-  }
-
+    width: 96%; }
   .hidden-sm {
-    display: block;
-  }
-}
-
-@media only screen and (min-width: 60em) { /* 960px */
-  .container {
-    width: 75%;
-    max-width: 60rem;
-  }
-}
+    display: block; } }