diff --git a/_config.yml b/_config.yml
index fb2aca0..ff465e1 100644
--- a/_config.yml
+++ b/_config.yml
@@ -7,11 +7,13 @@ permalink:        pretty
 
 # Server
 source:           docs
-url:              http://lucasgruwez.github.io/waffle-grid
+url:              http://lucasgruwez.github.io
+baseurl:          /waffle-grid
 encoding:         UTF-8
 
 # Custom vars
-current_version:  1.0.0
+version:          v1.2.0
 repo:             https://github.com/lucasgruwez/waffle-grid
-
-download:         https://github.com/lucasgruwez/waffle-grid/releases/download/v1.0.0/waffle-grid.min.css
+download:         https://github.com/lucasgruwez/waffle-grid/releases/download/v1.2.0/waffle-grid.min.css
+cdn:              https://unpkg.com/waffle-grid@1.2.0
+docs:             https://github.com/lucasgruwez/waffle-grid/wiki
diff --git a/dist/waffle-grid.css b/dist/waffle-grid.css
index 537f414..aa0ed17 100644
--- a/dist/waffle-grid.css
+++ b/dist/waffle-grid.css
@@ -18,320 +18,427 @@
   display: flex;
   -ms-flex-direction: row;
       flex-direction: row;
-  margin-top: 20px; }
+  width: 100%;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap; }
 
 .col {
   box-sizing: border-box;
-  padding-left: 20px;
+  margin: 10px;
   vertical-align: top; }
 
-.full-width, .row, .col-4-of-4, .col-8-of-8, .col-12-of-12 {
-  width: 100%; }
-
-.half-width, .col-2-of-4, .col-4-of-8, .col-6-of-12 {
-  width: 50%; }
-
-.one-third, .col-4-of-12 {
-  width: 33.33333%; }
-
-.two-thirds, .col-8-of-12 {
-  width: 66.66667%; }
-
-.one-quarter, .col-1-of-4, .col-2-of-8, .col-3-of-12 {
-  width: 25%; }
-
-.two-quarters {
-  width: 50%; }
-
-.three-quarters, .col-3-of-4, .col-6-of-8, .col-9-of-12 {
-  width: 75%; }
-
-.push-full-width, .push-4-of-4, .push-8-of-8, .push-12-of-12 {
-  margin-left: 100%; }
+.center {
+  margin-left: auto;
+  margin-right: auto; }
 
-.push-one-half, .push-2-of-4, .push-4-of-8, .push-6-of-12 {
-  margin-left: 50%; }
+.left {
+  margin-right: auto; }
 
-.push-one-third, .push-4-of-12 {
-  margin-left: 33.33333%; }
+.right {
+  margin-left: auto; }
 
-.push-two-thirds, .push-8-of-12 {
-  margin-left: 66.66667%; }
+.col-1-of-4 {
+  width: calc(25% - 20px); }
 
-.push-one-quarter, .push-1-of-4, .push-2-of-8, .push-3-of-12 {
-  margin-left: 25%; }
+.push-1-of-4 {
+  margin-left: calc(25% + 20px / 2); }
 
-.push-two-quarters {
-  margin-left: 50%; }
+.pull-1-of-4 {
+  margin-right: calc(25% + 20px / 2); }
 
-.push-three-quarters, .push-3-of-4, .push-6-of-8, .push-9-of-12 {
-  margin-left: 75%; }
+.col-2-of-4 {
+  width: calc(50% - 20px); }
 
-.pull-full-width, .pull-4-of-4, .pull-8-of-8, .pull-12-of-12 {
-  margin-right: 100%; }
+.push-2-of-4 {
+  margin-left: calc(50% + 20px / 2); }
 
-.pull-one-half, .pull-2-of-4, .pull-4-of-8, .pull-6-of-12 {
-  margin-right: 50%; }
+.pull-2-of-4 {
+  margin-right: calc(50% + 20px / 2); }
 
-.pull-one-third, .pull-4-of-12 {
-  margin-right: 33.33333%; }
+.col-3-of-4 {
+  width: calc(75% - 20px); }
 
-.pull-two-thirds, .pull-8-of-12 {
-  margin-right: 66.66667%; }
+.push-3-of-4 {
+  margin-left: calc(75% + 20px / 2); }
 
-.pull-one-quarter, .pull-1-of-4, .pull-2-of-8, .pull-3-of-12 {
-  margin-right: 25%; }
+.pull-3-of-4 {
+  margin-right: calc(75% + 20px / 2); }
 
-.pull-two-quarters {
-  margin-right: 50%; }
+.col-4-of-4 {
+  width: calc(100% - 20px); }
 
-.pull-three-quarters, .pull-3-of-4, .pull-6-of-8, .pull-9-of-12 {
-  margin-right: 75%; }
+.push-4-of-4 {
+  margin-left: calc(100% + 20px / 2); }
 
-.center {
-  margin-left: auto;
-  margin-right: auto; }
+.pull-4-of-4 {
+  margin-right: calc(100% + 20px / 2); }
 
 .col-1-of-8 {
-  width: 12.5%; }
+  width: calc(12.5% - 20px); }
 
 .push-1-of-8 {
-  margin-left: 12.5%; }
+  margin-left: calc(12.5% + 20px / 2); }
 
 .pull-1-of-8 {
-  margin-left: -12.5%; }
+  margin-right: calc(12.5% + 20px / 2); }
+
+.col-2-of-8 {
+  width: calc(25% - 20px); }
+
+.push-2-of-8 {
+  margin-left: calc(25% + 20px / 2); }
+
+.pull-2-of-8 {
+  margin-right: calc(25% + 20px / 2); }
 
 .col-3-of-8 {
-  width: 37.5%; }
+  width: calc(37.5% - 20px); }
 
 .push-3-of-8 {
-  margin-left: 37.5%; }
+  margin-left: calc(37.5% + 20px / 2); }
 
 .pull-3-of-8 {
-  margin-left: -37.5%; }
+  margin-right: calc(37.5% + 20px / 2); }
+
+.col-4-of-8 {
+  width: calc(50% - 20px); }
+
+.push-4-of-8 {
+  margin-left: calc(50% + 20px / 2); }
+
+.pull-4-of-8 {
+  margin-right: calc(50% + 20px / 2); }
 
 .col-5-of-8 {
-  width: 62.5%; }
+  width: calc(62.5% - 20px); }
 
 .push-5-of-8 {
-  margin-left: 62.5%; }
+  margin-left: calc(62.5% + 20px / 2); }
 
 .pull-5-of-8 {
-  margin-left: -62.5%; }
+  margin-right: calc(62.5% + 20px / 2); }
+
+.col-6-of-8 {
+  width: calc(75% - 20px); }
+
+.push-6-of-8 {
+  margin-left: calc(75% + 20px / 2); }
+
+.pull-6-of-8 {
+  margin-right: calc(75% + 20px / 2); }
 
 .col-7-of-8 {
-  width: 87.5%; }
+  width: calc(87.5% - 20px); }
 
 .push-7-of-8 {
-  margin-left: 87.5%; }
+  margin-left: calc(87.5% + 20px / 2); }
 
 .pull-7-of-8 {
-  margin-left: -87.5%; }
+  margin-right: calc(87.5% + 20px / 2); }
+
+.col-8-of-8 {
+  width: calc(100% - 20px); }
+
+.push-8-of-8 {
+  margin-left: calc(100% + 20px / 2); }
+
+.pull-8-of-8 {
+  margin-right: calc(100% + 20px / 2); }
 
 .col-1-of-12 {
-  width: 8.33333%; }
+  width: calc(8.33333% - 20px); }
 
 .push-1-of-12 {
-  margin-left: 8.33333%; }
+  margin-left: calc(8.33333% + 20px / 2); }
 
 .pull-1-of-12 {
-  margin-left: -8.33333%; }
+  margin-right: calc(8.33333% + 20px / 2); }
 
 .col-2-of-12 {
-  width: 16.66667%; }
+  width: calc(16.66667% - 20px); }
 
 .push-2-of-12 {
-  margin-left: 16.66667%; }
+  margin-left: calc(16.66667% + 20px / 2); }
 
 .pull-2-of-12 {
-  margin-left: -16.66667%; }
+  margin-right: calc(16.66667% + 20px / 2); }
+
+.col-3-of-12 {
+  width: calc(25% - 20px); }
+
+.push-3-of-12 {
+  margin-left: calc(25% + 20px / 2); }
+
+.pull-3-of-12 {
+  margin-right: calc(25% + 20px / 2); }
+
+.col-4-of-12 {
+  width: calc(33.33333% - 20px); }
+
+.push-4-of-12 {
+  margin-left: calc(33.33333% + 20px / 2); }
+
+.pull-4-of-12 {
+  margin-right: calc(33.33333% + 20px / 2); }
 
 .col-5-of-12 {
-  width: 41.66667%; }
+  width: calc(41.66667% - 20px); }
 
 .push-5-of-12 {
-  margin-left: 41.66667%; }
+  margin-left: calc(41.66667% + 20px / 2); }
 
 .pull-5-of-12 {
-  margin-left: -41.66667%; }
+  margin-right: calc(41.66667% + 20px / 2); }
+
+.col-6-of-12 {
+  width: calc(50% - 20px); }
+
+.push-6-of-12 {
+  margin-left: calc(50% + 20px / 2); }
+
+.pull-6-of-12 {
+  margin-right: calc(50% + 20px / 2); }
 
 .col-7-of-12 {
-  width: 58.33333%; }
+  width: calc(58.33333% - 20px); }
 
 .push-7-of-12 {
-  margin-left: 58.33333%; }
+  margin-left: calc(58.33333% + 20px / 2); }
 
 .pull-7-of-12 {
-  margin-left: -58.33333%; }
+  margin-right: calc(58.33333% + 20px / 2); }
+
+.col-8-of-12 {
+  width: calc(66.66667% - 20px); }
+
+.push-8-of-12 {
+  margin-left: calc(66.66667% + 20px / 2); }
+
+.pull-8-of-12 {
+  margin-right: calc(66.66667% + 20px / 2); }
+
+.col-9-of-12 {
+  width: calc(75% - 20px); }
+
+.push-9-of-12 {
+  margin-left: calc(75% + 20px / 2); }
+
+.pull-9-of-12 {
+  margin-right: calc(75% + 20px / 2); }
 
 .col-10-of-12 {
-  width: 83.33333%; }
+  width: calc(83.33333% - 20px); }
 
 .push-10-of-12 {
-  margin-left: 83.33333%; }
+  margin-left: calc(83.33333% + 20px / 2); }
 
 .pull-10-of-12 {
-  margin-left: -83.33333%; }
+  margin-right: calc(83.33333% + 20px / 2); }
 
 .col-11-of-12 {
-  width: 91.66667%; }
+  width: calc(91.66667% - 20px); }
 
 .push-11-of-12 {
-  margin-left: 91.66667%; }
+  margin-left: calc(91.66667% + 20px / 2); }
 
 .pull-11-of-12 {
-  margin-left: -91.66667%; }
+  margin-right: calc(91.66667% + 20px / 2); }
+
+.col-12-of-12 {
+  width: calc(100% - 20px); }
+
+.push-12-of-12 {
+  margin-left: calc(100% + 20px / 2); }
+
+.pull-12-of-12 {
+  margin-right: calc(100% + 20px / 2); }
 
 @media (max-width: 840px) {
-  .m-vertical {
-    -ms-flex-direction: column;
-        flex-direction: column; }
+  .l-only {
+    display: none; }
   .m-hide {
     display: none; }
-  .m-full-width, .col-m-2-of-2, .col-m-4-of-4, .col-m-6-of-6, .col-m-8-of-8 {
-    width: 100%; }
-  .m-half-width, .col-m-1-of-2, .col-m-2-of-4, .col-m-3-of-6, .col-m-4-of-8 {
-    width: 50%; }
-  .m-one-third, .col-m-2-of-6 {
-    width: 33.33333%; }
-  .m-two-thirds, .col-m-4-of-6 {
-    width: 66.66667%; }
-  .m-one-quarter, .col-m-1-of-4, .col-m-2-of-8 {
-    width: 25%; }
-  .m-two-quarters {
-    width: 50%; }
-  .m-three-quarters, .col-m-3-of-4, .col-m-6-of-8 {
-    width: 75%; }
-  .push-m-full-width, .push-m-2-of-2, .push-m-4-of-4, .push-m-6-of-6, .push-m-8-of-8 {
-    margin-left: 100%; }
-  .push-m-one-half, .push-m-1-of-2, .push-m-2-of-4, .push-m-3-of-6, .push-m-4-of-8 {
-    margin-left: 50%; }
-  .push-m-one-third, .push-m-2-of-6 {
-    margin-left: 33.33333%; }
-  .push-m-two-thirds, .push-m-4-of-6 {
-    margin-left: 66.66667%; }
-  .push-m-one-quarter, .push-m-1-of-4, .push-m-2-of-8 {
-    margin-left: 25%; }
-  .push-m-two-quarters {
-    margin-left: 50%; }
-  .push-m-three-quarters, .push-m-3-of-4, .push-m-6-of-8 {
-    margin-left: 75%; }
-  .pull-m-full-width, .pull-m-2-of-2, .pull-m-4-of-4, .pull-m-6-of-6, .pull-m-8-of-8 {
-    margin-right: 100%; }
-  .pull-m-one-half, .pull-m-1-of-2, .pull-m-2-of-4, .pull-m-3-of-6, .pull-m-4-of-8 {
-    margin-right: 50%; }
-  .pull-m-one-third, .pull-m-2-of-6 {
-    margin-right: 33.33333%; }
-  .pull-m-two-thirds, .pull-m-4-of-6 {
-    margin-right: 66.66667%; }
-  .pull-m-one-quarter, .pull-m-1-of-4, .pull-m-2-of-8 {
-    margin-right: 25%; }
-  .pull-m-two-quarters {
-    margin-right: 50%; }
-  .pull-m-three-quarters, .pull-m-3-of-4, .pull-m-6-of-8 {
-    margin-right: 75%; }
+  .col-m-1-of-4 {
+    width: calc(25% - 20px); }
+  .push-m-1-of-4 {
+    margin-left: calc(25% + 20px / 2); }
+  .pull-m-1-of-4 {
+    margin-right: calc(25% + 20px / 2); }
+  .col-m-2-of-4 {
+    width: calc(50% - 20px); }
+  .push-m-2-of-4 {
+    margin-left: calc(50% + 20px / 2); }
+  .pull-m-2-of-4 {
+    margin-right: calc(50% + 20px / 2); }
+  .col-m-3-of-4 {
+    width: calc(75% - 20px); }
+  .push-m-3-of-4 {
+    margin-left: calc(75% + 20px / 2); }
+  .pull-m-3-of-4 {
+    margin-right: calc(75% + 20px / 2); }
+  .col-m-4-of-4 {
+    width: calc(100% - 20px); }
+  .push-m-4-of-4 {
+    margin-left: calc(100% + 20px / 2); }
+  .pull-m-4-of-4 {
+    margin-right: calc(100% + 20px / 2); }
   .col-m-1-of-6 {
-    width: 16.66667%; }
+    width: calc(16.66667% - 20px); }
   .push-m-1-of-6 {
-    margin-left: 16.66667%; }
+    margin-left: calc(16.66667% + 20px / 2); }
   .pull-m-1-of-6 {
-    margin-left: 16.66667%; }
+    margin-right: calc(16.66667% + 20px / 2); }
+  .col-m-2-of-6 {
+    width: calc(33.33333% - 20px); }
+  .push-m-2-of-6 {
+    margin-left: calc(33.33333% + 20px / 2); }
+  .pull-m-2-of-6 {
+    margin-right: calc(33.33333% + 20px / 2); }
+  .col-m-3-of-6 {
+    width: calc(50% - 20px); }
+  .push-m-3-of-6 {
+    margin-left: calc(50% + 20px / 2); }
+  .pull-m-3-of-6 {
+    margin-right: calc(50% + 20px / 2); }
+  .col-m-4-of-6 {
+    width: calc(66.66667% - 20px); }
+  .push-m-4-of-6 {
+    margin-left: calc(66.66667% + 20px / 2); }
+  .pull-m-4-of-6 {
+    margin-right: calc(66.66667% + 20px / 2); }
   .col-m-5-of-6 {
-    width: 83.33333%; }
+    width: calc(83.33333% - 20px); }
   .push-m-5-of-6 {
-    margin-left: 83.33333%; }
+    margin-left: calc(83.33333% + 20px / 2); }
   .pull-m-5-of-6 {
-    margin-left: 83.33333%; }
+    margin-right: calc(83.33333% + 20px / 2); }
+  .col-m-6-of-6 {
+    width: calc(100% - 20px); }
+  .push-m-6-of-6 {
+    margin-left: calc(100% + 20px / 2); }
+  .pull-m-6-of-6 {
+    margin-right: calc(100% + 20px / 2); }
   .col-m-1-of-8 {
-    width: 12.5%; }
+    width: calc(12.5% - 20px); }
   .push-m-1-of-8 {
-    margin-left: 12.5%; }
+    margin-left: calc(12.5% + 20px / 2); }
   .pull-m-1-of-8 {
-    margin-left: 12.5%; }
+    margin-right: calc(12.5% + 20px / 2); }
+  .col-m-2-of-8 {
+    width: calc(25% - 20px); }
+  .push-m-2-of-8 {
+    margin-left: calc(25% + 20px / 2); }
+  .pull-m-2-of-8 {
+    margin-right: calc(25% + 20px / 2); }
   .col-m-3-of-8 {
-    width: 37.5%; }
+    width: calc(37.5% - 20px); }
   .push-m-3-of-8 {
-    margin-left: 37.5%; }
+    margin-left: calc(37.5% + 20px / 2); }
   .pull-m-3-of-8 {
-    margin-left: 37.5%; }
+    margin-right: calc(37.5% + 20px / 2); }
+  .col-m-4-of-8 {
+    width: calc(50% - 20px); }
+  .push-m-4-of-8 {
+    margin-left: calc(50% + 20px / 2); }
+  .pull-m-4-of-8 {
+    margin-right: calc(50% + 20px / 2); }
   .col-m-5-of-8 {
-    width: 62.5%; }
+    width: calc(62.5% - 20px); }
   .push-m-5-of-8 {
-    margin-left: 62.5%; }
+    margin-left: calc(62.5% + 20px / 2); }
   .pull-m-5-of-8 {
-    margin-left: 62.5%; }
+    margin-right: calc(62.5% + 20px / 2); }
+  .col-m-6-of-8 {
+    width: calc(75% - 20px); }
+  .push-m-6-of-8 {
+    margin-left: calc(75% + 20px / 2); }
+  .pull-m-6-of-8 {
+    margin-right: calc(75% + 20px / 2); }
   .col-m-7-of-8 {
-    width: 87.5%; }
+    width: calc(87.5% - 20px); }
   .push-m-7-of-8 {
-    margin-left: 87.5%; }
+    margin-left: calc(87.5% + 20px / 2); }
   .pull-m-7-of-8 {
-    margin-left: 87.5%; } }
+    margin-right: calc(87.5% + 20px / 2); }
+  .col-m-8-of-8 {
+    width: calc(100% - 20px); }
+  .push-m-8-of-8 {
+    margin-left: calc(100% + 20px / 2); }
+  .pull-m-8-of-8 {
+    margin-right: calc(100% + 20px / 2); } }
 
 @media (max-width: 480px) {
-  .s-vertical {
-    -ms-flex-direction: column;
-        flex-direction: column; }
   .s-hide {
     display: none; }
-  .s-full-width, .col-s-2-of-2, .col-s-4-of-4, .col-s-6-of-6 {
-    width: 100%; }
-  .s-half-width, .col-s-1-of-2, .col-s-2-of-4, .col-s-3-of-6 {
-    width: 50%; }
-  .s-one-third, .col-s-2-of-6 {
-    width: 33.33333%; }
-  .s-two-thirds, .col-s-4-of-6 {
-    width: 66.66667%; }
-  .s-one-quarter, .col-s-1-of-4 {
-    width: 25%; }
-  .s-two-quarters {
-    width: 50%; }
-  .s-three-quarters, .col-s-3-of-4 {
-    width: 75%; }
-  .push-s-full-width, .push-s-2-of-2, .push-s-4-of-4, .push-s-6-of-6 {
-    margin-left: 100%; }
-  .push-s-one-half, .push-s-1-of-2, .push-s-2-of-4, .push-s-3-of-6 {
-    margin-left: 50%; }
-  .push-s-one-third, .push-s-2-of-6 {
-    margin-left: 33.33333%; }
-  .push-s-two-thirds, .push-s-4-of-6 {
-    margin-left: 66.66667%; }
-  .push-s-one-quarter, .push-s-1-of-4 {
-    margin-left: 25%; }
-  .push-s-two-quarters {
-    margin-left: 50%; }
-  .push-s-three-quarters, .push-s-3-of-4 {
-    margin-left: 75%; }
-  .pull-s-full-width, .pull-s-2-of-2, .pull-s-4-of-4, .pull-s-6-of-6 {
-    margin-right: 100%; }
-  .pull-s-one-half, .pull-s-1-of-2, .pull-s-2-of-4, .pull-s-3-of-6 {
-    margin-right: 50%; }
-  .pull-s-one-third, .pull-s-2-of-6 {
-    margin-right: 33.33333%; }
-  .pull-s-two-thirds, .pull-s-4-of-6 {
-    margin-right: 66.66667%; }
-  .pull-s-one-quarter, .pull-s-1-of-4 {
-    margin-right: 25%; }
-  .pull-s-two-quarters {
-    margin-right: 50%; }
-  .pull-s-three-quarters, .pull-s-3-of-4 {
-    margin-right: 75%; }
+  .col-s-1-of-4 {
+    width: calc(25% - 20px); }
+  .push-s-1-of-4 {
+    margin-left: calc(25% + 20px / 2); }
+  .pull-s-1-of-4 {
+    margin-right: calc(25% + 20px / 2); }
+  .col-s-2-of-4 {
+    width: calc(50% - 20px); }
+  .push-s-2-of-4 {
+    margin-left: calc(50% + 20px / 2); }
+  .pull-s-2-of-4 {
+    margin-right: calc(50% + 20px / 2); }
+  .col-s-3-of-4 {
+    width: calc(75% - 20px); }
+  .push-s-3-of-4 {
+    margin-left: calc(75% + 20px / 2); }
+  .pull-s-3-of-4 {
+    margin-right: calc(75% + 20px / 2); }
+  .col-s-4-of-4 {
+    width: calc(100% - 20px); }
+  .push-s-4-of-4 {
+    margin-left: calc(100% + 20px / 2); }
+  .pull-s-4-of-4 {
+    margin-right: calc(100% + 20px / 2); }
   .col-s-1-of-6 {
-    width: 16.66667%; }
+    width: calc(16.66667% - 20px); }
   .push-s-1-of-6 {
-    margin-left: 16.66667%; }
+    margin-left: calc(16.66667% + 20px / 2); }
   .pull-s-1-of-6 {
-    margin-left: 16.66667%; }
+    margin-right: calc(16.66667% + 20px / 2); }
+  .col-s-2-of-6 {
+    width: calc(33.33333% - 20px); }
+  .push-s-2-of-6 {
+    margin-left: calc(33.33333% + 20px / 2); }
+  .pull-s-2-of-6 {
+    margin-right: calc(33.33333% + 20px / 2); }
+  .col-s-3-of-6 {
+    width: calc(50% - 20px); }
+  .push-s-3-of-6 {
+    margin-left: calc(50% + 20px / 2); }
+  .pull-s-3-of-6 {
+    margin-right: calc(50% + 20px / 2); }
+  .col-s-4-of-6 {
+    width: calc(66.66667% - 20px); }
+  .push-s-4-of-6 {
+    margin-left: calc(66.66667% + 20px / 2); }
+  .pull-s-4-of-6 {
+    margin-right: calc(66.66667% + 20px / 2); }
   .col-s-5-of-6 {
-    width: 83.33333%; }
+    width: calc(83.33333% - 20px); }
   .push-s-5-of-6 {
-    margin-left: 83.33333%; }
+    margin-left: calc(83.33333% + 20px / 2); }
   .pull-s-5-of-6 {
-    margin-left: 83.33333%; } }
+    margin-right: calc(83.33333% + 20px / 2); }
+  .col-s-6-of-6 {
+    width: calc(100% - 20px); }
+  .push-s-6-of-6 {
+    margin-left: calc(100% + 20px / 2); }
+  .pull-s-6-of-6 {
+    margin-right: calc(100% + 20px / 2); } }
 
 @media (min-width: 480px) {
   .s-only {
+    display: none; }
+  .s-and-lower {
     display: none; } }
 
 @media (min-width: 840px) {
   .m-only {
+    display: none; }
+  .m-and-lower {
     display: none; } }
diff --git a/dist/waffle-grid.min.css b/dist/waffle-grid.min.css
index 9407c0d..3c448b6 100644
--- a/dist/waffle-grid.min.css
+++ b/dist/waffle-grid.min.css
@@ -3,4 +3,4 @@
  * Copyright 2017 Lucas Gruwez.
  * Licensed under MIT
  * https://lucasgruwez.github.io/waffle-grid
- */.grid{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:960px;max-width:80%;margin:0 auto}.row{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-top:20px}.col{box-sizing:border-box;padding-left:20px;vertical-align:top}.col-12-of-12,.col-4-of-4,.col-8-of-8,.full-width,.row{width:100%}.col-2-of-4,.col-4-of-8,.col-6-of-12,.half-width{width:50%}.col-4-of-12,.one-third{width:33.33333%}.col-8-of-12,.two-thirds{width:66.66667%}.col-1-of-4,.col-2-of-8,.col-3-of-12,.one-quarter{width:25%}.two-quarters{width:50%}.col-3-of-4,.col-6-of-8,.col-9-of-12,.three-quarters{width:75%}.push-12-of-12,.push-4-of-4,.push-8-of-8,.push-full-width{margin-left:100%}.push-2-of-4,.push-4-of-8,.push-6-of-12,.push-one-half{margin-left:50%}.push-4-of-12,.push-one-third{margin-left:33.33333%}.push-8-of-12,.push-two-thirds{margin-left:66.66667%}.push-1-of-4,.push-2-of-8,.push-3-of-12,.push-one-quarter{margin-left:25%}.push-two-quarters{margin-left:50%}.push-3-of-4,.push-6-of-8,.push-9-of-12,.push-three-quarters{margin-left:75%}.pull-12-of-12,.pull-4-of-4,.pull-8-of-8,.pull-full-width{margin-right:100%}.pull-2-of-4,.pull-4-of-8,.pull-6-of-12,.pull-one-half{margin-right:50%}.pull-4-of-12,.pull-one-third{margin-right:33.33333%}.pull-8-of-12,.pull-two-thirds{margin-right:66.66667%}.pull-1-of-4,.pull-2-of-8,.pull-3-of-12,.pull-one-quarter{margin-right:25%}.pull-two-quarters{margin-right:50%}.pull-3-of-4,.pull-6-of-8,.pull-9-of-12,.pull-three-quarters{margin-right:75%}.center{margin-left:auto;margin-right:auto}.col-1-of-8{width:12.5%}.push-1-of-8{margin-left:12.5%}.pull-1-of-8{margin-left:-12.5%}.col-3-of-8{width:37.5%}.push-3-of-8{margin-left:37.5%}.pull-3-of-8{margin-left:-37.5%}.col-5-of-8{width:62.5%}.push-5-of-8{margin-left:62.5%}.pull-5-of-8{margin-left:-62.5%}.col-7-of-8{width:87.5%}.push-7-of-8{margin-left:87.5%}.pull-7-of-8{margin-left:-87.5%}.col-1-of-12{width:8.33333%}.push-1-of-12{margin-left:8.33333%}.pull-1-of-12{margin-left:-8.33333%}.col-2-of-12{width:16.66667%}.push-2-of-12{margin-left:16.66667%}.pull-2-of-12{margin-left:-16.66667%}.col-5-of-12{width:41.66667%}.push-5-of-12{margin-left:41.66667%}.pull-5-of-12{margin-left:-41.66667%}.col-7-of-12{width:58.33333%}.push-7-of-12{margin-left:58.33333%}.pull-7-of-12{margin-left:-58.33333%}.col-10-of-12{width:83.33333%}.push-10-of-12{margin-left:83.33333%}.pull-10-of-12{margin-left:-83.33333%}.col-11-of-12{width:91.66667%}.push-11-of-12{margin-left:91.66667%}.pull-11-of-12{margin-left:-91.66667%}@media (max-width:840px){.m-vertical{-ms-flex-direction:column;flex-direction:column}.m-hide{display:none}.col-m-2-of-2,.col-m-4-of-4,.col-m-6-of-6,.col-m-8-of-8,.m-full-width{width:100%}.col-m-1-of-2,.col-m-2-of-4,.col-m-3-of-6,.col-m-4-of-8,.m-half-width{width:50%}.col-m-2-of-6,.m-one-third{width:33.33333%}.col-m-4-of-6,.m-two-thirds{width:66.66667%}.col-m-1-of-4,.col-m-2-of-8,.m-one-quarter{width:25%}.m-two-quarters{width:50%}.col-m-3-of-4,.col-m-6-of-8,.m-three-quarters{width:75%}.push-m-2-of-2,.push-m-4-of-4,.push-m-6-of-6,.push-m-8-of-8,.push-m-full-width{margin-left:100%}.push-m-1-of-2,.push-m-2-of-4,.push-m-3-of-6,.push-m-4-of-8,.push-m-one-half{margin-left:50%}.push-m-2-of-6,.push-m-one-third{margin-left:33.33333%}.push-m-4-of-6,.push-m-two-thirds{margin-left:66.66667%}.push-m-1-of-4,.push-m-2-of-8,.push-m-one-quarter{margin-left:25%}.push-m-two-quarters{margin-left:50%}.push-m-3-of-4,.push-m-6-of-8,.push-m-three-quarters{margin-left:75%}.pull-m-2-of-2,.pull-m-4-of-4,.pull-m-6-of-6,.pull-m-8-of-8,.pull-m-full-width{margin-right:100%}.pull-m-1-of-2,.pull-m-2-of-4,.pull-m-3-of-6,.pull-m-4-of-8,.pull-m-one-half{margin-right:50%}.pull-m-2-of-6,.pull-m-one-third{margin-right:33.33333%}.pull-m-4-of-6,.pull-m-two-thirds{margin-right:66.66667%}.pull-m-1-of-4,.pull-m-2-of-8,.pull-m-one-quarter{margin-right:25%}.pull-m-two-quarters{margin-right:50%}.pull-m-3-of-4,.pull-m-6-of-8,.pull-m-three-quarters{margin-right:75%}.col-m-1-of-6{width:16.66667%}.push-m-1-of-6{margin-left:16.66667%}.pull-m-1-of-6{margin-left:16.66667%}.col-m-5-of-6{width:83.33333%}.push-m-5-of-6{margin-left:83.33333%}.pull-m-5-of-6{margin-left:83.33333%}.col-m-1-of-8{width:12.5%}.push-m-1-of-8{margin-left:12.5%}.pull-m-1-of-8{margin-left:12.5%}.col-m-3-of-8{width:37.5%}.push-m-3-of-8{margin-left:37.5%}.pull-m-3-of-8{margin-left:37.5%}.col-m-5-of-8{width:62.5%}.push-m-5-of-8{margin-left:62.5%}.pull-m-5-of-8{margin-left:62.5%}.col-m-7-of-8{width:87.5%}.push-m-7-of-8{margin-left:87.5%}.pull-m-7-of-8{margin-left:87.5%}}@media (max-width:480px){.s-vertical{-ms-flex-direction:column;flex-direction:column}.s-hide{display:none}.col-s-2-of-2,.col-s-4-of-4,.col-s-6-of-6,.s-full-width{width:100%}.col-s-1-of-2,.col-s-2-of-4,.col-s-3-of-6,.s-half-width{width:50%}.col-s-2-of-6,.s-one-third{width:33.33333%}.col-s-4-of-6,.s-two-thirds{width:66.66667%}.col-s-1-of-4,.s-one-quarter{width:25%}.s-two-quarters{width:50%}.col-s-3-of-4,.s-three-quarters{width:75%}.push-s-2-of-2,.push-s-4-of-4,.push-s-6-of-6,.push-s-full-width{margin-left:100%}.push-s-1-of-2,.push-s-2-of-4,.push-s-3-of-6,.push-s-one-half{margin-left:50%}.push-s-2-of-6,.push-s-one-third{margin-left:33.33333%}.push-s-4-of-6,.push-s-two-thirds{margin-left:66.66667%}.push-s-1-of-4,.push-s-one-quarter{margin-left:25%}.push-s-two-quarters{margin-left:50%}.push-s-3-of-4,.push-s-three-quarters{margin-left:75%}.pull-s-2-of-2,.pull-s-4-of-4,.pull-s-6-of-6,.pull-s-full-width{margin-right:100%}.pull-s-1-of-2,.pull-s-2-of-4,.pull-s-3-of-6,.pull-s-one-half{margin-right:50%}.pull-s-2-of-6,.pull-s-one-third{margin-right:33.33333%}.pull-s-4-of-6,.pull-s-two-thirds{margin-right:66.66667%}.pull-s-1-of-4,.pull-s-one-quarter{margin-right:25%}.pull-s-two-quarters{margin-right:50%}.pull-s-3-of-4,.pull-s-three-quarters{margin-right:75%}.col-s-1-of-6{width:16.66667%}.push-s-1-of-6{margin-left:16.66667%}.pull-s-1-of-6{margin-left:16.66667%}.col-s-5-of-6{width:83.33333%}.push-s-5-of-6{margin-left:83.33333%}.pull-s-5-of-6{margin-left:83.33333%}}@media (min-width:480px){.s-only{display:none}}@media (min-width:840px){.m-only{display:none}}
\ No newline at end of file
+ */.grid{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:960px;max-width:80%;margin:0 auto}.row{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%;-ms-flex-wrap:wrap;flex-wrap:wrap}.col{box-sizing:border-box;margin:10px;vertical-align:top}.center{margin-left:auto;margin-right:auto}.left{margin-right:auto}.right{margin-left:auto}.col-1-of-4{width:calc(25% - 20px)}.push-1-of-4{margin-left:calc(25% + 20px / 2)}.pull-1-of-4{margin-right:calc(25% + 20px / 2)}.col-2-of-4{width:calc(50% - 20px)}.push-2-of-4{margin-left:calc(50% + 20px / 2)}.pull-2-of-4{margin-right:calc(50% + 20px / 2)}.col-3-of-4{width:calc(75% - 20px)}.push-3-of-4{margin-left:calc(75% + 20px / 2)}.pull-3-of-4{margin-right:calc(75% + 20px / 2)}.col-4-of-4{width:calc(100% - 20px)}.push-4-of-4{margin-left:calc(100% + 20px / 2)}.pull-4-of-4{margin-right:calc(100% + 20px / 2)}.col-1-of-8{width:calc(12.5% - 20px)}.push-1-of-8{margin-left:calc(12.5% + 20px / 2)}.pull-1-of-8{margin-right:calc(12.5% + 20px / 2)}.col-2-of-8{width:calc(25% - 20px)}.push-2-of-8{margin-left:calc(25% + 20px / 2)}.pull-2-of-8{margin-right:calc(25% + 20px / 2)}.col-3-of-8{width:calc(37.5% - 20px)}.push-3-of-8{margin-left:calc(37.5% + 20px / 2)}.pull-3-of-8{margin-right:calc(37.5% + 20px / 2)}.col-4-of-8{width:calc(50% - 20px)}.push-4-of-8{margin-left:calc(50% + 20px / 2)}.pull-4-of-8{margin-right:calc(50% + 20px / 2)}.col-5-of-8{width:calc(62.5% - 20px)}.push-5-of-8{margin-left:calc(62.5% + 20px / 2)}.pull-5-of-8{margin-right:calc(62.5% + 20px / 2)}.col-6-of-8{width:calc(75% - 20px)}.push-6-of-8{margin-left:calc(75% + 20px / 2)}.pull-6-of-8{margin-right:calc(75% + 20px / 2)}.col-7-of-8{width:calc(87.5% - 20px)}.push-7-of-8{margin-left:calc(87.5% + 20px / 2)}.pull-7-of-8{margin-right:calc(87.5% + 20px / 2)}.col-8-of-8{width:calc(100% - 20px)}.push-8-of-8{margin-left:calc(100% + 20px / 2)}.pull-8-of-8{margin-right:calc(100% + 20px / 2)}.col-1-of-12{width:calc(8.33333% - 20px)}.push-1-of-12{margin-left:calc(8.33333% + 20px / 2)}.pull-1-of-12{margin-right:calc(8.33333% + 20px / 2)}.col-2-of-12{width:calc(16.66667% - 20px)}.push-2-of-12{margin-left:calc(16.66667% + 20px / 2)}.pull-2-of-12{margin-right:calc(16.66667% + 20px / 2)}.col-3-of-12{width:calc(25% - 20px)}.push-3-of-12{margin-left:calc(25% + 20px / 2)}.pull-3-of-12{margin-right:calc(25% + 20px / 2)}.col-4-of-12{width:calc(33.33333% - 20px)}.push-4-of-12{margin-left:calc(33.33333% + 20px / 2)}.pull-4-of-12{margin-right:calc(33.33333% + 20px / 2)}.col-5-of-12{width:calc(41.66667% - 20px)}.push-5-of-12{margin-left:calc(41.66667% + 20px / 2)}.pull-5-of-12{margin-right:calc(41.66667% + 20px / 2)}.col-6-of-12{width:calc(50% - 20px)}.push-6-of-12{margin-left:calc(50% + 20px / 2)}.pull-6-of-12{margin-right:calc(50% + 20px / 2)}.col-7-of-12{width:calc(58.33333% - 20px)}.push-7-of-12{margin-left:calc(58.33333% + 20px / 2)}.pull-7-of-12{margin-right:calc(58.33333% + 20px / 2)}.col-8-of-12{width:calc(66.66667% - 20px)}.push-8-of-12{margin-left:calc(66.66667% + 20px / 2)}.pull-8-of-12{margin-right:calc(66.66667% + 20px / 2)}.col-9-of-12{width:calc(75% - 20px)}.push-9-of-12{margin-left:calc(75% + 20px / 2)}.pull-9-of-12{margin-right:calc(75% + 20px / 2)}.col-10-of-12{width:calc(83.33333% - 20px)}.push-10-of-12{margin-left:calc(83.33333% + 20px / 2)}.pull-10-of-12{margin-right:calc(83.33333% + 20px / 2)}.col-11-of-12{width:calc(91.66667% - 20px)}.push-11-of-12{margin-left:calc(91.66667% + 20px / 2)}.pull-11-of-12{margin-right:calc(91.66667% + 20px / 2)}.col-12-of-12{width:calc(100% - 20px)}.push-12-of-12{margin-left:calc(100% + 20px / 2)}.pull-12-of-12{margin-right:calc(100% + 20px / 2)}@media (max-width:840px){.l-only{display:none}.m-hide{display:none}.col-m-1-of-4{width:calc(25% - 20px)}.push-m-1-of-4{margin-left:calc(25% + 20px / 2)}.pull-m-1-of-4{margin-right:calc(25% + 20px / 2)}.col-m-2-of-4{width:calc(50% - 20px)}.push-m-2-of-4{margin-left:calc(50% + 20px / 2)}.pull-m-2-of-4{margin-right:calc(50% + 20px / 2)}.col-m-3-of-4{width:calc(75% - 20px)}.push-m-3-of-4{margin-left:calc(75% + 20px / 2)}.pull-m-3-of-4{margin-right:calc(75% + 20px / 2)}.col-m-4-of-4{width:calc(100% - 20px)}.push-m-4-of-4{margin-left:calc(100% + 20px / 2)}.pull-m-4-of-4{margin-right:calc(100% + 20px / 2)}.col-m-1-of-6{width:calc(16.66667% - 20px)}.push-m-1-of-6{margin-left:calc(16.66667% + 20px / 2)}.pull-m-1-of-6{margin-right:calc(16.66667% + 20px / 2)}.col-m-2-of-6{width:calc(33.33333% - 20px)}.push-m-2-of-6{margin-left:calc(33.33333% + 20px / 2)}.pull-m-2-of-6{margin-right:calc(33.33333% + 20px / 2)}.col-m-3-of-6{width:calc(50% - 20px)}.push-m-3-of-6{margin-left:calc(50% + 20px / 2)}.pull-m-3-of-6{margin-right:calc(50% + 20px / 2)}.col-m-4-of-6{width:calc(66.66667% - 20px)}.push-m-4-of-6{margin-left:calc(66.66667% + 20px / 2)}.pull-m-4-of-6{margin-right:calc(66.66667% + 20px / 2)}.col-m-5-of-6{width:calc(83.33333% - 20px)}.push-m-5-of-6{margin-left:calc(83.33333% + 20px / 2)}.pull-m-5-of-6{margin-right:calc(83.33333% + 20px / 2)}.col-m-6-of-6{width:calc(100% - 20px)}.push-m-6-of-6{margin-left:calc(100% + 20px / 2)}.pull-m-6-of-6{margin-right:calc(100% + 20px / 2)}.col-m-1-of-8{width:calc(12.5% - 20px)}.push-m-1-of-8{margin-left:calc(12.5% + 20px / 2)}.pull-m-1-of-8{margin-right:calc(12.5% + 20px / 2)}.col-m-2-of-8{width:calc(25% - 20px)}.push-m-2-of-8{margin-left:calc(25% + 20px / 2)}.pull-m-2-of-8{margin-right:calc(25% + 20px / 2)}.col-m-3-of-8{width:calc(37.5% - 20px)}.push-m-3-of-8{margin-left:calc(37.5% + 20px / 2)}.pull-m-3-of-8{margin-right:calc(37.5% + 20px / 2)}.col-m-4-of-8{width:calc(50% - 20px)}.push-m-4-of-8{margin-left:calc(50% + 20px / 2)}.pull-m-4-of-8{margin-right:calc(50% + 20px / 2)}.col-m-5-of-8{width:calc(62.5% - 20px)}.push-m-5-of-8{margin-left:calc(62.5% + 20px / 2)}.pull-m-5-of-8{margin-right:calc(62.5% + 20px / 2)}.col-m-6-of-8{width:calc(75% - 20px)}.push-m-6-of-8{margin-left:calc(75% + 20px / 2)}.pull-m-6-of-8{margin-right:calc(75% + 20px / 2)}.col-m-7-of-8{width:calc(87.5% - 20px)}.push-m-7-of-8{margin-left:calc(87.5% + 20px / 2)}.pull-m-7-of-8{margin-right:calc(87.5% + 20px / 2)}.col-m-8-of-8{width:calc(100% - 20px)}.push-m-8-of-8{margin-left:calc(100% + 20px / 2)}.pull-m-8-of-8{margin-right:calc(100% + 20px / 2)}}@media (max-width:480px){.s-hide{display:none}.col-s-1-of-4{width:calc(25% - 20px)}.push-s-1-of-4{margin-left:calc(25% + 20px / 2)}.pull-s-1-of-4{margin-right:calc(25% + 20px / 2)}.col-s-2-of-4{width:calc(50% - 20px)}.push-s-2-of-4{margin-left:calc(50% + 20px / 2)}.pull-s-2-of-4{margin-right:calc(50% + 20px / 2)}.col-s-3-of-4{width:calc(75% - 20px)}.push-s-3-of-4{margin-left:calc(75% + 20px / 2)}.pull-s-3-of-4{margin-right:calc(75% + 20px / 2)}.col-s-4-of-4{width:calc(100% - 20px)}.push-s-4-of-4{margin-left:calc(100% + 20px / 2)}.pull-s-4-of-4{margin-right:calc(100% + 20px / 2)}.col-s-1-of-6{width:calc(16.66667% - 20px)}.push-s-1-of-6{margin-left:calc(16.66667% + 20px / 2)}.pull-s-1-of-6{margin-right:calc(16.66667% + 20px / 2)}.col-s-2-of-6{width:calc(33.33333% - 20px)}.push-s-2-of-6{margin-left:calc(33.33333% + 20px / 2)}.pull-s-2-of-6{margin-right:calc(33.33333% + 20px / 2)}.col-s-3-of-6{width:calc(50% - 20px)}.push-s-3-of-6{margin-left:calc(50% + 20px / 2)}.pull-s-3-of-6{margin-right:calc(50% + 20px / 2)}.col-s-4-of-6{width:calc(66.66667% - 20px)}.push-s-4-of-6{margin-left:calc(66.66667% + 20px / 2)}.pull-s-4-of-6{margin-right:calc(66.66667% + 20px / 2)}.col-s-5-of-6{width:calc(83.33333% - 20px)}.push-s-5-of-6{margin-left:calc(83.33333% + 20px / 2)}.pull-s-5-of-6{margin-right:calc(83.33333% + 20px / 2)}.col-s-6-of-6{width:calc(100% - 20px)}.push-s-6-of-6{margin-left:calc(100% + 20px / 2)}.pull-s-6-of-6{margin-right:calc(100% + 20px / 2)}}@media (min-width:480px){.s-only{display:none}.s-and-lower{display:none}}@media (min-width:840px){.m-only{display:none}.m-and-lower{display:none}}
\ No newline at end of file
diff --git a/docs/404.html b/docs/404.html
index 69bdcd5..7de2eda 100644
--- a/docs/404.html
+++ b/docs/404.html
@@ -1,134 +1,13 @@
 ---
 canonical: 404.html
+layout: html
+titl: Error 404
 ---
-
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Error 404</title>
-    <link rel="apple-touch-icon" href="/waffle-grid/apple-touch-icon.png">
-    <link rel="shortcut icon" href="/waffle-grid/favico.png">
-    <style>
-      /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}
-    </style>
-    <style>
-    * {
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-    }
-
-    header {
-      background-color: #FFB448;
-      height: 100vh;
-      min-height: 600px;
-      position: relative;
-    }
-
-    header nav {
-      height: 75px;
-      background-color: #FFF;
-      padding: 17.5px 25px;
-      color: #FFB448;
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      z-index: 1000;
-    }
-
-    header nav img {
-      height: 40px;
-    }
-
-    header nav span {
-      font-weight: bold;
-      font-size: 24px;
-      position: absolute;
-      left: 82px;
-      top: 50%;
-      -webkit-transform: translateY(-50%);
-      -ms-transform: translateY(-50%);
-      transform: translateY(-50%);
-    }
-
-    header nav ul {
-      position: absolute;
-      right: 25px;
-      top: 50%;
-      color: #000;
-      -webkit-transform: translateY(-50%);
-      -ms-transform: translateY(-50%);
-      transform: translateY(-50%);
-      margin: 0;
-      padding: 0;
-    }
-
-    header nav ul li {
-      display: inline-block;
-      margin-left: 20px;
-    }
-
-    header nav ul li a {
-      padding: 5px 20px;
-      text-decoration: none;
-      position: relative;
-    }
-
-    header .main-content {
-      color: #FFF;
-      padding: 100px;
-      text-align: center;
-      position: absolute;
-      top: 50%;
-      left: 0;
-      right: 0;
-      -webkit-transform: translateY(-50%);
-      -ms-transform: translateY(-50%);
-      transform: translateY(-50%);
-    }
-
-    header .main-content img {
-      height: 200px;
-    }
-
-    header .main-content h1 {
-      font-size: 48px;
-      margin: 32px 0 16px 0;
-    }
-
-    header .main-content p {
-      font-size: 20px;
-      margin-top: 0;
-      margin-bottom: 10px;
-    }
-
-    header .main-content p.small {
-      font-size: 16px;
-    }
-
-    a {
-      color: inherit;
-    }
-    </style>
-  </head>
-  <body>
-    <header>
-      <nav>
-        <img src="/waffle-grid/img/waffle-logo.svg" alt="Waffle logo">
-        <span class="logo-text">Waffle</span>
-        <ul class="m-hide">
-          <li><a href="https://github.com/lucasgruwez/waffle-grid/wiki/">Docs</a></li>
-          <li><a href="{{site.download}}">Download</a></li>
-          <li><a href="https://github.com/lucasgruwez/waffle-grid">Github</a></li>
-        </ul>
-      </nav>
-      <div class="main-content">
-        <img src="/waffle-grid/img/waffle-logo-white.svg" alt="Waffle logo">
-        <h1 class="title">404</h1>
-        <p>Something didn't quite go as planned...</p>
-        <p class="small">Back to the <a href="/waffle-grid">homepage</a></p>
-      </div>
-    </header>
-  </body>
-</html>
+<header class="inverted">
+  <div class="header-content">
+    <img src="/waffle-grid/img/waffle-logo.svg" alt="Waffle logo">
+    <h1 class="title">404</h1>
+    <p>Something didn't quite go as planned...</p>
+    <p class="small">Back to the <a href="/waffle-grid">homepage</a></p>
+  </div>
+</header>
diff --git a/docs/_includes/example.html b/docs/_includes/example.html
index 464db0d..9f4a804 100644
--- a/docs/_includes/example.html
+++ b/docs/_includes/example.html
@@ -19,10 +19,10 @@
     </div>
   </div>
   <div class="row">
-    <div class="col col-2-of-8 col-m-1-of-4 col-s-1-of-2">
-      <div class="box" title="col col-2-of-8 col-m-1-of-4 col-s-1-of-2"></div>
+    <div class="col col-2-of-8 col-m-1-of-4 col-s-2-of-4">
+      <div class="box" title="col col-2-of-8 col-m-1-of-4 col-s-2-of-4"></div>
     </div>
-    <div class="col col-3-of-8 col-m-2-of-4 s-half-width">
+    <div class="col col-3-of-8 col-m-2-of-4 col-s-2-of-4">
       <div class="box" title="col col-3-of-8 col-m-2-of-4 s-half-width"></div>
     </div>
     <div class="col col-1-of-8 m-hide">
@@ -36,7 +36,7 @@
     <div class="col col-1-of-4">
       <div class="box" title="col col-1-of-4"></div>
     </div>
-    <div class="col half-width">
+    <div class="col col-2-of-4">
       <div class="box" title="col half-width"></div>
     </div>
     <div class="col col-1-of-4">
@@ -50,8 +50,8 @@
     <div class="col col-2-of-8 push-2-of-12">
       <div class="box" title="col col-2-of-8 push-2-of-12"></div>
     </div>
-    <div class="col col-3-of-8 push-1-of-12">
-      <div class="box" title="col col-3-of-8 push-1-of-12"></div>
+    <div class="col col-3-of-8 pull-1-of-12">
+      <div class="box" title="col col-3-of-8 pull-1-of-12"></div>
     </div>
   </div>
 </div>
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index 72cc702..b2f6f2e 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -1,7 +1,7 @@
 <footer>
-  <div class="grid">
+  <div class="grid fw-grid">
     <div class="row">
-      <div class="col full-width">
+      <div class="col col-4-of-4">
         <ul>
           <li><a href="//github.com/lucasgruwez/waffle-grid"><img src="/waffle-grid/img/github-logo.svg"></a></li>
           <li><a href="//twitter.com/lucasgruwez"><img src="/waffle-grid/img/twitter-logo.svg"></a></li>
@@ -10,7 +10,7 @@
       </div>
     </div>
     <div class="row">
-      <div class="col full-width">
+      <div class="col col-4-of-4">
         Copyright &copy; 2017 lucasgruwez All Rights Reserved.
       </div>
     </div>
diff --git a/docs/_includes/getting-started.html b/docs/_includes/getting-started.html
deleted file mode 100644
index 98e2dbd..0000000
--- a/docs/_includes/getting-started.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<section id="getting-started">
-  <div class="wrapper">
-    <h1>Getting started</h1>
-    <p>To get the waffle grid system in your web page, simply add this code to the <code>head</code>,</p>
-    <script src="https://gist.github.com/lucasgruwez/56bc3f0f5510bcb96eefb32e17f0b2db.js"></script>
-    <p>You can also download the grid system, or use a package manager like npm or bower.</p>
-    <script src="https://gist.github.com/lucasgruwez/d477be981c2a8c58973c39d02269122c.js"></script>
-  </div>
-</section>
diff --git a/docs/_includes/head.html b/docs/_includes/head.html
new file mode 100644
index 0000000..5fe1c6a
--- /dev/null
+++ b/docs/_includes/head.html
@@ -0,0 +1,26 @@
+<meta charset="utf-8">
+<meta http-equiv="x-ua-compatible" content="ie=edge">
+<title>{{page.title}}</title>
+<meta name="description" content="{{page.description}}">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<!-- Twitter card meta -->
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:site" content="@lucasgruwez">
+<meta name="twitter:creator" content="@lucasgruwez">
+<meta name="twitter:title" content="Waffle Grid system">
+<meta name="twitter:description" content="An easy to use flexbox grid system.">
+<meta name="twitter:image" content="/waffle-grid/img/waffle-grid-marketing@2x.jpg">
+<!-- Open graph met atags -->
+<meta property="og:title" content="Waffle Grid system" />
+<meta property="og:description" content="An easy to use flexbox grid system"/>
+<meta property="og:type" content="website" />
+<meta property="og:url" content="https://lucasgruwez.github.io/waffle-grid" />
+<meta property="og:image" content="https://lucasgruwez.github.io/waffle-grid/img/waffle-grid-marketing@2x.jpg" />
+<!-- Link tags -->
+<link rel="apple-touch-icon" href="{{site.baseurl}}/apple-touch-icon.png">
+<link rel="shortcut icon" href="{{site.baseurl}}/favico.png">
+<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700" rel="stylesheet">
+<link rel="stylesheet" href="{{site.cdn}}">
+<link rel="stylesheet" href="{{site.baseurl}}/css/normalize.css">
+<link rel="stylesheet" href="{{site.baseurl}}/css/reset.css">
+<link rel="stylesheet" href="{{site.baseurl}}/css/main.css">
diff --git a/docs/_includes/nav.html b/docs/_includes/nav.html
new file mode 100644
index 0000000..f51d9ca
--- /dev/null
+++ b/docs/_includes/nav.html
@@ -0,0 +1,17 @@
+<nav>
+  <img src="/waffle-grid/img/waffle-logo.svg" alt="Waffle logo">
+  <span class="logo-text">Waffle</span>
+  <ul class="m-hide">
+    <li><a href="{{site.docs}}">Docs</a></li>
+    <li><a href="{{site.download}}">Download</a></li>
+    <li><a href="{{site.repo}}">Github</a></li>
+  </ul>
+  <div class="responsive-nav m-and-lower">
+    <i class="hamburger"><img src="{{site.baseurl}}/img/icon-menu.svg" alt="Menu"></i>
+    <ul class="js-toggled">
+      <li><a href="{{site.docs}}">Docs</a></li>
+      <li><a href="{{site.download}}">Download</a></li>
+      <li><a href="{{site.repo}}">Github</a></li>
+    </ul>
+  </div>
+</nav>
diff --git a/docs/_jade/index.jade b/docs/_jade/index.jade
new file mode 100644
index 0000000..999a90e
--- /dev/null
+++ b/docs/_jade/index.jade
@@ -0,0 +1,55 @@
+// output: ../index.html
+//-
+// Header
+header
+  .header-content
+    // This div is needed to ensure that the content is centered
+    img(src="{{site.baseurl}}/img/waffle-logo-white.svg", alt="Waffle logo")
+    h1.title Waffle grid
+    p An easy to use flexbox grid system.
+    p.small Made by 
+      a(href="https://github.com/lucasgruwez") @lucasgruwez
+
+// Main content
+main
+
+  // Grid features
+  section#features
+    .grid
+      .row
+        .col.col-4-of-12.col-m-4-of-4
+          img(src="{{site.baseurl}}/img/icon-feather.svg", alt="Feather icon")
+          h2 Light weight
+          p The waffle grid system is super lightweight, weighing in at only 8kb minified using the default settings.
+        .col.col-4-of-12.col-m-4-of-4
+          img(src="{{site.baseurl}}/img/icon-phone.svg", alt="Phone icon")
+          h2 Responsive
+          p With classes for medium and small devices, the waffle grid can make your layouts fully responsive.
+        .col.col-4-of-12.col-m-4-of-4
+          img(src="{{site.baseurl}}/img/icon-sliders.svg", alt="Sliders icon")
+          h2 Customisable
+          p The waffle grid system was written entyerly in sass, so that you can easily change customize the grid to suit your needs.
+          
+  // Download call to action
+  section#download-cta
+    a.btn(href="{{site.download}}") Download {{site.version}}
+    
+  // Grid example
+  section#grid-example
+    | {% include example.html %}
+    
+  // Docs preview
+  section#docs-preview
+    .wrapper
+      <script src="https://gist.github.com/lucasgruwez/c3c6ed03fb422fb74e8fec550d7c3978.js")></script>
+      
+  // Docs call to actio
+  section#docs-cta
+    a.btn(href="{{site.docs}}") Read the docs
+
+// Bottom "All code hosted with ❤ by GitHub section that pops up
+.gist.js-activated
+  .gist-meta
+    a All code
+    |  hosted with ❤ by 
+    a(href="https://github.com") GitHub
diff --git a/docs/_layouts/html.html b/docs/_layouts/html.html
new file mode 100644
index 0000000..fa8021e
--- /dev/null
+++ b/docs/_layouts/html.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    {% include head.html %}
+  </head>
+  <body>
+    <!--[if lte IE 9]
+        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/?locale=en">upgrade your browser</a> to improve your experience and security.</p>
+    <![endif]-->
+    {% include nav.html %}
+    {{content}}
+    {% include footer.html %}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.slim.min.js"></script>
+    <script src="/waffle-grid/js/functions.js"></script>
+    <script>
+        window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
+        ga('create','UA-92684751-1','auto');ga('send','pageview')
+    </script>
+    <script src="https://www.google-analytics.com/analytics.js" async defer></script>
+  </body>
+</html>
diff --git a/docs/css/main.css b/docs/css/main.css
deleted file mode 100644
index 8024767..0000000
--- a/docs/css/main.css
+++ /dev/null
@@ -1,227 +0,0 @@
-/* Brand color: #FFB448 */
-
-* {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-header {
-  background-color: #FFB448;
-  height: 100vh;
-  min-height: 600px;
-  position: relative;
-}
-
-header nav {
-  height: 75px;
-  background-color: #FFF;
-  padding: 17.5px 25px;
-  color: #FFB448;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-}
-
-header nav img {
-  height: 40px;
-}
-
-header nav span {
-  font-weight: bold;
-  font-size: 24px;
-  position: absolute;
-  left: 82px;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-header nav ul {
-  position: absolute;
-  right: 25px;
-  top: 50%;
-  color: #000;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-  margin: 0;
-  padding: 0;
-}
-
-header nav ul li {
-  display: inline-block;
-  margin-left: 20px;
-}
-
-header nav ul li a {
-  padding: 5px 20px;
-  text-decoration: none;
-  position: relative;
-}
-
-header .main-content {
-  color: #FFF;
-  padding: 100px;
-  text-align: center;
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-header .main-content img {
-  height: 200px;
-}
-
-header .main-content h1 {
-  font-size: 48px;
-  margin: 32px 0 16px 0;
-}
-
-header .main-content p {
-  font-size: 20px;
-  margin-top: 0;
-  margin-bottom: 10px;
-}
-
-header .main-content p.small {
-  font-size: 16px;
-}
-
-a {
-  color: inherit;
-}
-
-section#features {
-  padding: 100px 0;
-}
-
-section#features .col {
-  text-align: center;
-}
-
-section#features .col img {
-  height: 100px;
-}
-
-section#download-cta-1 {
-  background-color: #FFB448;
-  padding: 75px;
-  text-align: center;
-}
-
-section#download-cta-1 a.btn {
-  background-color: #FFF;
-  color: #FFB448;
-  border-radius: 2pt;
-  font-size: 24px;
-  padding: 15px 35px;
-  text-decoration: none;
-}
-
-section#docs-cta {
-  background-color: #FFF;
-  padding: 75px;
-  text-align: center;
-}
-
-section#docs-cta a.btn {
-  background-color: #FFB448;
-  color: #FFF;
-  border-radius: 2pt;
-  font-size: 24px;
-  padding: 15px 35px;
-  text-decoration: none;
-}
-
-section#getting-started {
-  padding: 100px 0;
-}
-
-section#grid-example {
-  background-color: #FFB448;
-  padding: 100px 0;
-}
-
-section#docs-preview {
-  padding: 75px 0;
-}
-
-.box {
-  height: 25px;
-  background-color: #FFF;
-}
-
-.wrapper {
-  width: 960px;
-  max-width: 80%;
-  margin: 0 auto;
-}
-
-.gist .gist-file .gist-meta {
-  display: none !important;
-}
-.gist .gist-file .gist-data {
-  border-bottom: none !important;
-}
-.gist .gist-file {
-  border-bottom-color: #ddd !important;
-}
-
-.gist .gist-meta {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 100vh;
-  transition: 500ms all cubic-bezier(0.68, -0.55, 0.27, 1.55)
-}
-
-.gist.visible .gist-meta {
-  bottom: 0px;
-  top: calc(100vh - 36px);
-}
-
-h1:not(.title) {
-  position: relative;
-  display: inline-block;
-}
-h1:not(.title):after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0px;
-  height: 8px;
-  background-color: #FFB448;
-  z-index: -10;
-}
-
-footer {
-  color: #FFF;
-  background-color: #FFB448;
-  text-align: center;
-  padding: 75px;
-}
-
-footer ul {
-  padding: 0;
-}
-
-footer ul li {
-  display: inline-block;
-}
-
-footer ul li:not(:first-child) {
-  margin-left: 50px;
-}
-
-footer ul li img {
-  width: 45px;
-}
diff --git a/docs/css/main.scss b/docs/css/main.scss
new file mode 100644
index 0000000..336fe06
--- /dev/null
+++ b/docs/css/main.scss
@@ -0,0 +1,303 @@
+---
+---
+
+$brand-color: #ffb448;
+
+body {
+  margin-bottom: 600px;
+  background-color: $brand-color;
+}
+
+* {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.wrapper {
+  width: 960px;
+  max-width: 80%;
+  margin: 0 auto;
+}
+.fw-grid {
+  width: 960px;
+  max-width: 100%;
+}
+
+a {
+  color: inherit;
+}
+
+nav {
+  height: 75px;
+  background-color: #ffffff;
+  padding: 17.5px 25px;
+  color: $brand-color;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  img {
+    height: 40px;
+  }
+  span {
+    font-weight: bold;
+    font-size: 24px;
+    position: absolute;
+    left: 82px;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+  }
+  ul {
+    position: absolute;
+    right: 25px;
+    top: 50%;
+    color: #000000;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    margin: 0;
+    padding: 0;
+    li {
+      display: inline-block;
+      margin-left: 20px;
+      a {
+        padding: 5px 20px;
+        text-decoration: none;
+        position: relative;
+      }
+    }
+  }
+  .hamburger {
+    position: absolute;
+    right: 25px;
+    top: 50%;
+    cursor: pointer;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+  }
+  ul.js-toggled {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    transform: none;
+    background-color: #fff;
+    border-bottom: 1px solid #ddd;
+    height: 0;
+    transition: 200ms all cubic-bezier(0.4, 0.0, 1, 1);;
+    overflow: hidden;
+    &.visible {
+      height: 248px;
+      transition: 200ms all cubic-bezier(0.0, 0.0, 0.2, 1);;
+    }
+    li {
+      border-top: 1px solid #ddd;
+      display: block;
+      padding: 30px;
+      text-align: center;
+      margin: 0;
+      a {
+        padding: 30px;
+      }
+    }
+  }
+}
+
+header {
+  background-color: $brand-color;
+  height: 100vh;
+  min-height: 600px;
+  position: relative;
+  &.inverted {
+    background-color: #ffffff;
+    .header-content {
+      color: #000000;
+      .title {
+        color: $brand-color;
+      }
+    }
+  }
+  .header-content {
+    color: #ffffff;
+    padding: 100px 0;
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    img {
+      height: 200px;
+    }
+    h1 {
+      font-size: 48px;
+      margin: 32px 0 16px;
+    }
+    p {
+      font-size: 20px;
+      margin-top: 0;
+      margin-bottom: 10px;
+      &.small {
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+section {
+  background-color: #ffffff;
+  &#features {
+    padding: 100px 0;
+    .col {
+      text-align: center;
+      img {
+        height: 100px;
+      }
+    }
+  }
+  &#download-cta {
+    background-color: $brand-color;
+    padding: 75px;
+    text-align: center;
+    a.btn {
+      background-color: #ffffff;
+      color: $brand-color;
+      border-radius: 2pt;
+      font-size: 24px;
+      padding: 15px 35px;
+      text-decoration: none;
+    }
+  }
+  &#docs-cta {
+    background-color: #ffffff;
+    padding: 75px;
+    text-align: center;
+    a.btn {
+      background-color: $brand-color;
+      color: #ffffff;
+      border-radius: 2pt;
+      font-size: 24px;
+      padding: 15px 35px;
+      text-decoration: none;
+    }
+  }
+  &#getting-started {
+    padding: 100px 0;
+  }
+  &#grid-example {
+    background-color: $brand-color;
+    padding: 100px 0;
+  }
+  &#docs-preview {
+    padding: 75px 0;
+  }
+}
+
+
+.box {
+  height: 25px;
+  background-color: #ffffff;
+}
+
+.gist {
+  .gist-file {
+    border-bottom-color: #dddddd !important;
+    .gist-meta {
+      display: none !important;
+    }
+    .gist-data {
+      border-bottom: none !important;
+    }
+  }
+  .gist-meta {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 100vh;
+    transition: 500ms all cubic-bezier(0.68, -0.55, 0.27, 1.55);
+  }
+  &.visible .gist-meta {
+    bottom: 0;
+    top: calc(100vh - 36px);
+  }
+}
+
+footer {
+  color: #ffffff;
+  background-color: $brand-color;
+  text-align: center;
+  padding: 75px 35px;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -100;
+  ul {
+    padding: 0;
+    li {
+      display: inline-block;
+      img {
+        width: 45px;
+      }
+      &:not(:first-child) {
+        margin-left: 50px;
+      }
+    }
+  }
+}
+h1:not(.title) {
+  position: relative;
+  display: inline-block;
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 8px;
+    background-color: $brand-color;
+    z-index: -10;
+  }
+}
+
+@media (max-width: 480px) {
+  header .header-content {
+    img {
+      height: 150px;
+    }
+    h1 {
+      font-size: 32px;
+    }
+    p {
+      font-size: 18px;
+      &.small {font-size: 14px;}
+    }
+  }
+
+  .box {
+    height: 20px;
+  }
+
+  section#download-cta, section#docs-cta {
+    a.btn {
+      font-size: 18px;
+      padding: 12px 24px;
+    }
+  }
+
+  footer ul {
+    img {
+      width: 35px;
+    }
+    li:not(:first-child) {
+      margin-left: 35px;
+    }
+  }
+}
diff --git a/docs/img/icon-menu.svg b/docs/img/icon-menu.svg
new file mode 100644
index 0000000..66b335c
--- /dev/null
+++ b/docs/img/icon-menu.svg
@@ -0,0 +1,3 @@
+<svg fill="#000" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+  <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+</svg>
diff --git a/docs/index.html b/docs/index.html
index ec38da5..10fe7b5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,116 +1,50 @@
----
----
-<!doctype html>
-<html class="no-js" lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <title>Waffle grid</title>
-    <meta name="description" content="An easy to use flexbox grid system">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- Twitter card meta -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@lucasgruwez">
-    <meta name="twitter:creator" content="@lucasgruwez">
-    <meta name="twitter:title" content="Waffle Grid system">
-    <meta name="twitter:description" content="An easy to use flexbox grid system.">
-    <meta name="twitter:image" content="/waffle-grid/img/waffle-grid-marketing@2x.jpg">
-    <!-- Open graph met atags -->
-    <meta property="og:title" content="Waffle Grid system" />
-    <meta property="og:description" content="An easy to use flexbox grid system"/>
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://lucasgruwez.github.io/waffle-grid" />
-    <meta property="og:image" content="https://lucasgruwez.github.io/waffle-grid/img/waffle-grid-marketing@2x.jpg" />
-    <!-- Link tags -->
-    <link rel="apple-touch-icon" href="/waffle-grid/apple-touch-icon.png">
-    <link rel="shortcut icon" href="/waffle-grid/favico.png">
-    <link rel="stylesheet" href="/waffle-grid/css/waffle-grid.min.css">
-    <link rel="stylesheet" href="/waffle-grid/css/normalize.css">
-    <link rel="stylesheet" href="/waffle-grid/css/reset.css">
-    <link rel="stylesheet" href="/waffle-grid/css/main.css">
-
-  </head>
-  <body>
-    <!--[if lte IE 9]
-        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/?locale=en">upgrade your browser</a> to improve your experience and security.</p>
-    <![endif]-->
-    
-    <!-- Header and nav -->
-    <header>
-      <nav>
-        <img src="/waffle-grid/img/waffle-logo.svg" alt="Waffle logo">
-        <span class="logo-text">Waffle</span>
-        <ul class="m-hide">
-          <li><a href="https://github.com/lucasgruwez/waffle-grid/wiki/">Docs</a></li>
-          <li><a href="{{site.download}}">Download</a></li>
-          <li><a href="https://github.com/lucasgruwez/waffle-grid">Github</a></li>
-        </ul>
-      </nav>
-      <div class="main-content">
-        <img src="/waffle-grid/img/waffle-logo-white.svg" alt="Waffle logo">
-        <h1 class="title">Waffle grid</h1>
-        <p>An easy to use flexbox grid system.</p>
-        <p class="small">Made by <a href="//github.com/lucasgruwez">@lucasgruwez</a></p>
-      </div>
-    </header>
-    
-    
-    <main>
-      <!-- features section, the one with the three icons -->
-      <section id="features">
-        <div class="grid">
-          <div class="row m-vertical">
-            <div class="col col-4-of-12 m-full-width">
-              <img src="/waffle-grid/img/icon-feather.svg" alt="Feather icon">
-              <h2>Light weight</h2>
-              <p>The waffle grid system is super lightweight, weighing in at only 6kb minified using the default settings.</p>
-            </div>
-            <div class="col col-4-of-12 m-full-width">
-              <img src="/waffle-grid/img/icon-phone.svg" alt="Phone icon">
-              <h2>Responsive</h2>
-              <p>With classes for medium and small devices, the waffle grid can make your layouts fully responsive.</p>
-            </div>
-            <div class="col col-4-of-12 m-full-width">
-              <img src="/waffle-grid/img/icon-sliders.svg" alt="Sliders icon">
-              <h2>Customisable</h2>
-              <p>The waffle grid system was written entyerly in sass, so that you can easily change customize the grid to suit your needs.</p>
-            </div>
-          </div>
-        </div>
-      </section>
-      <!-- Download call to action -->
-      <section id="download-cta-1">
-        <a class="btn" href="{{site.download}}">Download v1.0.0</a>
-      </section>
-      <!-- Grid example -->
-      <section id="grid-example">
-        {% include example.html %}
-      </section>
-      <!-- Code for the grid Example -->
-      <section id="docs-preview">
-        <div class="wrapper">
-          <script src="https://gist.github.com/lucasgruwez/c3c6ed03fb422fb74e8fec550d7c3978.js"></script>
-        </div>
-      </section>
-      <!-- Docs call to action -->
-      <section id="docs-cta">
-        <a href="https://github.com/lucasgruwez/waffle-grid/wiki/" class="btn">Read the docs</a>
-      </section>
-    </main>
-
-    <div class="gist js-activated">
-      <div class="gist-meta">
-        <a>All code</a> hosted with ❤ by <a href="//github.com">GitHub</a>
-      </div>
-    </div>
-
-    {% include footer.html %}
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.slim.min.js"></script>
-    <script src="/waffle-grid/js/functions.js"></script>
-    <script>
-        window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
-        ga('create','UA-92684751-1','auto');ga('send','pageview')
-    </script>
-    <script src="https://www.google-analytics.com/analytics.js" async defer></script>
-  </body>
-</html>
+---
+layout: html
+title: Waffle Grid System
+descrition: An easy to use flexbox grid system.
+---
+<!-- Header-->
+<header>
+  <div class="header-content">
+    <!-- This div is needed to ensure that the content is centered--><img src="{{site.baseurl}}/img/waffle-logo-white.svg" alt="Waffle logo"/>
+    <h1 class="title">Waffle grid</h1>
+    <p>An easy to use flexbox grid system.</p>
+    <p class="small">Made by <a href="https://github.com/lucasgruwez">@lucasgruwez</a></p>
+  </div>
+</header>
+<!-- Main content-->
+<main>
+  <!-- Grid features-->
+  <section id="features">
+    <div class="grid">
+      <div class="row">
+        <div class="col col-4-of-12 col-m-4-of-4"><img src="{{site.baseurl}}/img/icon-feather.svg" alt="Feather icon"/>
+          <h2>Light weight</h2>
+          <p>The waffle grid system is super lightweight, weighing in at only 8kb minified using the default settings.</p>
+        </div>
+        <div class="col col-4-of-12 col-m-4-of-4"><img src="{{site.baseurl}}/img/icon-phone.svg" alt="Phone icon"/>
+          <h2>Responsive</h2>
+          <p>With classes for medium and small devices, the waffle grid can make your layouts fully responsive.</p>
+        </div>
+        <div class="col col-4-of-12 col-m-4-of-4"><img src="{{site.baseurl}}/img/icon-sliders.svg" alt="Sliders icon"/>
+          <h2>Customisable</h2>
+          <p>The waffle grid system was written entyerly in sass, so that you can easily change customize the grid to suit your needs.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Download call to action-->
+  <section id="download-cta"><a href="{{site.download}}" class="btn">Download {{site.version}}</a></section>
+  <!-- Grid example-->
+  <section id="grid-example">{% include example.html %}</section>
+  <!-- Docs preview-->
+  <section id="docs-preview">
+    <div class="wrapper"><script src="https://gist.github.com/lucasgruwez/c3c6ed03fb422fb74e8fec550d7c3978.js")></script></div>
+  </section>
+  <!-- Docs call to actio-->
+  <section id="docs-cta"><a href="{{site.docs}}" class="btn">Read the docs</a></section>
+</main>
+<!-- Bottom "All code hosted with ❤ by GitHub section that pops up-->
+<div class="gist js-activated">
+  <div class="gist-meta"><a>All code</a> hosted with ❤ by <a href="https://github.com">GitHub</a></div>
+</div>
diff --git a/docs/js/functions.js b/docs/js/functions.js
index 21795cb..7cdfb08 100644
--- a/docs/js/functions.js
+++ b/docs/js/functions.js
@@ -10,3 +10,7 @@ $(window).scroll(function() {
     // console.log('invisible2')
   }
 })
+
+$('nav .hamburger').click(function () {
+  $('.js-toggled').toggleClass('visible')
+})
diff --git a/package.json b/package.json
index cbfdab9..7d5b338 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "waffle-grid",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "An easy to use flexbox grid system",
-  "main": "dist/squid.min.css",
+  "main": "dist/waffle-grid.min.css",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
diff --git a/src/waffle-grid.scss b/src/waffle-grid.scss
index 778d3cf..6c65d0f 100644
--- a/src/waffle-grid.scss
+++ b/src/waffle-grid.scss
@@ -16,10 +16,10 @@ $column-classname: "col" !default;
 $grid-columns: (4, 8, 12) !default;
 
 // Column amounts for medium devices
-$m-columns: (2, 4, 6, 8) !default;
+$m-columns: (4, 6, 8) !default;
 
 // Column amounts for small devices
-$s-columns: (2, 4, 6) !default;
+$s-columns: (4, 6) !default;
 
 // Gutter width
 $gutter-width: 20px !default;
@@ -50,304 +50,100 @@ $bp-small: 480px !default;
 .#{$row-classname} {
 	display: flex;
 	flex-direction: row;
-	margin-top: $gutter-width;
-	@extend .full-width
+	width: 100%;
+	flex-wrap: wrap;
 }
 
 .#{$column-classname} {
   box-sizing: border-box;
-  padding-left: $gutter-width;
+  margin: $gutter-width / 2;
   vertical-align: top;
 }
 
-.full-width     {width: percentage(1/1);}
-.half-width     {width: percentage(1/2);}
-.one-third      {width: percentage(1/3);}
-.two-thirds     {width: percentage(2/3);}
-.one-quarter    {width: percentage(1/4);}
-.two-quarters   {width: percentage(2/4);}
-.three-quarters {width: percentage(3/4);}
-
-.push-full-width     {margin-left: percentage(1/1);}
-.push-one-half       {margin-left: percentage(1/2);}
-.push-one-third      {margin-left: percentage(1/3);}
-.push-two-thirds     {margin-left: percentage(2/3);}
-.push-one-quarter    {margin-left: percentage(1/4);}
-.push-two-quarters   {margin-left: percentage(2/4);}
-.push-three-quarters {margin-left: percentage(3/4);}
-
-.pull-full-width     {margin-right: percentage(1/1);}
-.pull-one-half       {margin-right: percentage(1/2);}
-.pull-one-third      {margin-right: percentage(1/3);}
-.pull-two-thirds     {margin-right: percentage(2/3);}
-.pull-one-quarter    {margin-right: percentage(1/4);}
-.pull-two-quarters   {margin-right: percentage(2/4);}
-.pull-three-quarters {margin-right: percentage(3/4);}
-
-.center              {margin-left: auto; margin-right: auto;}
-
+.center {margin-left: auto; margin-right: auto;}
+.left	  {margin-right: auto;}
+.right  {margin-left: auto;}
 
 @each $col-am in $grid-columns {
 	@for $i from 1 through $col-am {
+
 		.#{$column-classname}-#{$i}-of-#{$col-am} {
-			@if percentage($i/$col-am) == percentage(1/1) {
-        @extend .full-width;
-      } @else if percentage($i/$col-am) == percentage(1/2) {
-        @extend .half-width;
-      } @else if percentage($i/$col-am) == percentage(1/3) {
-        @extend .one-third;
-      } @else if percentage($i/$col-am) == percentage(2/3) {
-        @extend .two-thirds;
-      } @else if percentage($i/$col-am) == percentage(1/4) {
-        @extend .one-quarter;
-      } @else if percentage($i/$col-am) == percentage(2/4) {
-        @extend .two-quarters;
-      } @else if percentage($i/$col-am) == percentage(3/4) {
-        @extend .three-quarters;
-			} @else {
-        width: percentage($i/$col-am);
-      }
-		}
+			width: calc(#{percentage($i/$col-am)} - #{$gutter-width});
+		} // end width
 
 		@if ($pushes) {
-      .push-#{$i}-of-#{$col-am} {
-        @if percentage($i/$col-am) == percentage(1/1) {
-          @extend .push-full-width;
-        } @else if percentage($i/$col-am) == percentage(1/2) {
-          @extend .push-one-half;
-        } @else if percentage($i/$col-am) == percentage(1/3) {
-          @extend .push-one-third;
-        } @else if percentage($i/$col-am) == percentage(2/3) {
-          @extend .push-two-thirds;
-        } @else if percentage($i/$col-am) == percentage(1/4) {
-          @extend .push-one-quarter;
-        } @else if percentage($i/$col-am) == percentage(2/4) {
-          @extend .push-two-quarters;
-        } @else if percentage($i/$col-am) == percentage(3/4) {
-          @extend .push-three-quarters;
-        } @else {
-          margin-left: percentage($i/$col-am);
-        }
-      }
-		}
-
-    @if ($pulls) {
-      .pull-#{$i}-of-#{$col-am} {
+			.push-#{$i}-of-#{$col-am} {
+				margin-left: calc(#{percentage($i/$col-am)} + #{$gutter-width} / 2);
+			}
+		} // end pushes
 
-        @if percentage($i/$col-am) == percentage(1/1) {
-          @extend .pull-full-width;
-        } @else if percentage($i/$col-am) == percentage(1/2) {
-          @extend .pull-one-half;
-        } @else if percentage($i/$col-am) == percentage(1/3) {
-          @extend .pull-one-third;
-        } @else if percentage($i/$col-am) == percentage(2/3) {
-          @extend .pull-two-thirds;
-        } @else if percentage($i/$col-am) == percentage(1/4) {
-          @extend .pull-one-quarter;
-        } @else if percentage($i/$col-am) == percentage(2/4) {
-          @extend .pull-two-quarters;
-        } @else if percentage($i/$col-am) == percentage(3/4) {
-          @extend .pull-three-quarters;
-        } @else {
-          margin-left: -(percentage($i/$col-am));
-        }
-      }
-    }
-	}
-}
+		@if ($pulls) {
+			.pull-#{$i}-of-#{$col-am} {
+				margin-right: calc(#{percentage($i/$col-am)} + #{$gutter-width} / 2);
+			}
+		} // end pulls
+	} // end for
+} // end each
 
 @media (max-width: $bp-medium) {
-	.m-vertical       {flex-direction: column;}
-	.m-hide           {display: none;}
-
-	.m-full-width     {width: percentage(1/1);}
-	.m-half-width     {width: percentage(1/2);}
-	.m-one-third      {width: percentage(1/3);}
-	.m-two-thirds     {width: percentage(2/3);}
-	.m-one-quarter    {width: percentage(1/4);}
-	.m-two-quarters   {width: percentage(2/4);}
-	.m-three-quarters {width: percentage(3/4);}
+	.l-only {display: none;}
+	.m-hide {display: none;}
 
-	.push-m-full-width     {margin-left: percentage(1/1);}
-	.push-m-one-half       {margin-left: percentage(1/2);}
-	.push-m-one-third      {margin-left: percentage(1/3);}
-	.push-m-two-thirds     {margin-left: percentage(2/3);}
-	.push-m-one-quarter    {margin-left: percentage(1/4);}
-	.push-m-two-quarters   {margin-left: percentage(2/4);}
-	.push-m-three-quarters {margin-left: percentage(3/4);}
-
-	.pull-m-full-width     {margin-right: percentage(1/1);}
-	.pull-m-one-half       {margin-right: percentage(1/2);}
-	.pull-m-one-third      {margin-right: percentage(1/3);}
-	.pull-m-two-thirds     {margin-right: percentage(2/3);}
-	.pull-m-one-quarter    {margin-right: percentage(1/4);}
-	.pull-m-two-quarters   {margin-right: percentage(2/4);}
-	.pull-m-three-quarters {margin-right: percentage(3/4);}
 	@each $col-am in $m-columns {
 		@for $i from 1 through $col-am {
+
 			.#{$column-classname}-m-#{$i}-of-#{$col-am} {
-				@if percentage($i/$col-am) == percentage(1/1) {
-	        @extend .m-full-width;
-	      } @else if percentage($i/$col-am) == percentage(1/2) {
-	        @extend .m-half-width;
-	      } @else if percentage($i/$col-am) == percentage(1/3) {
-	        @extend .m-one-third;
-	      } @else if percentage($i/$col-am) == percentage(2/3) {
-	        @extend .m-two-thirds;
-	      } @else if percentage($i/$col-am) == percentage(1/4) {
-	        @extend .m-one-quarter;
-	      } @else if percentage($i/$col-am) == percentage(2/4) {
-	        @extend .m-two-quarters;
-	      } @else if percentage($i/$col-am) == percentage(3/4) {
-	        @extend .m-three-quarters;
-				} @else {
-	        width: percentage($i/$col-am);
-	      }
-			}
+	      width: calc(#{percentage($i/$col-am)} - #{$gutter-width});
+			} // end width
+
 			@if ($pushes) {
-				.push-m-#{$i}-of-#{$col-am} {
-					@if percentage($i/$col-am) == percentage(1/1) {
-		        @extend .push-m-full-width;
-		      } @else if percentage($i/$col-am) == percentage(1/2) {
-		        @extend .push-m-one-half;
-		      } @else if percentage($i/$col-am) == percentage(1/3) {
-		        @extend .push-m-one-third;
-		      } @else if percentage($i/$col-am) == percentage(2/3) {
-		        @extend .push-m-two-thirds;
-		      } @else if percentage($i/$col-am) == percentage(1/4) {
-		        @extend .push-m-one-quarter;
-		      } @else if percentage($i/$col-am) == percentage(2/4) {
-		        @extend .push-m-two-quarters;
-		      } @else if percentage($i/$col-am) == percentage(3/4) {
-		        @extend .push-m-three-quarters;
-					} @else {
-		        margin-left: percentage($i/$col-am);
-		      }
-				}
-			}
+	      .push-m-#{$i}-of-#{$col-am} {
+	        margin-left: calc(#{percentage($i/$col-am)} + #{$gutter-width} / 2);
+	      }
+			} // end pushes
+
 			@if ($pulls) {
-				.pull-m-#{$i}-of-#{$col-am} {
-					@if percentage($i/$col-am) == percentage(1/1) {
-						@extend .pull-m-full-width;
-					} @else if percentage($i/$col-am) == percentage(1/2) {
-						@extend .pull-m-one-half;
-					} @else if percentage($i/$col-am) == percentage(1/3) {
-						@extend .pull-m-one-third;
-					} @else if percentage($i/$col-am) == percentage(2/3) {
-						@extend .pull-m-two-thirds;
-					} @else if percentage($i/$col-am) == percentage(1/4) {
-						@extend .pull-m-one-quarter;
-					} @else if percentage($i/$col-am) == percentage(2/4) {
-						@extend .pull-m-two-quarters;
-					} @else if percentage($i/$col-am) == percentage(3/4) {
-						@extend .pull-m-three-quarters;
-					} @else {
-						margin-left: percentage($i/$col-am);
-					}
-				}
-			}
-		}
-	}
+	      .pull-m-#{$i}-of-#{$col-am} {
+	        margin-right: calc(#{percentage($i/$col-am)} + #{$gutter-width} / 2);
+	      }
+			} // end pulls
+		} // end for
+	} // end each
 }
 
 @media (max-width: $bp-small) {
-	.s-vertical       {flex-direction: column;}
-	.s-hide           {display: none;}
-
-	.s-full-width     {width: percentage(1/1);}
-	.s-half-width     {width: percentage(1/2);}
-	.s-one-third      {width: percentage(1/3);}
-	.s-two-thirds     {width: percentage(2/3);}
-	.s-one-quarter    {width: percentage(1/4);}
-	.s-two-quarters   {width: percentage(2/4);}
-	.s-three-quarters {width: percentage(3/4);}
-
-	.push-s-full-width     {margin-left: percentage(1/1);}
-	.push-s-one-half       {margin-left: percentage(1/2);}
-	.push-s-one-third      {margin-left: percentage(1/3);}
-	.push-s-two-thirds     {margin-left: percentage(2/3);}
-	.push-s-one-quarter    {margin-left: percentage(1/4);}
-	.push-s-two-quarters   {margin-left: percentage(2/4);}
-	.push-s-three-quarters {margin-left: percentage(3/4);}
+	.s-hide {display: none;}
 
-	.pull-s-full-width     {margin-right: percentage(1/1);}
-	.pull-s-one-half       {margin-right: percentage(1/2);}
-	.pull-s-one-third      {margin-right: percentage(1/3);}
-	.pull-s-two-thirds     {margin-right: percentage(2/3);}
-	.pull-s-one-quarter    {margin-right: percentage(1/4);}
-	.pull-s-two-quarters   {margin-right: percentage(2/4);}
-	.pull-s-three-quarters {margin-right: percentage(3/4);}
 	@each $col-am in $s-columns {
 		@for $i from 1 through $col-am {
+
 			.#{$column-classname}-s-#{$i}-of-#{$col-am} {
-				@if percentage($i/$col-am) == percentage(1/1) {
-	        @extend .s-full-width;
-	      } @else if percentage($i/$col-am) == percentage(1/2) {
-	        @extend .s-half-width;
-	      } @else if percentage($i/$col-am) == percentage(1/3) {
-	        @extend .s-one-third;
-	      } @else if percentage($i/$col-am) == percentage(2/3) {
-	        @extend .s-two-thirds;
-	      } @else if percentage($i/$col-am) == percentage(1/4) {
-	        @extend .s-one-quarter;
-	      } @else if percentage($i/$col-am) == percentage(2/4) {
-	        @extend .s-two-quarters;
-	      } @else if percentage($i/$col-am) == percentage(3/4) {
-	        @extend .s-three-quarters;
-				} @else {
-	        width: percentage($i/$col-am);
-	      }
-			}
+				width: calc(#{percentage($i/$col-am)} - #{$gutter-width});
+			} // end width
+
 			@if ($pushes) {
 				.push-s-#{$i}-of-#{$col-am} {
-					@if percentage($i/$col-am) == percentage(1/1) {
-		        @extend .push-s-full-width;
-		      } @else if percentage($i/$col-am) == percentage(1/2) {
-		        @extend .push-s-one-half;
-		      } @else if percentage($i/$col-am) == percentage(1/3) {
-		        @extend .push-s-one-third;
-		      } @else if percentage($i/$col-am) == percentage(2/3) {
-		        @extend .push-s-two-thirds;
-		      } @else if percentage($i/$col-am) == percentage(1/4) {
-		        @extend .push-s-one-quarter;
-		      } @else if percentage($i/$col-am) == percentage(2/4) {
-		        @extend .push-s-two-quarters;
-		      } @else if percentage($i/$col-am) == percentage(3/4) {
-		        @extend .push-s-three-quarters;
-					} @else {
-		        margin-left: percentage($i/$col-am);
-		      }
+					margin-left: calc(#{percentage($i/$col-am)} + #{$gutter-width} / 2);
 				}
-			}
+			} // end pushes
+
 			@if ($pulls) {
 				.pull-s-#{$i}-of-#{$col-am} {
-					@if percentage($i/$col-am) == percentage(1/1) {
-						@extend .pull-s-full-width;
-					} @else if percentage($i/$col-am) == percentage(1/2) {
-						@extend .pull-s-one-half;
-					} @else if percentage($i/$col-am) == percentage(1/3) {
-						@extend .pull-s-one-third;
-					} @else if percentage($i/$col-am) == percentage(2/3) {
-						@extend .pull-s-two-thirds;
-					} @else if percentage($i/$col-am) == percentage(1/4) {
-						@extend .pull-s-one-quarter;
-					} @else if percentage($i/$col-am) == percentage(2/4) {
-						@extend .pull-s-two-quarters;
-					} @else if percentage($i/$col-am) == percentage(3/4) {
-						@extend .pull-s-three-quarters;
-					} @else {
-						margin-left: percentage($i/$col-am);
-					}
+					margin-right: calc(#{percentage($i/$col-am)} + #{$gutter-width} / 2);
 				}
-			}
-		}
-	}
+			} // end pulls
+		} // end for
+	} // end each
 }
 
 @media (min-width: $bp-small) {
 	.s-only {display: none;}
+	.s-and-lower {display: none;}
 }
 
 @media (min-width: $bp-medium) {
 	.m-only {display: none;}
+	.m-and-lower {display: none;}
 }
+
+// under 150 lines !!