diff --git a/bower.json b/bower.json
index befc595..55b2444 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "hoisin.scss",
-  "version": "0.9.13",
+  "version": "0.9.14",
   "description": "A simple responsive mini framework to kick start your project.",
   "main": ["scss/styles.scss", "scss/responsive.scss"],
   "keywords": [
diff --git a/css/ie.css b/css/ie.css
index ad51068..25daa08 100644
--- a/css/ie.css
+++ b/css/ie.css
@@ -2,7 +2,7 @@
  * Hoisin.scss
  * CSS responsive framework boilerplate
  * Create your own grids, plugin anything
- * Version: 0.9.13
+ * Version: 0.9.14
  * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,
  *             Ramon Lapenta <me@ramonlapenta.com>
  *
diff --git a/css/maps/ie.css.map b/css/maps/ie.css.map
index e79c425..3a986e8 100644
--- a/css/maps/ie.css.map
+++ b/css/maps/ie.css.map
@@ -1 +1 @@
-{"version":3,"sources":["_version.scss","ie.scss"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;ACJH;;;;;;;;;;EAUI,eAAe;CAClB;;AAID;EACI,eAAe;EACf,aAAY;CACf;;AAGG;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAID;EACI,mBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAID;EACI,oBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAIL;EACI,aAAa;EACb,eAAiB;CACpB;;AAED;EACI,eAAe;CAClB;;AAED;EACI,gBAAgB;CACnB;;AAED;EACI,YAAY;CACf;;AAED;EACI,YAAY;EACZ,eAAe;CAClB","file":"ie.css","sourcesContent":["/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.13\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n ","@import 'version';\n@import 'vars';\n@import 'mixins';\n\narticle, \naside, \ndetails, \nfigcaption, \nfigure, \nfooter, \nheader, \nhgroup, \nnav, \nsection { \n    display: block; \n}\n\n$wrap: $col-width * $col-qty + $gutter * ($col-qty - 1);\n\n.container {\n    margin: 0 auto;\n    width: $wrap + $gutter;\n}\n\n@for $i from 2 through $col-qty {\n    .col#{$i} {\n        float: left;\n        margin: 0 $gutter/2;\n        width: ($col-width * $i) + ($gutter * $i) - $gutter;\n    }\n}\n\n@for $i from 1 through ($col-qty - 1) {\n    .pre#{$i} {\n        padding-left: ($col-width * $i) + ($gutter * $i);\n    }\n}\n\n@for $i from 1 through ($col-qty - 1) {\n    .suf#{$i} {\n        padding-right: ($col-width * $i) + ($gutter * $i);\n    }\n}\n\n// Grid utilities\n.colr {\n    float: right;\n    margin: 0 $gutter/2;\n}\n\n.alpha {\n    margin-left: 0;\n}\n\n.omega {\n    margin-right: 0;\n}\n\n.clear {\n    clear: both;\n}\n\n.center {\n    float: none;\n    margin: 0 auto;\n}\n"],"sourceRoot":"/source/"}
\ No newline at end of file
+{"version":3,"sources":["_version.scss","ie.scss"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;ACJH;;;;;;;;;;EAUI,eAAe;CAClB;;AAID;EACI,eAAe;EACf,aAAY;CACf;;AAGG;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAID;EACI,mBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAID;EACI,oBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAIL;EACI,aAAa;EACb,eAAiB;CACpB;;AAED;EACI,eAAe;CAClB;;AAED;EACI,gBAAgB;CACnB;;AAED;EACI,YAAY;CACf;;AAED;EACI,YAAY;EACZ,eAAe;CAClB","file":"ie.css","sourcesContent":["/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.14\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n ","@import 'version';\n@import 'vars';\n@import 'mixins';\n\narticle, \naside, \ndetails, \nfigcaption, \nfigure, \nfooter, \nheader, \nhgroup, \nnav, \nsection { \n    display: block; \n}\n\n$wrap: $col-width * $col-qty + $gutter * ($col-qty - 1);\n\n.container {\n    margin: 0 auto;\n    width: $wrap + $gutter;\n}\n\n@for $i from 2 through $col-qty {\n    .col#{$i} {\n        float: left;\n        margin: 0 $gutter/2;\n        width: ($col-width * $i) + ($gutter * $i) - $gutter;\n    }\n}\n\n@for $i from 1 through ($col-qty - 1) {\n    .pre#{$i} {\n        padding-left: ($col-width * $i) + ($gutter * $i);\n    }\n}\n\n@for $i from 1 through ($col-qty - 1) {\n    .suf#{$i} {\n        padding-right: ($col-width * $i) + ($gutter * $i);\n    }\n}\n\n// Grid utilities\n.colr {\n    float: right;\n    margin: 0 $gutter/2;\n}\n\n.alpha {\n    margin-left: 0;\n}\n\n.omega {\n    margin-right: 0;\n}\n\n.clear {\n    clear: both;\n}\n\n.center {\n    float: none;\n    margin: 0 auto;\n}\n"],"sourceRoot":"/source/"}
\ No newline at end of file
diff --git a/css/maps/sample.css.map b/css/maps/sample.css.map
new file mode 100644
index 0000000..3821da9
--- /dev/null
+++ b/css/maps/sample.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["_version.scss","_grid.scss","l/_base.scss","sample.css","l/_xl.scss","m/_base.scss","s/_base.scss","components/_body.scss","_vars.scss","_functions.scss","components/_sample.scss","_mixins.scss"],"names":[],"mappings":"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","file":"sample.css","sourcesContent":["/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.14\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n ","@import 'vars';\n@import 'mixins';\n\n@media (min-width: $bp-l) {\n\n    @import 'l/base';\n\n}\n@media (min-width: $bp-xl) {\n\n    @import 'l/xl';\n\n}\n@media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {\n\n    @import 'm/base';\n\n}\n@media (min-width: $bp-s) and (max-width: ($bp-m - 1)) {\n\n    @import 's/base';\n\n}\n","// * Large screens grid system\n// *\n\n// * Empty declaration as a base for all spans common styles\n%base-col {\n    float: left;\n    margin: 0 $gutter/2;\n}\n\n///* \n// * Cols\n// * Mixin to create the col spans using the previous empty % declaration\n// *\n// * @include cols;\n// */\n@mixin cols {\n    @for $i from 1 through $col-qty {\n        .col#{$i} { @extend %base-col; }\n    }\n}\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n\n    // * Define the size of the container using variables\n    $wrap: ($col-width * $col-qty) + $gutter * ($col-qty - 1);\n\n    .container {\n        margin: 0 auto;\n        width: $wrap + $gutter;\n\n        &:after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n    }\n\n    // * Loop through the cols to generate size of nested containers\n    @for $i from 2 through $col-qty {\n        .col#{$i} > .container {\n            margin: 0 0 0 0 -($gutter/2);\n            width: ($col-width * $i) + ($gutter * $i);\n        }\n    }\n\n    // * Output all the spans common styles\n    @include cols;\n\n    // * Loop to generate each span \n    @for $i from 2 through $col-qty {\n        .col#{$i} {\n            width: ($col-width * $i) + ($gutter * $i) - $gutter;\n        }\n    }\n\n    @for $i from 1 through ($col-qty - 2) {\n        .pre#{$i} {\n            margin-left: ($col-width * $i) + ($gutter * $i) + ($gutter / 2);\n        }\n    }\n\n    @for $i from 1 through ($col-qty - 2) {\n        .suf#{$i} {\n            margin-right: ($col-width * $i) + ($gutter * $i);\n        }\n    }\n\n    // *\n    // * Additional grid utilities\n    // *\n\n    // * Force float a span to the right\n    .colr {\n        float: right;\n        margin: 0 $gutter/2;\n    }\n\n    // * Remove left margin from span\n    .alpha {\n        margin-left: 0;\n    }\n\n    // * Remove right margin from span\n    .omega {\n        margin-right: 0;\n    }\n\n    // * Clear helper\n    .clear {\n        clear: both;\n    }\n\n    // * center span in container\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}\n","/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.14\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n@media (min-width: 1024px) {\n  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {\n    float: left;\n    margin: 0 10px;\n  }\n  .container {\n    margin: 0 auto;\n    width: 960px;\n  }\n  .container:after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .col2 > .container {\n    margin: 0 0 0 -10px;\n    width: 160px;\n  }\n  .col3 > .container {\n    margin: 0 0 0 -10px;\n    width: 240px;\n  }\n  .col4 > .container {\n    margin: 0 0 0 -10px;\n    width: 320px;\n  }\n  .col5 > .container {\n    margin: 0 0 0 -10px;\n    width: 400px;\n  }\n  .col6 > .container {\n    margin: 0 0 0 -10px;\n    width: 480px;\n  }\n  .col7 > .container {\n    margin: 0 0 0 -10px;\n    width: 560px;\n  }\n  .col8 > .container {\n    margin: 0 0 0 -10px;\n    width: 640px;\n  }\n  .col9 > .container {\n    margin: 0 0 0 -10px;\n    width: 720px;\n  }\n  .col10 > .container {\n    margin: 0 0 0 -10px;\n    width: 800px;\n  }\n  .col11 > .container {\n    margin: 0 0 0 -10px;\n    width: 880px;\n  }\n  .col12 > .container {\n    margin: 0 0 0 -10px;\n    width: 960px;\n  }\n  .col2 {\n    width: 140px;\n  }\n  .col3 {\n    width: 220px;\n  }\n  .col4 {\n    width: 300px;\n  }\n  .col5 {\n    width: 380px;\n  }\n  .col6 {\n    width: 460px;\n  }\n  .col7 {\n    width: 540px;\n  }\n  .col8 {\n    width: 620px;\n  }\n  .col9 {\n    width: 700px;\n  }\n  .col10 {\n    width: 780px;\n  }\n  .col11 {\n    width: 860px;\n  }\n  .col12 {\n    width: 940px;\n  }\n  .pre1 {\n    margin-left: 90px;\n  }\n  .pre2 {\n    margin-left: 170px;\n  }\n  .pre3 {\n    margin-left: 250px;\n  }\n  .pre4 {\n    margin-left: 330px;\n  }\n  .pre5 {\n    margin-left: 410px;\n  }\n  .pre6 {\n    margin-left: 490px;\n  }\n  .pre7 {\n    margin-left: 570px;\n  }\n  .pre8 {\n    margin-left: 650px;\n  }\n  .pre9 {\n    margin-left: 730px;\n  }\n  .pre10 {\n    margin-left: 810px;\n  }\n  .suf1 {\n    margin-right: 80px;\n  }\n  .suf2 {\n    margin-right: 160px;\n  }\n  .suf3 {\n    margin-right: 240px;\n  }\n  .suf4 {\n    margin-right: 320px;\n  }\n  .suf5 {\n    margin-right: 400px;\n  }\n  .suf6 {\n    margin-right: 480px;\n  }\n  .suf7 {\n    margin-right: 560px;\n  }\n  .suf8 {\n    margin-right: 640px;\n  }\n  .suf9 {\n    margin-right: 720px;\n  }\n  .suf10 {\n    margin-right: 800px;\n  }\n  .colr {\n    float: right;\n    margin: 0 10px;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 1360px) {\n  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10 {\n    float: left;\n    margin: 0 15px;\n  }\n  .col12 {\n    margin: 0 15px;\n    width: 1170px;\n  }\n  .col2 {\n    width: 170px;\n  }\n  .col3 {\n    width: 270px;\n  }\n  .col4 {\n    width: 370px;\n  }\n  .col5 {\n    width: 470px;\n  }\n  .col6 {\n    width: 570px;\n  }\n  .col7 {\n    width: 670px;\n  }\n  .col8 {\n    width: 770px;\n  }\n  .col9 {\n    width: 870px;\n  }\n  .col10 {\n    width: 970px;\n  }\n  .col11 {\n    width: 1070px;\n  }\n  .pre1 {\n    margin-left: 115px;\n  }\n  .pre2 {\n    margin-left: 215px;\n  }\n  .pre3 {\n    margin-left: 315px;\n  }\n  .pre4 {\n    margin-left: 415px;\n  }\n  .pre5 {\n    margin-left: 515px;\n  }\n  .pre6 {\n    margin-left: 615px;\n  }\n  .pre7 {\n    margin-left: 715px;\n  }\n  .pre8 {\n    margin-left: 815px;\n  }\n  .pre9 {\n    margin-left: 915px;\n  }\n  .pre10 {\n    margin-left: 1015px;\n  }\n  .suf1 {\n    margin-right: 115px;\n  }\n  .suf2 {\n    margin-right: 215px;\n  }\n  .suf3 {\n    margin-right: 315px;\n  }\n  .suf4 {\n    margin-right: 415px;\n  }\n  .suf5 {\n    margin-right: 515px;\n  }\n  .suf6 {\n    margin-right: 615px;\n  }\n  .suf7 {\n    margin-right: 715px;\n  }\n  .suf8 {\n    margin-right: 815px;\n  }\n  .suf9 {\n    margin-right: 915px;\n  }\n  .suf10 {\n    margin-right: 1015px;\n  }\n  .container {\n    width: 1200px;\n  }\n  .col2 > .container {\n    margin: 0 0 0 -15px;\n    width: 200px;\n  }\n  .col3 > .container {\n    margin: 0 0 0 -15px;\n    width: 300px;\n  }\n  .col4 > .container {\n    margin: 0 0 0 -15px;\n    width: 400px;\n  }\n  .col5 > .container {\n    margin: 0 0 0 -15px;\n    width: 500px;\n  }\n  .col6 > .container {\n    margin: 0 0 0 -15px;\n    width: 600px;\n  }\n  .col7 > .container {\n    margin: 0 0 0 -15px;\n    width: 700px;\n  }\n  .col8 > .container {\n    margin: 0 0 0 -15px;\n    width: 800px;\n  }\n  .col9 > .container {\n    margin: 0 0 0 -15px;\n    width: 900px;\n  }\n  .col10 > .container {\n    margin: 0 0 0 -15px;\n    width: 1000px;\n  }\n  .col11 > .container {\n    margin: 0 0 0 -15px;\n    width: 1100px;\n  }\n  .col12 > .container {\n    margin: 0 0 0 -15px;\n    width: 1200px;\n  }\n  .colr {\n    float: right;\n    margin: 0 15px;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .wrap {\n    overflow: hidden;\n    width: 100%;\n  }\n  .container {\n    width: 100%;\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n  .container::after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .container .container {\n    width: 102%;\n    width: calc(100% + 20px);\n    margin-left: -10px;\n  }\n  .col12,\n  .col11,\n  .col10,\n  .col9,\n  .col8,\n  .col7 {\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .col6,\n  .col5,\n  .col4,\n  .col3 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .col2 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 33.33%;\n    box-sizing: border-box;\n  }\n  .m-full {\n    width: 100%;\n  }\n  .m-full.colr {\n    float: none;\n  }\n  .m-half {\n    float: left;\n    width: 50%;\n  }\n  .m-1_3 {\n    float: left;\n    width: 33.33%;\n  }\n  .m-2_3 {\n    float: left;\n    width: 66.66%;\n  }\n  .colr {\n    float: right;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 120px) and (max-width: 679px) {\n  .wrap {\n    overflow: hidden;\n    width: 100%;\n  }\n  .container {\n    width: 100%;\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n  .container:after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .container .container {\n    width: 102%;\n    width: calc(100% + 20px);\n    margin-left: -10px;\n  }\n  .col12,\n  .col11,\n  .col10,\n  .col9,\n  .col8,\n  .col7,\n  .col6,\n  .col5,\n  .col4,\n  .col3 {\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .col2 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .s-full {\n    float: none;\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .s-half {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .clear {\n    clear: both;\n  }\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: sans-serif;\n}\n\n.red {\n  color: red;\n}\n\n.red-light {\n  color: #ffb3b3;\n}\n\n.red-dark {\n  color: maroon;\n}\n\n@media (min-width: 1024px) {\n  body {\n    font-size: 18px;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  body {\n    font-size: 16px;\n  }\n}\n\n@media (min-width: 120px) and (max-width: 679px) {\n  body {\n    font-size: 14px;\n  }\n}\n\nbody {\n  color: #666;\n  margin: 0;\n  padding: 50px 0;\n  font-family: \"Roboto Condensed\", sans-serif;\n  font-size: 18px;\n  font-weight: 300;\n  background: white;\n}\n\nh2 {\n  color: #d8531e;\n  font-weight: 300;\n  margin: 0;\n  font-size: 48px;\n  font-size: 48px;\n}\n\nh3 {\n  color: #333;\n  font-weight: 300;\n  margin: 0;\n  font-size: 36px;\n  line-height: 36px;\n  padding: 12px 0;\n}\n\np {\n  margin: 0 0 21px 0;\n}\n\na {\n  color: #d8531e;\n}\n\nsection {\n  margin-bottom: 50px;\n}\n\n.box {\n  margin: 0 0 10px 0;\n  padding: 10px;\n  background: #F5F5F5;\n}\n\n@media (min-width: 1024px) {\n  .box {\n    margin-bottom: 20px;\n    padding: 20px;\n  }\n}\n\n@media (min-width: 1360px) {\n  .box {\n    margin-bottom: 30px;\n    padding: 30px;\n  }\n}\n\n.box p {\n  margin: 0;\n}\n\n.code {\n  font-family: \"Courier New\", serif;\n  font-size: 14px;\n}\n\n.nesting {\n  background-color: #FFFFDF;\n  margin-bottom: 20px;\n}\n\n.nesting .nesting {\n  background-color: #FFE7DF;\n}\n\npre {\n  border: 1px solid #CCC;\n  background-color: #F9F9F9;\n  padding: 10px;\n  margin: 0;\n  overflow: auto;\n}\n\n@media (min-width: 1024px) {\n  .content {\n    float: left;\n    margin: 0 10px;\n    width: 620px;\n  }\n}\n\n@media (min-width: 1360px) {\n  .content {\n    margin: 0 15px;\n    width: 770px;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .content {\n    float: left;\n    padding: 0 5px;\n    width: 66.66%;\n    box-sizing: border-box;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .content {\n    float: left;\n    padding: 0 5px;\n    width: 66.66%;\n    box-sizing: border-box;\n  }\n}\n\n@media (min-width: 1024px) {\n  .sidebar {\n    float: right;\n    margin: 0 10px;\n    width: 300px;\n  }\n}\n\n@media (min-width: 1360px) {\n  .sidebar {\n    margin: 0 15px;\n    width: 370px;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .sidebar {\n    float: right;\n    padding: 0 5px;\n    width: 33.33%;\n    box-sizing: border-box;\n  }\n}\n\n@media (max-width: 680px) {\n  .sidebar {\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n}\n\n@media (max-width: 680px) {\n  .test {\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n}\n","// *\n// * Grid system\n// * Define the size of the container using extra large variables\n// *\n\n// * Generate a common style for all spans\n%base-xl-col {\n    float: left;\n    margin: 0 $xl-gutter/2;\n}\n\n///* \n// * Cols\n// * Mixin to create the col spans using the previous empty % declaration\n// *\n// * @include cols;\n// */\n@mixin cols {\n    @for $i from 1 to $col-qty - 1 {\n        .col#{$i} { @extend %base-xl-col; }\n    }\n}\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    $wrap: $xl-col-width * 12 + $xl-gutter * 11;\n\n    // * Output the common span styles\n    @include cols;\n\n    // Define widths for each span\n    .col#{$col-qty} {\n        margin: 0 $xl-gutter/2; // Full width, doesn't need float\n        width: ($xl-col-width * $col-qty) + ($xl-gutter * $col-qty) - $xl-gutter;\n    }\n\n    @for $i from 2 to $col-qty {\n        .col#{$i} {\n            width: $xl-col-width * $i + $xl-gutter * $i - $xl-gutter;\n        }\n    }\n\n    @for $i from 1 through 10 {\n        .pre#{$i} {\n            margin-left: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);\n        }\n    }\n\n    @for $i from 1 through 10 {\n        .suf#{$i} {\n            margin-right: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);\n        }\n    }\n\n    .container {\n        width: $wrap + $xl-gutter;\n    }\n\n    @for $i from 2 through $col-qty {\n        .col#{$i} > .container {\n            margin: 0 0 0 0 -($xl-gutter/2);\n            width: ($xl-col-width * $i) + ($xl-gutter * $i);\n        }\n    }\n\n    // * Grid utilities\n    .colr {\n        float: right;\n        margin: 0 $xl-gutter/2;\n    }\n\n    .alpha {\n        margin-left: 0;\n    }\n\n    .omega {\n        margin-right: 0;\n    }\n\n    .clear {\n        clear: both;\n    }\n\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}\n","// * Grid system\n// * Define the properties of the flexible container\n// *\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    .wrap {\n        overflow: hidden;\n        width: 100%;\n    }\n\n    .container {\n        width: 100%;\n        padding: 0 ($gutter/4);\n        box-sizing: border-box;\n        \n        &::after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n\n        .container {\n            width: 102%;\n            width: calc(100% + #{$gutter});\n            margin-left: -($gutter/2);\n        }\n    }\n\n    .col12, \n    .col11, \n    .col10, \n    .col9, \n    .col8, \n    .col7 {\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .col6, \n    .col5, \n    .col4, \n    .col3 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .col2 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 33.33%;\n        box-sizing: border-box;\n    }\n\n    .m-full {\n        width: 100%;\n        &.colr {\n            float: none;\n        }\n    }\n\n    .m-half {\n        float: left;\n        width: 50%;\n    }\n\n    .m-1_3 {\n        float: left;\n        width: 33.33%;\n    }\n\n    .m-2_3 {\n        float: left;\n        width: 66.66%;\n    }\n\n    // * Additional grid utilities\n    .colr {\n        float: right;\n    }\n\n    .alpha {\n        margin-left: 0;\n    }\n\n    .omega {\n        margin-right: 0;\n    }\n\n    .clear {\n        clear: both;\n    }\n\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}","// * Grid system\n// * Define the properties of the flexible container\n// *\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    .wrap {\n        overflow: hidden;\n        width: 100%;\n    }\n\n    .container {\n        width: 100%;\n        padding: 0 ($gutter/4);\n        box-sizing: border-box;\n\n        &:after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n        \n        .container {\n            width: 102%;\n            width: calc(100% + #{$gutter});\n            margin-left: -($gutter/2);\n        }\n    }\n\n    .col12, \n    .col11, \n    .col10, \n    .col9, \n    .col8, \n    .col7, \n    .col6, \n    .col5, \n    .col4, \n    .col3 {\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .col2 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .s-full {\n        float: none;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .s-half {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .clear {\n        clear: both;\n    }\n}\n","// Body\nbody {\n    margin: 0;\n    padding: 0;\n    font-family: $body-font;\n}\n$red: red;\n.red {\n    color: $red;\n}\n.red-light {\n    color: light($red, 70%);\n}\n.red-dark {\n    color: dark($red, 50%);\n}\n\n@media (min-width: $bp-l) {\n\n    body {\n        font-size: 18px;\n    }\n\n}\n@media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {\n\n    body {\n        font-size: 16px;\n    }\n\n}\n@media (min-width: $bp-s) and (max-width: ($bp-m - 1)) {\n\n    body {\n        font-size: 14px;\n    }\n\n}","// Colours\n$highlight:                     #fa9200;\n\n$error:                         #f00;\n$error-bg:                      #ffe5e5;\n\n$success:                       #390;\n$success-bg:                    #eaf5e5;\n\n$info:                          #39f;\n$info-bg:                       #eaf5ff;\n\n$warning:                       #ff0;\n$warning-bg:                    #ffffe5;\n\n$black:                         #000;\n$white:                         #fff;\n$text:                          #000;\n$title:                         #000;\n\n\n// Grid\n$include-grid:                  true;\n$col-qty:                       12;\n$col-width:                     60px;\n$gutter:                        20px;\n\n// Large desktop grid\n$xl-col-width:                  70px;\n$xl-gutter:                     30px;\n\n\n// Breakpoints\n$bp-xl:                 \t\t1360px;\n$bp-l:              \t\t\t1024px;\n$bp-m:             \t\t\t\t680px;\n$bp-s:              \t\t\t120px;\n\n\n// Paths\n$img:                           '../img/';\n$sprite:                        '../img/sprite.png';\n$fonts:                         '../fonts/';\n\n    \n// Typography\n$body-font:                     sans-serif;\n$title-font:                    serif;\n","///*\n// * Hoisin.scss\n// * Functions library\n// */\n\n\n\n///* \n// * Darken colors\n// * \n// * This function uses mix to have a more granular control of the darkening.\n// * @param $color ($variable | #HEX);\n// * @param $value (percentage);\n// *\n// * dark($blue, 20%);\n// */\n@function dark($color, $value: 10%) {\n    @return mix($black, $color, $value);\n}\n\n\n\n///* \n// * Lighten colors\n// * \n// * This function uses mix to have a more granular control of the darkening.\n// * @param $color ($variable | #HEX);\n// * @param $value (percentage);\n// *\n// * light($blue, 20%);\n// */\n@function light($color, $value: 10%) {\n    @return mix($white, $color, $value);\n}\n\n\n\n\n///* \n// * Flexible Span \n// * \n// * This function generates a width value based on the parameter given, using \n// * details from the medium size grid.\n// *\n// * @param $width ($width);\n// *\n// * span-fw('m-2_3');\n// */\n@function span-fw($width) {\n    @if $width == 'm-2_3' {\n        @return 66.66%;\n    } @else if $width == 'm-half' {\n        @return 50%;\n    } @else if $width == 'm-1_3' {\n        @return 33.33%;\n    } @else if $width == 'm-4_4' {\n        @return 25%;\n    } @else {\n        @return 100%;\n    }\n}\n\n\n\n\n///* \n// * Span\n// * \n// * This function generates a width value based on the parameter given, using \n// * details from the $gutter and $col global variables.\n// *\n// * @param $cols ($cols);\n// *\n// * span(8);\n// */\n@function span($cols: 12) {\n    @return ($cols * $col-width) + (($cols - 1) * $gutter);\n}\n\n\n\n///* \n// * Span XL\n// * \n// * This function generates a width value based on the parameter given, using \n// * details from the $xl-gutter and $xl-col global variables.\n// *\n// * @param $cols ($cols);\n// *\n// * span-xl(8);\n// */\n@function span-xl($cols: 12) {\n    @return ($cols * $xl-col-width) + (($cols - 1) * $xl-gutter);\n}\n","// Component name\nbody {\n    color: #666;\n    margin: 0;\n    padding: 50px 0;\n    font-family: \"Roboto Condensed\", sans-serif;\n    font-size: 18px;\n    font-weight: 300;\n    background: white;\n}\nh2 {\n    color: #d8531e;\n    font-weight: 300;\n    margin: 0;\n    font-size: 48px;\n    font-size: 48px;\n}\nh3 {\n    color: #333;\n    font-weight: 300;\n    margin: 0;\n    font-size: 36px;\n    line-height: 36px;\n    padding: 12px 0; \n}\np {\n    margin: 0 0 21px 0;\n}\na {\n    color: #d8531e;\n}\nsection {\n    margin-bottom: 50px;\n}\n.box {\n    margin: 0 0 ($gutter / 2) 0;\n    padding: ($gutter / 2);\n    background: #F5F5F5;\n\n    @include respond-to(l) {\n        margin-bottom: $gutter;\n        padding: $gutter;\n    }\n    @include respond-to(xl) {\n        margin-bottom: $xl-gutter;\n        padding: $xl-gutter;\n    }\n\n    p {\n        margin: 0;\n    }\n}\n\n.code {\n    font-family: \"Courier New\", serif;\n    font-size: 14px;\n}\n.nesting {\n    background-color: #FFFFDF;\n    margin-bottom: 20px;\n    .nesting {\n        background-color: #FFE7DF;\n    }\n}\n\npre {\n    border: 1px solid #CCC;\n    background-color: #F9F9F9;\n    padding: 10px;\n    margin: 0;\n    overflow: auto;\n}\n\n.content {\n    @include respond-to(l) {\n        float: left;\n        margin: 0 ($gutter / 2);\n        width: span(8);\n    }\n    @include respond-to(xl) {       \n        margin: 0 ($xl-gutter / 2);\n        width: span-xl(8);\n    }\n    @include respond-to(m) {\n        float: left;\n        padding: 0 ($gutter / 4);\n        width: span-fw(m-2_3);\n        box-sizing: border-box;\n    }\n    @include respond-to(m) {\n        float: left;\n        padding: 0 ($gutter / 4);\n        width: span-fw(m-2_3);\n        box-sizing: border-box;\n    }\n}\n\n.sidebar {\n    @include respond-to(l) {\n        float: right;\n        margin: 0 ($gutter / 2);\n        width: span(4);\n    }\n    @include respond-to(xl) {\n        margin: 0 ($xl-gutter / 2);\n        width: span-xl(4);\n    }\n    @include respond-to(m) {\n        float: right;\n        padding: 0 ($gutter / 4);\n        width: span-fw(m-1_3);\n        box-sizing: border-box;\n    }\n    @include respond-to(s) {\n        padding: 0 ($gutter / 4);\n        box-sizing: border-box;\n    }\n}\n\n@include respond-to(s) {\n    .test {\n        padding: 0 ($gutter / 4);\n        box-sizing: border-box;\n    }\n}\n","///*\n// * Hoisin.scss\n// * Mixins library\n// *\n// * Vendor prefixes are handled by gulp-autoprefixer.\n// * All prefixer mixins will be removed in future versions\n// */\n\n\n\n///* \n// * Respond to\n// * @param $breakpoint (s | m | m-up | m-down | l | xl);\n// *\n// * @include respond-to(m) {\n// *      property: value;\n// * }\n// */\n@mixin respond-to($bp) {\n    @if $bp == \"s\" {\n        @media (max-width: $bp-m) {\n            @content;\n        }\n    }\n    @else if $bp == \"m\" {\n        @media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {\n            @content;\n        }\n    }\n    @else if $bp == \"m-up\" {\n        @media (min-width: $bp-m) {\n            @content;\n        }\n    }\n    @else if $bp == \"m-down\" {\n        @media (max-width: ($bp-l - 1)) {\n            @content;\n        }\n    }\n    @else if $bp == \"l\" {\n        @media (min-width: $bp-l) {\n            @content;\n        }\n    }\n    @else if $bp == \"xl\" {\n        @media (min-width: $bp-xl) {\n            @content;\n        }\n    }\n}\n\n\n\n///* \n// * Box shadow\n// * @param $value ($h-offset $v-offset $blur $spread $color | inset | initial | inherit);\n// *\n// * @include box-shadow(2px 2px 2px 2px rgba(0,0,0,0.2));\n// */\n@mixin box-shadow($value: 0 0 4px 0 rgba(0, 0, 0, .5)) {\n    @include prefixer(box-shadow, $value, webkit);\n}\n\n\n\n///* \n// * Two colors vertical linear gradient\n// * @param $value ($initial-color);\n// * @param $value ($final-color);\n// *\n// * @include gradients(#FF0, #F00);\n// */\n@mixin gradients($first, $second) {\n    background-color: $first;\n    background-image: -o-linear-gradient(top, $first 0%, $second 100%);\n    background-image: -ms-linear-gradient(top, $first 0%, $second 100%);\n    background-image: -moz-linear-gradient(top, $first, $second);\n    background-image: -webkit-gradient(linear, left top, left bottom, from($first), to($second));\n    background-image: linear-gradient(top, $first 0%, $second 100%);\n}\n\n\n\n///* \n// * Box model (defaults to border-box)\n// * @param $type ($box-model);\n// *\n// * @include box-sizing;\n// */\n@mixin box-sizing($type: border-box) {\n    @include prefixer(box-sizing, $type, moz webkit);\n}\n\n\n\n// *\n// * Opacity (Old IE disabled by default)\n// * @param $opac ($opacity);\n// * @param $ie (true);\n// *\n// * @include opacity(0.7, true);\n// */\n@mixin opacity($opac, $ie: false) {\n    @if $ie {\n        -ms-filter: alpha(opacity=$opac * 100);\n        filter: alpha(opacity=$opac * 100);\n    }\n    opacity: $opac;\n}\n\n\n\n///*\n// * Transition (defaults to .15 sec)\n// * @param $value ($speed | $property | $easing);\n// *\n// * @include transition(height 200ms ease-out);\n// */\n@mixin transition($value: .15s) {\n    @include prefixer(transition, $value, webkit);\n}\n\n\n\n///* \n// * Rotate (Origin defaults to center of element)\n// * @param $deg ($degrees);\n// * @param $orig ($h-origin $v-origin);\n// *\n// * @include rotate(45deg);\n// */\n@mixin rotate($deg, $orig: 50% 50%) {\n    @include prefixer(transform, rotate(#{$deg}), webkit ms);\n    @if $orig != 50% and $orig != (50% 50%) \n    and $orig != center and $orig != (center center) {\n        @include prefixer(transform-origin, $orig, webkit ms);\n    }\n}\n\n\n\n///*\n// * Translate \n// * @param $hdist ($distance);\n// * @param $vdist ($distance);\n// *\n// * @include translate(20px, 20px);\n// */\n@mixin translate($hdist: 0, $vdist: 0) {\n    @include prefixer(transform, translate(#{$hdist}, #{$vdist}), webkit ms);\n}\n\n\n\n///* \n// * Animation (defaults to .15 sec)\n// * @param $options ($animation-name $duration | $iteration);\n// *\n// * @include animation(myanimation 2s 3);\n// */\n@mixin animation($options) {\n    @include prefixer(animation, $options);\n}\n\n\n\n///*\n// * Placeholder text color\n// * @param $color ($color);\n// *\n// * @include placeholder(#999);\n// */\n@mixin placeholder($color) {\n    &::-webkit-input-placeholder {\n        color: $color;\n    }\n\n    &::-moz-placeholder {\n        color: $color; \n    }\n\n    &::-ms-input-placeholder {\n        color: $color;\n    }\n}\n\n\n///*\n// * Disallow user selection\n// *\n// * @include noselect;\n// */\n@mixin noselect {\n    -webkit-touch-callout: none;\n    @include prefixer(user-select, none, webkit ms);\n}\n\n\n\n///*\n// * Prefixer\n// * @param $property ($name);\n// * @param $value ($value);\n// * @param $prefixes (webkit | moz | ms | o);\n// *\n// * @include prefixer(animation, $options);\n// */\n@mixin prefixer($property, $value, $prefixes: webkit moz ms o) {\n    @each $prefix in $prefixes {\n        #{'-' + $prefix + '-' + $property}: #{$value};\n    }\n    #{$property}: #{$value};\n}\n"],"sourceRoot":"/source/"}
\ No newline at end of file
diff --git a/css/maps/style.css.map b/css/maps/style.css.map
index 8108d45..028eede 100644
--- a/css/maps/style.css.map
+++ b/css/maps/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["_version.scss","_grid.scss","l/_base.scss","style.css","l/_xl.scss","m/_base.scss","s/_base.scss","components/_body.scss","_vars.scss","_functions.scss","components/_sample.scss","_mixins.scss"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.13\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n ","@import 'vars';\n@import 'mixins';\n\n@media (min-width: $bp-l) {\n\n    @import 'l/base';\n\n}\n@media (min-width: $bp-xl) {\n\n    @import 'l/xl';\n\n}\n@media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {\n\n    @import 'm/base';\n\n}\n@media (min-width: $bp-s) and (max-width: ($bp-m - 1)) {\n\n    @import 's/base';\n\n}\n","// * Large screens grid system\n// *\n\n// * Define the size of the container using variables\n$wrap: ($col-width * $col-qty) + $gutter * ($col-qty - 1);\n\n.container {\n    margin: 0 auto;\n    width: $wrap + $gutter;\n\n    &:after {\n        clear: both;\n        content: '';\n        display: block;\n    }\n}\n\n// * Loop through the cols to generate size of nested containers\n@for $i from 2 through $col-qty {\n    .col#{$i} > .container {\n        margin: 0 0 0 0 -($gutter/2);\n        width: ($col-width * $i) + ($gutter * $i);\n    }\n}\n\n// * Empty declaration as a base for all spans common styles\n%base-col {\n    float: left;\n    margin: 0 $gutter/2;\n}\n\n// * Mixin to loop through spans using the empty declaration\n@mixin cols {\n    @for $i from 1 through $col-qty {\n        .col#{$i} { @extend %base-col; }\n    }\n}\n\n// * Output all the spans common styles\n@include cols;\n\n// * Loop to generate each span \n@for $i from 2 through $col-qty {\n    .col#{$i} {\n        width: ($col-width * $i) + ($gutter * $i) - $gutter;\n    }\n}\n\n@for $i from 1 through ($col-qty - 2) {\n    .pre#{$i} {\n        margin-left: ($col-width * $i) + ($gutter * $i) + ($gutter / 2);\n    }\n}\n\n@for $i from 1 through ($col-qty - 2) {\n    .suf#{$i} {\n        margin-right: ($col-width * $i) + ($gutter * $i);\n    }\n}\n\n// *\n// * Additional grid utilities\n// *\n\n// * Force float a span to the right\n.colr {\n    float: right;\n    margin: 0 $gutter/2;\n}\n\n// * Remove left margin from span\n.alpha {\n    margin-left: 0;\n}\n\n// * Remove right margin from span\n.omega {\n    margin-right: 0;\n}\n\n// * Clear helper\n.clear {\n    clear: both;\n}\n\n// * center span in container\n.center {\n    float: none;\n    margin: 0 auto;\n}","/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.13\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n@media (min-width: 1024px) {\n  .container {\n    margin: 0 auto;\n    width: 960px;\n  }\n  .container:after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .col2 > .container {\n    margin: 0 0 0 -10px;\n    width: 160px;\n  }\n  .col3 > .container {\n    margin: 0 0 0 -10px;\n    width: 240px;\n  }\n  .col4 > .container {\n    margin: 0 0 0 -10px;\n    width: 320px;\n  }\n  .col5 > .container {\n    margin: 0 0 0 -10px;\n    width: 400px;\n  }\n  .col6 > .container {\n    margin: 0 0 0 -10px;\n    width: 480px;\n  }\n  .col7 > .container {\n    margin: 0 0 0 -10px;\n    width: 560px;\n  }\n  .col8 > .container {\n    margin: 0 0 0 -10px;\n    width: 640px;\n  }\n  .col9 > .container {\n    margin: 0 0 0 -10px;\n    width: 720px;\n  }\n  .col10 > .container {\n    margin: 0 0 0 -10px;\n    width: 800px;\n  }\n  .col11 > .container {\n    margin: 0 0 0 -10px;\n    width: 880px;\n  }\n  .col12 > .container {\n    margin: 0 0 0 -10px;\n    width: 960px;\n  }\n  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {\n    float: left;\n    margin: 0 10px;\n  }\n  .col2 {\n    width: 140px;\n  }\n  .col3 {\n    width: 220px;\n  }\n  .col4 {\n    width: 300px;\n  }\n  .col5 {\n    width: 380px;\n  }\n  .col6 {\n    width: 460px;\n  }\n  .col7 {\n    width: 540px;\n  }\n  .col8 {\n    width: 620px;\n  }\n  .col9 {\n    width: 700px;\n  }\n  .col10 {\n    width: 780px;\n  }\n  .col11 {\n    width: 860px;\n  }\n  .col12 {\n    width: 940px;\n  }\n  .pre1 {\n    margin-left: 90px;\n  }\n  .pre2 {\n    margin-left: 170px;\n  }\n  .pre3 {\n    margin-left: 250px;\n  }\n  .pre4 {\n    margin-left: 330px;\n  }\n  .pre5 {\n    margin-left: 410px;\n  }\n  .pre6 {\n    margin-left: 490px;\n  }\n  .pre7 {\n    margin-left: 570px;\n  }\n  .pre8 {\n    margin-left: 650px;\n  }\n  .pre9 {\n    margin-left: 730px;\n  }\n  .pre10 {\n    margin-left: 810px;\n  }\n  .suf1 {\n    margin-right: 80px;\n  }\n  .suf2 {\n    margin-right: 160px;\n  }\n  .suf3 {\n    margin-right: 240px;\n  }\n  .suf4 {\n    margin-right: 320px;\n  }\n  .suf5 {\n    margin-right: 400px;\n  }\n  .suf6 {\n    margin-right: 480px;\n  }\n  .suf7 {\n    margin-right: 560px;\n  }\n  .suf8 {\n    margin-right: 640px;\n  }\n  .suf9 {\n    margin-right: 720px;\n  }\n  .suf10 {\n    margin-right: 800px;\n  }\n  .colr {\n    float: right;\n    margin: 0 10px;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 1360px) {\n  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10 {\n    float: left;\n    margin: 0 15px;\n  }\n  .col12 {\n    margin: 0 15px;\n    width: 1170px;\n  }\n  .col2 {\n    width: 170px;\n  }\n  .col3 {\n    width: 270px;\n  }\n  .col4 {\n    width: 370px;\n  }\n  .col5 {\n    width: 470px;\n  }\n  .col6 {\n    width: 570px;\n  }\n  .col7 {\n    width: 670px;\n  }\n  .col8 {\n    width: 770px;\n  }\n  .col9 {\n    width: 870px;\n  }\n  .col10 {\n    width: 970px;\n  }\n  .col11 {\n    width: 1070px;\n  }\n  .pre1 {\n    margin-left: 115px;\n  }\n  .pre2 {\n    margin-left: 215px;\n  }\n  .pre3 {\n    margin-left: 315px;\n  }\n  .pre4 {\n    margin-left: 415px;\n  }\n  .pre5 {\n    margin-left: 515px;\n  }\n  .pre6 {\n    margin-left: 615px;\n  }\n  .pre7 {\n    margin-left: 715px;\n  }\n  .pre8 {\n    margin-left: 815px;\n  }\n  .pre9 {\n    margin-left: 915px;\n  }\n  .pre10 {\n    margin-left: 1015px;\n  }\n  .suf1 {\n    margin-right: 115px;\n  }\n  .suf2 {\n    margin-right: 215px;\n  }\n  .suf3 {\n    margin-right: 315px;\n  }\n  .suf4 {\n    margin-right: 415px;\n  }\n  .suf5 {\n    margin-right: 515px;\n  }\n  .suf6 {\n    margin-right: 615px;\n  }\n  .suf7 {\n    margin-right: 715px;\n  }\n  .suf8 {\n    margin-right: 815px;\n  }\n  .suf9 {\n    margin-right: 915px;\n  }\n  .suf10 {\n    margin-right: 1015px;\n  }\n  .container {\n    width: 1200px;\n  }\n  .col2 > .container {\n    margin: 0 0 0 -15px;\n    width: 200px;\n  }\n  .col3 > .container {\n    margin: 0 0 0 -15px;\n    width: 300px;\n  }\n  .col4 > .container {\n    margin: 0 0 0 -15px;\n    width: 400px;\n  }\n  .col5 > .container {\n    margin: 0 0 0 -15px;\n    width: 500px;\n  }\n  .col6 > .container {\n    margin: 0 0 0 -15px;\n    width: 600px;\n  }\n  .col7 > .container {\n    margin: 0 0 0 -15px;\n    width: 700px;\n  }\n  .col8 > .container {\n    margin: 0 0 0 -15px;\n    width: 800px;\n  }\n  .col9 > .container {\n    margin: 0 0 0 -15px;\n    width: 900px;\n  }\n  .col10 > .container {\n    margin: 0 0 0 -15px;\n    width: 1000px;\n  }\n  .col11 > .container {\n    margin: 0 0 0 -15px;\n    width: 1100px;\n  }\n  .col12 > .container {\n    margin: 0 0 0 -15px;\n    width: 1200px;\n  }\n  .colr {\n    float: right;\n    margin: 0 15px;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .wrap {\n    overflow: hidden;\n    width: 100%;\n  }\n  .container {\n    width: 100%;\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n  .container::after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .container .container {\n    width: 102%;\n    width: calc(100% + 20px);\n    margin-left: -10px;\n  }\n  .col12,\n  .col11,\n  .col10,\n  .col9,\n  .col8,\n  .col7 {\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .col6,\n  .col5,\n  .col4,\n  .col3 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .col2 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 33.33%;\n    box-sizing: border-box;\n  }\n  .m-full {\n    width: 100%;\n  }\n  .m-full.colr {\n    float: none;\n  }\n  .m-half {\n    float: left;\n    width: 50%;\n  }\n  .m-1_3 {\n    float: left;\n    width: 33.33%;\n  }\n  .m-2_3 {\n    float: left;\n    width: 66.66%;\n  }\n  .colr {\n    float: right;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 120px) and (max-width: 679px) {\n  .wrap {\n    overflow: hidden;\n    width: 100%;\n  }\n  .container {\n    width: 100%;\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n  .container:after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .container .container {\n    width: 102%;\n    width: calc(100% + 20px);\n    margin-left: -10px;\n  }\n  .col12,\n  .col11,\n  .col10,\n  .col9,\n  .col8,\n  .col7,\n  .col6,\n  .col5,\n  .col4,\n  .col3 {\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .col2 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .s-full {\n    float: none;\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .s-half {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .clear {\n    clear: both;\n  }\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: sans-serif;\n}\n\n.red {\n  color: red;\n}\n\n.red-light {\n  color: #ffb3b3;\n}\n\n.red-dark {\n  color: maroon;\n}\n\n@media (min-width: 1024px) {\n  body {\n    font-size: 18px;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  body {\n    font-size: 16px;\n  }\n}\n\n@media (min-width: 120px) and (max-width: 679px) {\n  body {\n    font-size: 14px;\n  }\n}\n\nbody {\n  color: #666;\n  margin: 0;\n  padding: 50px 0;\n  font-family: \"Roboto Condensed\", sans-serif;\n  font-size: 18px;\n  font-weight: 300;\n  background: white;\n}\n\nh2 {\n  color: #d8531e;\n  font-weight: 300;\n  margin: 0;\n  font-size: 48px;\n  font-size: 48px;\n}\n\nh3 {\n  color: #333;\n  font-weight: 300;\n  margin: 0;\n  font-size: 36px;\n  line-height: 36px;\n  padding: 12px 0;\n}\n\np {\n  margin: 0 0 21px 0;\n}\n\na {\n  color: #d8531e;\n}\n\nsection {\n  margin-bottom: 50px;\n}\n\n.box {\n  margin: 0 0 10px 0;\n  padding: 10px;\n  background: #F5F5F5;\n}\n\n@media (min-width: 1024px) {\n  .box {\n    margin-bottom: 20px;\n    padding: 20px;\n  }\n}\n\n@media (min-width: 1360px) {\n  .box {\n    margin-bottom: 30px;\n    padding: 30px;\n  }\n}\n\n.box p {\n  margin: 0;\n}\n\n.code {\n  font-family: \"Courier New\", serif;\n  font-size: 14px;\n}\n\n.nesting {\n  background-color: #FFFFDF;\n  margin-bottom: 20px;\n}\n\n.nesting .nesting {\n  background-color: #FFE7DF;\n}\n\npre {\n  border: 1px solid #CCC;\n  background-color: #F9F9F9;\n  padding: 10px;\n  margin: 0;\n  overflow: auto;\n}\n\n@media (min-width: 1024px) {\n  .content {\n    float: left;\n    margin: 0 10px;\n    width: 620px;\n  }\n}\n\n@media (min-width: 1360px) {\n  .content {\n    margin: 0 15px;\n    width: 770px;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .content {\n    float: left;\n    padding: 0 5px;\n    width: 66.66%;\n    box-sizing: border-box;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .content {\n    float: left;\n    padding: 0 5px;\n    width: 66.66%;\n    box-sizing: border-box;\n  }\n}\n\n@media (min-width: 1024px) {\n  .sidebar {\n    float: right;\n    margin: 0 10px;\n    width: 300px;\n  }\n}\n\n@media (min-width: 1360px) {\n  .sidebar {\n    margin: 0 15px;\n    width: 370px;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .sidebar {\n    float: right;\n    padding: 0 5px;\n    width: 33.33%;\n    box-sizing: border-box;\n  }\n}\n\n@media (max-width: 680px) {\n  .sidebar {\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n}\n\n@media (max-width: 680px) {\n  .test {\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n}\n","// *\n// * Grid system\n// * Define the size of the container using extra large variables\n// *\n$wrap: $xl-col-width * 12 + $xl-gutter * 11;\n\n// * Generate a common style for all spans\n%base-xl-col {\n    float: left;\n    margin: 0 $xl-gutter/2;\n}\n\n@mixin cols {\n    @for $i from 1 to $col-qty - 1 {\n        .col#{$i} { @extend %base-xl-col; }\n    }\n}\n\n// * Output the common span styles\n@include cols;\n\n// Define widths for each span\n.col#{$col-qty} {\n    margin: 0 $xl-gutter/2; // Full width, doesn't need float\n    width: ($xl-col-width * $col-qty) + ($xl-gutter * $col-qty) - $xl-gutter;\n}\n\n@for $i from 2 to $col-qty {\n    .col#{$i} {\n        width: $xl-col-width * $i + $xl-gutter * $i - $xl-gutter;\n    }\n}\n\n@for $i from 1 through 10 {\n    .pre#{$i} {\n        margin-left: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);\n    }\n}\n\n@for $i from 1 through 10 {\n    .suf#{$i} {\n        margin-right: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);\n    }\n}\n\n.container {\n    width: $wrap + $xl-gutter;\n}\n\n@for $i from 2 through $col-qty {\n    .col#{$i} > .container {\n        margin: 0 0 0 0 -($xl-gutter/2);\n        width: ($xl-col-width * $i) + ($xl-gutter * $i);\n    }\n}\n\n// * Grid utilities\n.colr {\n    float: right;\n    margin: 0 $xl-gutter/2;\n}\n\n.alpha {\n    margin-left: 0;\n}\n\n.omega {\n    margin-right: 0;\n}\n\n.clear {\n    clear: both;\n}\n\n.center {\n    float: none;\n    margin: 0 auto;\n}\n","// * Grid system\n// * Define the properties of the flexible container\n// *\n\n.wrap {\n    overflow: hidden;\n    width: 100%;\n}\n\n.container {\n    width: 100%;\n    padding: 0 ($gutter/4);\n    box-sizing: border-box;\n    \n    &::after {\n        clear: both;\n        content: '';\n        display: block;\n    }\n\n    .container {\n        width: 102%;\n        width: calc(100% + #{$gutter});\n        margin-left: -($gutter/2);\n    }\n}\n\n.col12, \n.col11, \n.col10, \n.col9, \n.col8, \n.col7 {\n    margin: 0;\n    padding: 0 ($gutter/4);\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.col6, \n.col5, \n.col4, \n.col3 {\n    float: left;\n    margin: 0;\n    padding: 0 ($gutter/4);\n    width: 50%;\n    box-sizing: border-box;\n}\n\n.col2 {\n    float: left;\n    margin: 0;\n    padding: 0 ($gutter/4);\n    width: 33.33%;\n    box-sizing: border-box;\n}\n\n.m-full {\n    width: 100%;\n    &.colr {\n        float: none;\n    }\n}\n\n.m-half {\n    float: left;\n    width: 50%;\n}\n\n.m-1_3 {\n    float: left;\n    width: 33.33%;\n}\n\n.m-2_3 {\n    float: left;\n    width: 66.66%;\n}\n\n// * Additional grid utilities\n.colr {\n    float: right;\n}\n\n.alpha {\n    margin-left: 0;\n}\n\n.omega {\n    margin-right: 0;\n}\n\n.clear {\n    clear: both;\n}\n\n.center {\n    float: none;\n    margin: 0 auto;\n}\n","// * Grid system\n// * Define the properties of the flexible container\n// *\n\n.wrap {\n    overflow: hidden;\n    width: 100%;\n}\n\n.container {\n    width: 100%;\n    padding: 0 ($gutter/4);\n    box-sizing: border-box;\n    &:after {\n        clear: both;\n        content: '';\n        display: block;\n    }\n    \n    .container {\n        width: 102%;\n        width: calc(100% + #{$gutter});\n        margin-left: -($gutter/2);\n    }\n}\n\n.col12, \n.col11, \n.col10, \n.col9, \n.col8, \n.col7, \n.col6, \n.col5, \n.col4, \n.col3 {\n    margin: 0;\n    padding: 0 ($gutter/4);\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.col2 {\n    float: left;\n    margin: 0;\n    padding: 0 ($gutter/4);\n    width: 50%;\n    box-sizing: border-box;\n}\n\n.s-full {\n    float: none;\n    margin: 0;\n    padding: 0 ($gutter/4);\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.s-half {\n    float: left;\n    margin: 0;\n    padding: 0 ($gutter/4);\n    width: 50%;\n    box-sizing: border-box;\n}\n\n.clear {\n    clear: both;\n}\n","// Body\nbody {\n    margin: 0;\n    padding: 0;\n    font-family: $body-font;\n}\n$red: red;\n.red {\n    color: $red;\n}\n.red-light {\n    color: light($red, 70%);\n}\n.red-dark {\n    color: dark($red, 50%);\n}\n\n@media (min-width: $bp-l) {\n\n    body {\n        font-size: 18px;\n    }\n\n}\n@media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {\n\n    body {\n        font-size: 16px;\n    }\n\n}\n@media (min-width: $bp-s) and (max-width: ($bp-m - 1)) {\n\n    body {\n        font-size: 14px;\n    }\n\n}","// Colours\n$highlight:                     #fa9200;\n\n$error:                         #f00;\n$error-bg:                      #ffe5e5;\n\n$success:                       #390;\n$success-bg:                    #eaf5e5;\n\n$info:                          #39f;\n$info-bg:                       #eaf5ff;\n\n$warning:                       #ff0;\n$warning-bg:                    #ffffe5;\n\n$black:                         #000;\n$white:                         #fff;\n$text:                          #000;\n$title:                         #000;\n\n// Grid\n$col-qty:                       12;\n$col-width:                     60px;\n$gutter:                        20px;\n\n// Large desktop grid\n$xl-col-width:                  70px;\n$xl-gutter:                     30px;\n\n\n// Breakpoints\n$bp-xl:                 \t\t1360px;\n$bp-l:              \t\t\t1024px;\n$bp-m:             \t\t\t\t680px;\n$bp-s:              \t\t\t120px;\n\n\n// Paths\n$img:                           '../img/';\n$sprite:                        '../img/sprite.png';\n$fonts:                         '../fonts/';\n\n    \n// Typography\n$body-font:                     sans-serif;\n$title-font:                    serif;\n","///*\n// * Hoisin.scss\n// * Functions library\n// */\n\n\n\n///* \n// * Darken colors\n// * \n// * This function uses mix to have a more granular control of the darkening.\n// * @param $color ($variable | #HEX);\n// * @param $value (percentage);\n// *\n// * dark($blue, 20%);\n// */\n@function dark($color, $value: 10%) {\n    @return mix($black, $color, $value);\n}\n\n\n\n///* \n// * Lighten colors\n// * \n// * This function uses mix to have a more granular control of the darkening.\n// * @param $color ($variable | #HEX);\n// * @param $value (percentage);\n// *\n// * light($blue, 20%);\n// */\n@function light($color, $value: 10%) {\n    @return mix($white, $color, $value);\n}\n\n\n\n\n///* \n// * Flexible Span \n// * \n// * This function generates a width value based on the parameter given, using \n// * details from the medium size grid.\n// *\n// * @param $width ($width);\n// *\n// * span-fw('m-2_3');\n// */\n@function span-fw($width) {\n    @if $width == 'm-2_3' {\n        @return 66.66%;\n    } @else if $width == 'm-half' {\n        @return 50%;\n    } @else if $width == 'm-1_3' {\n        @return 33.33%;\n    } @else if $width == 'm-4_4' {\n        @return 25%;\n    } @else {\n        @return 100%;\n    }\n}\n\n\n\n\n///* \n// * Span\n// * \n// * This function generates a width value based on the parameter given, using \n// * details from the $gutter and $col global variables.\n// *\n// * @param $cols ($cols);\n// *\n// * span(8);\n// */\n@function span($cols: 12) {\n    @return ($cols * $col-width) + (($cols - 1) * $gutter);\n}\n\n\n\n///* \n// * Span XL\n// * \n// * This function generates a width value based on the parameter given, using \n// * details from the $xl-gutter and $xl-col global variables.\n// *\n// * @param $cols ($cols);\n// *\n// * span-xl(8);\n// */\n@function span-xl($cols: 12) {\n    @return ($cols * $xl-col-width) + (($cols - 1) * $xl-gutter);\n}\n","// Component name\nbody {\n    color: #666;\n    margin: 0;\n    padding: 50px 0;\n    font-family: \"Roboto Condensed\", sans-serif;\n    font-size: 18px;\n    font-weight: 300;\n    background: white;\n}\nh2 {\n    color: #d8531e;\n    font-weight: 300;\n    margin: 0;\n    font-size: 48px;\n    font-size: 48px;\n}\nh3 {\n    color: #333;\n    font-weight: 300;\n    margin: 0;\n    font-size: 36px;\n    line-height: 36px;\n    padding: 12px 0; \n}\np {\n    margin: 0 0 21px 0;\n}\na {\n    color: #d8531e;\n}\nsection {\n    margin-bottom: 50px;\n}\n.box {\n    margin: 0 0 ($gutter / 2) 0;\n    padding: ($gutter / 2);\n    background: #F5F5F5;\n\n    @include respond-to(l) {\n        margin-bottom: $gutter;\n        padding: $gutter;\n    }\n    @include respond-to(xl) {\n        margin-bottom: $xl-gutter;\n        padding: $xl-gutter;\n    }\n\n    p {\n        margin: 0;\n    }\n}\n\n.code {\n    font-family: \"Courier New\", serif;\n    font-size: 14px;\n}\n.nesting {\n    background-color: #FFFFDF;\n    margin-bottom: 20px;\n    .nesting {\n        background-color: #FFE7DF;\n    }\n}\n\npre {\n    border: 1px solid #CCC;\n    background-color: #F9F9F9;\n    padding: 10px;\n    margin: 0;\n    overflow: auto;\n}\n\n.content {\n    @include respond-to(l) {\n        float: left;\n        margin: 0 ($gutter / 2);\n        width: span(8);\n    }\n    @include respond-to(xl) {       \n        margin: 0 ($xl-gutter / 2);\n        width: span-xl(8);\n    }\n    @include respond-to(m) {\n        float: left;\n        padding: 0 ($gutter / 4);\n        width: span-fw(m-2_3);\n        box-sizing: border-box;\n    }\n    @include respond-to(m) {\n        float: left;\n        padding: 0 ($gutter / 4);\n        width: span-fw(m-2_3);\n        box-sizing: border-box;\n    }\n}\n\n.sidebar {\n    @include respond-to(l) {\n        float: right;\n        margin: 0 ($gutter / 2);\n        width: span(4);\n    }\n    @include respond-to(xl) {\n        margin: 0 ($xl-gutter / 2);\n        width: span-xl(4);\n    }\n    @include respond-to(m) {\n        float: right;\n        padding: 0 ($gutter / 4);\n        width: span-fw(m-1_3);\n        box-sizing: border-box;\n    }\n    @include respond-to(s) {\n        padding: 0 ($gutter / 4);\n        box-sizing: border-box;\n    }\n}\n\n@include respond-to(s) {\n    .test {\n        padding: 0 ($gutter / 4);\n        box-sizing: border-box;\n    }\n}\n","///*\n// * Hoisin.scss\n// * Mixins library\n// *\n// * Vendor prefixes are handled by gulp-autoprefixer.\n// * All prefixer mixins will be removed in future versions\n// */\n\n\n\n///* \n// * Respond to\n// * @param $breakpoint (s | m | m-up | m-down | l | xl);\n// *\n// * @include respond-to(m) {\n// *      property: value;\n// * }\n// */\n@mixin respond-to($bp) {\n    @if $bp == \"s\" {\n        @media (max-width: $bp-m) {\n            @content;\n        }\n    }\n    @else if $bp == \"m\" {\n        @media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {\n            @content;\n        }\n    }\n    @else if $bp == \"m-up\" {\n        @media (min-width: $bp-m) {\n            @content;\n        }\n    }\n    @else if $bp == \"m-down\" {\n        @media (max-width: ($bp-l - 1)) {\n            @content;\n        }\n    }\n    @else if $bp == \"l\" {\n        @media (min-width: $bp-l) {\n            @content;\n        }\n    }\n    @else if $bp == \"xl\" {\n        @media (min-width: $bp-xl) {\n            @content;\n        }\n    }\n}\n\n\n///* \n// * Box shadow\n// * @param $value ($h-offset $v-offset $blur $spread $color | inset | initial | inherit);\n// *\n// * @include box-shadow(2px 2px 2px 2px rgba(0,0,0,0.2));\n// */\n@mixin box-shadow($value: 0 0 4px 0 rgba(0, 0, 0, .5)) {\n    @include prefixer(box-shadow, $value, webkit);\n}\n\n\n\n///* \n// * Two colors vertical linear gradient\n// * @param $value ($initial-color);\n// * @param $value ($final-color);\n// *\n// * @include gradients(#FF0, #F00);\n// */\n@mixin gradients($first, $second) {\n    background-color: $first;\n    background-image: -o-linear-gradient(top, $first 0%, $second 100%);\n    background-image: -ms-linear-gradient(top, $first 0%, $second 100%);\n    background-image: -moz-linear-gradient(top, $first, $second);\n    background-image: -webkit-gradient(linear, left top, left bottom, from($first), to($second));\n    background-image: linear-gradient(top, $first 0%, $second 100%);\n}\n\n\n\n///* \n// * Box model (defaults to border-box)\n// * @param $type ($box-model);\n// *\n// * @include box-sizing;\n// */\n@mixin box-sizing($type: border-box) {\n    @include prefixer(box-sizing, $type, moz webkit);\n}\n\n\n\n// *\n// * Opacity (Old IE disabled by default)\n// * @param $opac ($opacity);\n// * @param $ie (true);\n// *\n// * @include opacity(0.7, true);\n// */\n@mixin opacity($opac, $ie: false) {\n    @if $ie {\n        -ms-filter: alpha(opacity=$opac * 100);\n        filter: alpha(opacity=$opac * 100);\n    }\n    opacity: $opac;\n}\n\n\n\n///*\n// * Transition (defaults to .15 sec)\n// * @param $value ($speed | $property | $easing);\n// *\n// * @include transition(height 200ms ease-out);\n// */\n@mixin transition($value: .15s) {\n    @include prefixer(transition, $value, webkit);\n}\n\n\n\n///* \n// * Rotate (Origin defaults to center of element)\n// * @param $deg ($degrees);\n// * @param $orig ($h-origin $v-origin);\n// *\n// * @include rotate(45deg);\n// */\n@mixin rotate($deg, $orig: 50% 50%) {\n    @include prefixer(transform, rotate(#{$deg}), webkit ms);\n    @if $orig != 50% and $orig != (50% 50%) \n    and $orig != center and $orig != (center center) {\n        @include prefixer(transform-origin, $orig, webkit ms);\n    }\n}\n\n\n\n///*\n// * Translate \n// * @param $hdist ($distance);\n// * @param $vdist ($distance);\n// *\n// * @include translate(20px, 20px);\n// */\n@mixin translate($hdist: 0, $vdist: 0) {\n    @include prefixer(transform, translate(#{$hdist}, #{$vdist}), webkit ms);\n}\n\n\n\n///* \n// * Animation (defaults to .15 sec)\n// * @param $options ($animation-name $duration | $iteration);\n// *\n// * @include animation(myanimation 2s 3);\n// */\n@mixin animation($options) {\n    @include prefixer(animation, $options);\n}\n\n\n\n///*\n// * Placeholder text color\n// * @param $color ($color);\n// *\n// * @include placeholder(#999);\n// */\n@mixin placeholder($color) {\n    &::-webkit-input-placeholder {\n        color: $color;\n    }\n\n    &::-moz-placeholder {\n        color: $color; \n    }\n\n    &::-ms-input-placeholder {\n        color: $color;\n    }\n}\n\n\n///*\n// * Disallow user selection\n// *\n// * @include noselect;\n// */\n@mixin noselect {\n    -webkit-touch-callout: none;\n    @include prefixer(user-select, none, webkit ms);\n}\n\n\n\n///*\n// * Prefixer\n// * @param $property ($name);\n// * @param $value ($value);\n// * @param $prefixes (webkit | moz | ms | o);\n// *\n// * @include prefixer(animation, $options);\n// */\n@mixin prefixer($property, $value, $prefixes: webkit moz ms o) {\n    @each $prefix in $prefixes {\n        #{'-' + $prefix + '-' + $property}: #{$value};\n    }\n    #{$property}: #{$value};\n}\n"],"sourceRoot":"/source/"}
\ No newline at end of file
+{"version":3,"sources":["_version.scss","_grid.scss","l/_base.scss","style.css","l/_xl.scss","m/_base.scss","s/_base.scss"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.14\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n ","@import 'vars';\n@import 'mixins';\n\n@media (min-width: $bp-l) {\n\n    @import 'l/base';\n\n}\n@media (min-width: $bp-xl) {\n\n    @import 'l/xl';\n\n}\n@media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {\n\n    @import 'm/base';\n\n}\n@media (min-width: $bp-s) and (max-width: ($bp-m - 1)) {\n\n    @import 's/base';\n\n}\n","// * Large screens grid system\n// *\n\n// * Empty declaration as a base for all spans common styles\n%base-col {\n    float: left;\n    margin: 0 $gutter/2;\n}\n\n///* \n// * Cols\n// * Mixin to create the col spans using the previous empty % declaration\n// *\n// * @include cols;\n// */\n@mixin cols {\n    @for $i from 1 through $col-qty {\n        .col#{$i} { @extend %base-col; }\n    }\n}\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n\n    // * Define the size of the container using variables\n    $wrap: ($col-width * $col-qty) + $gutter * ($col-qty - 1);\n\n    .container {\n        margin: 0 auto;\n        width: $wrap + $gutter;\n\n        &:after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n    }\n\n    // * Loop through the cols to generate size of nested containers\n    @for $i from 2 through $col-qty {\n        .col#{$i} > .container {\n            margin: 0 0 0 0 -($gutter/2);\n            width: ($col-width * $i) + ($gutter * $i);\n        }\n    }\n\n    // * Output all the spans common styles\n    @include cols;\n\n    // * Loop to generate each span \n    @for $i from 2 through $col-qty {\n        .col#{$i} {\n            width: ($col-width * $i) + ($gutter * $i) - $gutter;\n        }\n    }\n\n    @for $i from 1 through ($col-qty - 2) {\n        .pre#{$i} {\n            margin-left: ($col-width * $i) + ($gutter * $i) + ($gutter / 2);\n        }\n    }\n\n    @for $i from 1 through ($col-qty - 2) {\n        .suf#{$i} {\n            margin-right: ($col-width * $i) + ($gutter * $i);\n        }\n    }\n\n    // *\n    // * Additional grid utilities\n    // *\n\n    // * Force float a span to the right\n    .colr {\n        float: right;\n        margin: 0 $gutter/2;\n    }\n\n    // * Remove left margin from span\n    .alpha {\n        margin-left: 0;\n    }\n\n    // * Remove right margin from span\n    .omega {\n        margin-right: 0;\n    }\n\n    // * Clear helper\n    .clear {\n        clear: both;\n    }\n\n    // * center span in container\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}\n","/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.14\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n@media (min-width: 1024px) {\n  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {\n    float: left;\n    margin: 0 10px;\n  }\n  .container {\n    margin: 0 auto;\n    width: 960px;\n  }\n  .container:after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .col2 > .container {\n    margin: 0 0 0 -10px;\n    width: 160px;\n  }\n  .col3 > .container {\n    margin: 0 0 0 -10px;\n    width: 240px;\n  }\n  .col4 > .container {\n    margin: 0 0 0 -10px;\n    width: 320px;\n  }\n  .col5 > .container {\n    margin: 0 0 0 -10px;\n    width: 400px;\n  }\n  .col6 > .container {\n    margin: 0 0 0 -10px;\n    width: 480px;\n  }\n  .col7 > .container {\n    margin: 0 0 0 -10px;\n    width: 560px;\n  }\n  .col8 > .container {\n    margin: 0 0 0 -10px;\n    width: 640px;\n  }\n  .col9 > .container {\n    margin: 0 0 0 -10px;\n    width: 720px;\n  }\n  .col10 > .container {\n    margin: 0 0 0 -10px;\n    width: 800px;\n  }\n  .col11 > .container {\n    margin: 0 0 0 -10px;\n    width: 880px;\n  }\n  .col12 > .container {\n    margin: 0 0 0 -10px;\n    width: 960px;\n  }\n  .col2 {\n    width: 140px;\n  }\n  .col3 {\n    width: 220px;\n  }\n  .col4 {\n    width: 300px;\n  }\n  .col5 {\n    width: 380px;\n  }\n  .col6 {\n    width: 460px;\n  }\n  .col7 {\n    width: 540px;\n  }\n  .col8 {\n    width: 620px;\n  }\n  .col9 {\n    width: 700px;\n  }\n  .col10 {\n    width: 780px;\n  }\n  .col11 {\n    width: 860px;\n  }\n  .col12 {\n    width: 940px;\n  }\n  .pre1 {\n    margin-left: 90px;\n  }\n  .pre2 {\n    margin-left: 170px;\n  }\n  .pre3 {\n    margin-left: 250px;\n  }\n  .pre4 {\n    margin-left: 330px;\n  }\n  .pre5 {\n    margin-left: 410px;\n  }\n  .pre6 {\n    margin-left: 490px;\n  }\n  .pre7 {\n    margin-left: 570px;\n  }\n  .pre8 {\n    margin-left: 650px;\n  }\n  .pre9 {\n    margin-left: 730px;\n  }\n  .pre10 {\n    margin-left: 810px;\n  }\n  .suf1 {\n    margin-right: 80px;\n  }\n  .suf2 {\n    margin-right: 160px;\n  }\n  .suf3 {\n    margin-right: 240px;\n  }\n  .suf4 {\n    margin-right: 320px;\n  }\n  .suf5 {\n    margin-right: 400px;\n  }\n  .suf6 {\n    margin-right: 480px;\n  }\n  .suf7 {\n    margin-right: 560px;\n  }\n  .suf8 {\n    margin-right: 640px;\n  }\n  .suf9 {\n    margin-right: 720px;\n  }\n  .suf10 {\n    margin-right: 800px;\n  }\n  .colr {\n    float: right;\n    margin: 0 10px;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 1360px) {\n  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10 {\n    float: left;\n    margin: 0 15px;\n  }\n  .col12 {\n    margin: 0 15px;\n    width: 1170px;\n  }\n  .col2 {\n    width: 170px;\n  }\n  .col3 {\n    width: 270px;\n  }\n  .col4 {\n    width: 370px;\n  }\n  .col5 {\n    width: 470px;\n  }\n  .col6 {\n    width: 570px;\n  }\n  .col7 {\n    width: 670px;\n  }\n  .col8 {\n    width: 770px;\n  }\n  .col9 {\n    width: 870px;\n  }\n  .col10 {\n    width: 970px;\n  }\n  .col11 {\n    width: 1070px;\n  }\n  .pre1 {\n    margin-left: 115px;\n  }\n  .pre2 {\n    margin-left: 215px;\n  }\n  .pre3 {\n    margin-left: 315px;\n  }\n  .pre4 {\n    margin-left: 415px;\n  }\n  .pre5 {\n    margin-left: 515px;\n  }\n  .pre6 {\n    margin-left: 615px;\n  }\n  .pre7 {\n    margin-left: 715px;\n  }\n  .pre8 {\n    margin-left: 815px;\n  }\n  .pre9 {\n    margin-left: 915px;\n  }\n  .pre10 {\n    margin-left: 1015px;\n  }\n  .suf1 {\n    margin-right: 115px;\n  }\n  .suf2 {\n    margin-right: 215px;\n  }\n  .suf3 {\n    margin-right: 315px;\n  }\n  .suf4 {\n    margin-right: 415px;\n  }\n  .suf5 {\n    margin-right: 515px;\n  }\n  .suf6 {\n    margin-right: 615px;\n  }\n  .suf7 {\n    margin-right: 715px;\n  }\n  .suf8 {\n    margin-right: 815px;\n  }\n  .suf9 {\n    margin-right: 915px;\n  }\n  .suf10 {\n    margin-right: 1015px;\n  }\n  .container {\n    width: 1200px;\n  }\n  .col2 > .container {\n    margin: 0 0 0 -15px;\n    width: 200px;\n  }\n  .col3 > .container {\n    margin: 0 0 0 -15px;\n    width: 300px;\n  }\n  .col4 > .container {\n    margin: 0 0 0 -15px;\n    width: 400px;\n  }\n  .col5 > .container {\n    margin: 0 0 0 -15px;\n    width: 500px;\n  }\n  .col6 > .container {\n    margin: 0 0 0 -15px;\n    width: 600px;\n  }\n  .col7 > .container {\n    margin: 0 0 0 -15px;\n    width: 700px;\n  }\n  .col8 > .container {\n    margin: 0 0 0 -15px;\n    width: 800px;\n  }\n  .col9 > .container {\n    margin: 0 0 0 -15px;\n    width: 900px;\n  }\n  .col10 > .container {\n    margin: 0 0 0 -15px;\n    width: 1000px;\n  }\n  .col11 > .container {\n    margin: 0 0 0 -15px;\n    width: 1100px;\n  }\n  .col12 > .container {\n    margin: 0 0 0 -15px;\n    width: 1200px;\n  }\n  .colr {\n    float: right;\n    margin: 0 15px;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .wrap {\n    overflow: hidden;\n    width: 100%;\n  }\n  .container {\n    width: 100%;\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n  .container::after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .container .container {\n    width: 102%;\n    width: calc(100% + 20px);\n    margin-left: -10px;\n  }\n  .col12,\n  .col11,\n  .col10,\n  .col9,\n  .col8,\n  .col7 {\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .col6,\n  .col5,\n  .col4,\n  .col3 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .col2 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 33.33%;\n    box-sizing: border-box;\n  }\n  .m-full {\n    width: 100%;\n  }\n  .m-full.colr {\n    float: none;\n  }\n  .m-half {\n    float: left;\n    width: 50%;\n  }\n  .m-1_3 {\n    float: left;\n    width: 33.33%;\n  }\n  .m-2_3 {\n    float: left;\n    width: 66.66%;\n  }\n  .colr {\n    float: right;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 120px) and (max-width: 679px) {\n  .wrap {\n    overflow: hidden;\n    width: 100%;\n  }\n  .container {\n    width: 100%;\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n  .container:after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .container .container {\n    width: 102%;\n    width: calc(100% + 20px);\n    margin-left: -10px;\n  }\n  .col12,\n  .col11,\n  .col10,\n  .col9,\n  .col8,\n  .col7,\n  .col6,\n  .col5,\n  .col4,\n  .col3 {\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .col2 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .s-full {\n    float: none;\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .s-half {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .clear {\n    clear: both;\n  }\n}\n","// *\n// * Grid system\n// * Define the size of the container using extra large variables\n// *\n\n// * Generate a common style for all spans\n%base-xl-col {\n    float: left;\n    margin: 0 $xl-gutter/2;\n}\n\n///* \n// * Cols\n// * Mixin to create the col spans using the previous empty % declaration\n// *\n// * @include cols;\n// */\n@mixin cols {\n    @for $i from 1 to $col-qty - 1 {\n        .col#{$i} { @extend %base-xl-col; }\n    }\n}\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    $wrap: $xl-col-width * 12 + $xl-gutter * 11;\n\n    // * Output the common span styles\n    @include cols;\n\n    // Define widths for each span\n    .col#{$col-qty} {\n        margin: 0 $xl-gutter/2; // Full width, doesn't need float\n        width: ($xl-col-width * $col-qty) + ($xl-gutter * $col-qty) - $xl-gutter;\n    }\n\n    @for $i from 2 to $col-qty {\n        .col#{$i} {\n            width: $xl-col-width * $i + $xl-gutter * $i - $xl-gutter;\n        }\n    }\n\n    @for $i from 1 through 10 {\n        .pre#{$i} {\n            margin-left: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);\n        }\n    }\n\n    @for $i from 1 through 10 {\n        .suf#{$i} {\n            margin-right: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);\n        }\n    }\n\n    .container {\n        width: $wrap + $xl-gutter;\n    }\n\n    @for $i from 2 through $col-qty {\n        .col#{$i} > .container {\n            margin: 0 0 0 0 -($xl-gutter/2);\n            width: ($xl-col-width * $i) + ($xl-gutter * $i);\n        }\n    }\n\n    // * Grid utilities\n    .colr {\n        float: right;\n        margin: 0 $xl-gutter/2;\n    }\n\n    .alpha {\n        margin-left: 0;\n    }\n\n    .omega {\n        margin-right: 0;\n    }\n\n    .clear {\n        clear: both;\n    }\n\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}\n","// * Grid system\n// * Define the properties of the flexible container\n// *\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    .wrap {\n        overflow: hidden;\n        width: 100%;\n    }\n\n    .container {\n        width: 100%;\n        padding: 0 ($gutter/4);\n        box-sizing: border-box;\n        \n        &::after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n\n        .container {\n            width: 102%;\n            width: calc(100% + #{$gutter});\n            margin-left: -($gutter/2);\n        }\n    }\n\n    .col12, \n    .col11, \n    .col10, \n    .col9, \n    .col8, \n    .col7 {\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .col6, \n    .col5, \n    .col4, \n    .col3 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .col2 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 33.33%;\n        box-sizing: border-box;\n    }\n\n    .m-full {\n        width: 100%;\n        &.colr {\n            float: none;\n        }\n    }\n\n    .m-half {\n        float: left;\n        width: 50%;\n    }\n\n    .m-1_3 {\n        float: left;\n        width: 33.33%;\n    }\n\n    .m-2_3 {\n        float: left;\n        width: 66.66%;\n    }\n\n    // * Additional grid utilities\n    .colr {\n        float: right;\n    }\n\n    .alpha {\n        margin-left: 0;\n    }\n\n    .omega {\n        margin-right: 0;\n    }\n\n    .clear {\n        clear: both;\n    }\n\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}","// * Grid system\n// * Define the properties of the flexible container\n// *\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    .wrap {\n        overflow: hidden;\n        width: 100%;\n    }\n\n    .container {\n        width: 100%;\n        padding: 0 ($gutter/4);\n        box-sizing: border-box;\n\n        &:after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n        \n        .container {\n            width: 102%;\n            width: calc(100% + #{$gutter});\n            margin-left: -($gutter/2);\n        }\n    }\n\n    .col12, \n    .col11, \n    .col10, \n    .col9, \n    .col8, \n    .col7, \n    .col6, \n    .col5, \n    .col4, \n    .col3 {\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .col2 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .s-full {\n        float: none;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .s-half {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .clear {\n        clear: both;\n    }\n}\n"],"sourceRoot":"/source/"}
\ No newline at end of file
diff --git a/css/sample.css b/css/sample.css
new file mode 100644
index 0000000..4bf94b5
--- /dev/null
+++ b/css/sample.css
@@ -0,0 +1,682 @@
+/*
+ * Hoisin.scss
+ * CSS responsive framework boilerplate
+ * Create your own grids, plugin anything
+ * Version: 0.9.14
+ * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,
+ *             Ramon Lapenta <me@ramonlapenta.com>
+ *
+ */
+@media (min-width: 1024px) {
+  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
+    float: left;
+    margin: 0 10px;
+  }
+  .container {
+    margin: 0 auto;
+    width: 960px;
+  }
+  .container:after {
+    clear: both;
+    content: '';
+    display: block;
+  }
+  .col2 > .container {
+    margin: 0 0 0 -10px;
+    width: 160px;
+  }
+  .col3 > .container {
+    margin: 0 0 0 -10px;
+    width: 240px;
+  }
+  .col4 > .container {
+    margin: 0 0 0 -10px;
+    width: 320px;
+  }
+  .col5 > .container {
+    margin: 0 0 0 -10px;
+    width: 400px;
+  }
+  .col6 > .container {
+    margin: 0 0 0 -10px;
+    width: 480px;
+  }
+  .col7 > .container {
+    margin: 0 0 0 -10px;
+    width: 560px;
+  }
+  .col8 > .container {
+    margin: 0 0 0 -10px;
+    width: 640px;
+  }
+  .col9 > .container {
+    margin: 0 0 0 -10px;
+    width: 720px;
+  }
+  .col10 > .container {
+    margin: 0 0 0 -10px;
+    width: 800px;
+  }
+  .col11 > .container {
+    margin: 0 0 0 -10px;
+    width: 880px;
+  }
+  .col12 > .container {
+    margin: 0 0 0 -10px;
+    width: 960px;
+  }
+  .col2 {
+    width: 140px;
+  }
+  .col3 {
+    width: 220px;
+  }
+  .col4 {
+    width: 300px;
+  }
+  .col5 {
+    width: 380px;
+  }
+  .col6 {
+    width: 460px;
+  }
+  .col7 {
+    width: 540px;
+  }
+  .col8 {
+    width: 620px;
+  }
+  .col9 {
+    width: 700px;
+  }
+  .col10 {
+    width: 780px;
+  }
+  .col11 {
+    width: 860px;
+  }
+  .col12 {
+    width: 940px;
+  }
+  .pre1 {
+    margin-left: 90px;
+  }
+  .pre2 {
+    margin-left: 170px;
+  }
+  .pre3 {
+    margin-left: 250px;
+  }
+  .pre4 {
+    margin-left: 330px;
+  }
+  .pre5 {
+    margin-left: 410px;
+  }
+  .pre6 {
+    margin-left: 490px;
+  }
+  .pre7 {
+    margin-left: 570px;
+  }
+  .pre8 {
+    margin-left: 650px;
+  }
+  .pre9 {
+    margin-left: 730px;
+  }
+  .pre10 {
+    margin-left: 810px;
+  }
+  .suf1 {
+    margin-right: 80px;
+  }
+  .suf2 {
+    margin-right: 160px;
+  }
+  .suf3 {
+    margin-right: 240px;
+  }
+  .suf4 {
+    margin-right: 320px;
+  }
+  .suf5 {
+    margin-right: 400px;
+  }
+  .suf6 {
+    margin-right: 480px;
+  }
+  .suf7 {
+    margin-right: 560px;
+  }
+  .suf8 {
+    margin-right: 640px;
+  }
+  .suf9 {
+    margin-right: 720px;
+  }
+  .suf10 {
+    margin-right: 800px;
+  }
+  .colr {
+    float: right;
+    margin: 0 10px;
+  }
+  .alpha {
+    margin-left: 0;
+  }
+  .omega {
+    margin-right: 0;
+  }
+  .clear {
+    clear: both;
+  }
+  .center {
+    float: none;
+    margin: 0 auto;
+  }
+}
+
+@media (min-width: 1360px) {
+  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10 {
+    float: left;
+    margin: 0 15px;
+  }
+  .col12 {
+    margin: 0 15px;
+    width: 1170px;
+  }
+  .col2 {
+    width: 170px;
+  }
+  .col3 {
+    width: 270px;
+  }
+  .col4 {
+    width: 370px;
+  }
+  .col5 {
+    width: 470px;
+  }
+  .col6 {
+    width: 570px;
+  }
+  .col7 {
+    width: 670px;
+  }
+  .col8 {
+    width: 770px;
+  }
+  .col9 {
+    width: 870px;
+  }
+  .col10 {
+    width: 970px;
+  }
+  .col11 {
+    width: 1070px;
+  }
+  .pre1 {
+    margin-left: 115px;
+  }
+  .pre2 {
+    margin-left: 215px;
+  }
+  .pre3 {
+    margin-left: 315px;
+  }
+  .pre4 {
+    margin-left: 415px;
+  }
+  .pre5 {
+    margin-left: 515px;
+  }
+  .pre6 {
+    margin-left: 615px;
+  }
+  .pre7 {
+    margin-left: 715px;
+  }
+  .pre8 {
+    margin-left: 815px;
+  }
+  .pre9 {
+    margin-left: 915px;
+  }
+  .pre10 {
+    margin-left: 1015px;
+  }
+  .suf1 {
+    margin-right: 115px;
+  }
+  .suf2 {
+    margin-right: 215px;
+  }
+  .suf3 {
+    margin-right: 315px;
+  }
+  .suf4 {
+    margin-right: 415px;
+  }
+  .suf5 {
+    margin-right: 515px;
+  }
+  .suf6 {
+    margin-right: 615px;
+  }
+  .suf7 {
+    margin-right: 715px;
+  }
+  .suf8 {
+    margin-right: 815px;
+  }
+  .suf9 {
+    margin-right: 915px;
+  }
+  .suf10 {
+    margin-right: 1015px;
+  }
+  .container {
+    width: 1200px;
+  }
+  .col2 > .container {
+    margin: 0 0 0 -15px;
+    width: 200px;
+  }
+  .col3 > .container {
+    margin: 0 0 0 -15px;
+    width: 300px;
+  }
+  .col4 > .container {
+    margin: 0 0 0 -15px;
+    width: 400px;
+  }
+  .col5 > .container {
+    margin: 0 0 0 -15px;
+    width: 500px;
+  }
+  .col6 > .container {
+    margin: 0 0 0 -15px;
+    width: 600px;
+  }
+  .col7 > .container {
+    margin: 0 0 0 -15px;
+    width: 700px;
+  }
+  .col8 > .container {
+    margin: 0 0 0 -15px;
+    width: 800px;
+  }
+  .col9 > .container {
+    margin: 0 0 0 -15px;
+    width: 900px;
+  }
+  .col10 > .container {
+    margin: 0 0 0 -15px;
+    width: 1000px;
+  }
+  .col11 > .container {
+    margin: 0 0 0 -15px;
+    width: 1100px;
+  }
+  .col12 > .container {
+    margin: 0 0 0 -15px;
+    width: 1200px;
+  }
+  .colr {
+    float: right;
+    margin: 0 15px;
+  }
+  .alpha {
+    margin-left: 0;
+  }
+  .omega {
+    margin-right: 0;
+  }
+  .clear {
+    clear: both;
+  }
+  .center {
+    float: none;
+    margin: 0 auto;
+  }
+}
+
+@media (min-width: 680px) and (max-width: 1023px) {
+  .wrap {
+    overflow: hidden;
+    width: 100%;
+  }
+  .container {
+    width: 100%;
+    padding: 0 5px;
+    box-sizing: border-box;
+  }
+  .container::after {
+    clear: both;
+    content: '';
+    display: block;
+  }
+  .container .container {
+    width: 102%;
+    width: calc(100% + 20px);
+    margin-left: -10px;
+  }
+  .col12,
+  .col11,
+  .col10,
+  .col9,
+  .col8,
+  .col7 {
+    margin: 0;
+    padding: 0 5px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .col6,
+  .col5,
+  .col4,
+  .col3 {
+    float: left;
+    margin: 0;
+    padding: 0 5px;
+    width: 50%;
+    box-sizing: border-box;
+  }
+  .col2 {
+    float: left;
+    margin: 0;
+    padding: 0 5px;
+    width: 33.33%;
+    box-sizing: border-box;
+  }
+  .m-full {
+    width: 100%;
+  }
+  .m-full.colr {
+    float: none;
+  }
+  .m-half {
+    float: left;
+    width: 50%;
+  }
+  .m-1_3 {
+    float: left;
+    width: 33.33%;
+  }
+  .m-2_3 {
+    float: left;
+    width: 66.66%;
+  }
+  .colr {
+    float: right;
+  }
+  .alpha {
+    margin-left: 0;
+  }
+  .omega {
+    margin-right: 0;
+  }
+  .clear {
+    clear: both;
+  }
+  .center {
+    float: none;
+    margin: 0 auto;
+  }
+}
+
+@media (min-width: 120px) and (max-width: 679px) {
+  .wrap {
+    overflow: hidden;
+    width: 100%;
+  }
+  .container {
+    width: 100%;
+    padding: 0 5px;
+    box-sizing: border-box;
+  }
+  .container:after {
+    clear: both;
+    content: '';
+    display: block;
+  }
+  .container .container {
+    width: 102%;
+    width: calc(100% + 20px);
+    margin-left: -10px;
+  }
+  .col12,
+  .col11,
+  .col10,
+  .col9,
+  .col8,
+  .col7,
+  .col6,
+  .col5,
+  .col4,
+  .col3 {
+    margin: 0;
+    padding: 0 5px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .col2 {
+    float: left;
+    margin: 0;
+    padding: 0 5px;
+    width: 50%;
+    box-sizing: border-box;
+  }
+  .s-full {
+    float: none;
+    margin: 0;
+    padding: 0 5px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .s-half {
+    float: left;
+    margin: 0;
+    padding: 0 5px;
+    width: 50%;
+    box-sizing: border-box;
+  }
+  .clear {
+    clear: both;
+  }
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+.red {
+  color: red;
+}
+
+.red-light {
+  color: #ffb3b3;
+}
+
+.red-dark {
+  color: maroon;
+}
+
+@media (min-width: 1024px) {
+  body {
+    font-size: 18px;
+  }
+}
+
+@media (min-width: 680px) and (max-width: 1023px) {
+  body {
+    font-size: 16px;
+  }
+}
+
+@media (min-width: 120px) and (max-width: 679px) {
+  body {
+    font-size: 14px;
+  }
+}
+
+body {
+  color: #666;
+  margin: 0;
+  padding: 50px 0;
+  font-family: "Roboto Condensed", sans-serif;
+  font-size: 18px;
+  font-weight: 300;
+  background: white;
+}
+
+h2 {
+  color: #d8531e;
+  font-weight: 300;
+  margin: 0;
+  font-size: 48px;
+  font-size: 48px;
+}
+
+h3 {
+  color: #333;
+  font-weight: 300;
+  margin: 0;
+  font-size: 36px;
+  line-height: 36px;
+  padding: 12px 0;
+}
+
+p {
+  margin: 0 0 21px 0;
+}
+
+a {
+  color: #d8531e;
+}
+
+section {
+  margin-bottom: 50px;
+}
+
+.box {
+  margin: 0 0 10px 0;
+  padding: 10px;
+  background: #F5F5F5;
+}
+
+@media (min-width: 1024px) {
+  .box {
+    margin-bottom: 20px;
+    padding: 20px;
+  }
+}
+
+@media (min-width: 1360px) {
+  .box {
+    margin-bottom: 30px;
+    padding: 30px;
+  }
+}
+
+.box p {
+  margin: 0;
+}
+
+.code {
+  font-family: "Courier New", serif;
+  font-size: 14px;
+}
+
+.nesting {
+  background-color: #FFFFDF;
+  margin-bottom: 20px;
+}
+
+.nesting .nesting {
+  background-color: #FFE7DF;
+}
+
+pre {
+  border: 1px solid #CCC;
+  background-color: #F9F9F9;
+  padding: 10px;
+  margin: 0;
+  overflow: auto;
+}
+
+@media (min-width: 1024px) {
+  .content {
+    float: left;
+    margin: 0 10px;
+    width: 620px;
+  }
+}
+
+@media (min-width: 1360px) {
+  .content {
+    margin: 0 15px;
+    width: 770px;
+  }
+}
+
+@media (min-width: 680px) and (max-width: 1023px) {
+  .content {
+    float: left;
+    padding: 0 5px;
+    width: 66.66%;
+    box-sizing: border-box;
+  }
+}
+
+@media (min-width: 680px) and (max-width: 1023px) {
+  .content {
+    float: left;
+    padding: 0 5px;
+    width: 66.66%;
+    box-sizing: border-box;
+  }
+}
+
+@media (min-width: 1024px) {
+  .sidebar {
+    float: right;
+    margin: 0 10px;
+    width: 300px;
+  }
+}
+
+@media (min-width: 1360px) {
+  .sidebar {
+    margin: 0 15px;
+    width: 370px;
+  }
+}
+
+@media (min-width: 680px) and (max-width: 1023px) {
+  .sidebar {
+    float: right;
+    padding: 0 5px;
+    width: 33.33%;
+    box-sizing: border-box;
+  }
+}
+
+@media (max-width: 680px) {
+  .sidebar {
+    padding: 0 5px;
+    box-sizing: border-box;
+  }
+}
+
+@media (max-width: 680px) {
+  .test {
+    padding: 0 5px;
+    box-sizing: border-box;
+  }
+}
+
+/*# sourceMappingURL=maps/sample.css.map */
diff --git a/css/style.css b/css/style.css
index 012af08..d37efae 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2,12 +2,16 @@
  * Hoisin.scss
  * CSS responsive framework boilerplate
  * Create your own grids, plugin anything
- * Version: 0.9.13
+ * Version: 0.9.14
  * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,
  *             Ramon Lapenta <me@ramonlapenta.com>
  *
  */
 @media (min-width: 1024px) {
+  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
+    float: left;
+    margin: 0 10px;
+  }
   .container {
     margin: 0 auto;
     width: 960px;
@@ -61,10 +65,6 @@
     margin: 0 0 0 -10px;
     width: 960px;
   }
-  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
-    float: left;
-    margin: 0 10px;
-  }
   .col2 {
     width: 140px;
   }
@@ -487,196 +487,4 @@
   }
 }
 
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-}
-
-.red {
-  color: red;
-}
-
-.red-light {
-  color: #ffb3b3;
-}
-
-.red-dark {
-  color: maroon;
-}
-
-@media (min-width: 1024px) {
-  body {
-    font-size: 18px;
-  }
-}
-
-@media (min-width: 680px) and (max-width: 1023px) {
-  body {
-    font-size: 16px;
-  }
-}
-
-@media (min-width: 120px) and (max-width: 679px) {
-  body {
-    font-size: 14px;
-  }
-}
-
-body {
-  color: #666;
-  margin: 0;
-  padding: 50px 0;
-  font-family: "Roboto Condensed", sans-serif;
-  font-size: 18px;
-  font-weight: 300;
-  background: white;
-}
-
-h2 {
-  color: #d8531e;
-  font-weight: 300;
-  margin: 0;
-  font-size: 48px;
-  font-size: 48px;
-}
-
-h3 {
-  color: #333;
-  font-weight: 300;
-  margin: 0;
-  font-size: 36px;
-  line-height: 36px;
-  padding: 12px 0;
-}
-
-p {
-  margin: 0 0 21px 0;
-}
-
-a {
-  color: #d8531e;
-}
-
-section {
-  margin-bottom: 50px;
-}
-
-.box {
-  margin: 0 0 10px 0;
-  padding: 10px;
-  background: #F5F5F5;
-}
-
-@media (min-width: 1024px) {
-  .box {
-    margin-bottom: 20px;
-    padding: 20px;
-  }
-}
-
-@media (min-width: 1360px) {
-  .box {
-    margin-bottom: 30px;
-    padding: 30px;
-  }
-}
-
-.box p {
-  margin: 0;
-}
-
-.code {
-  font-family: "Courier New", serif;
-  font-size: 14px;
-}
-
-.nesting {
-  background-color: #FFFFDF;
-  margin-bottom: 20px;
-}
-
-.nesting .nesting {
-  background-color: #FFE7DF;
-}
-
-pre {
-  border: 1px solid #CCC;
-  background-color: #F9F9F9;
-  padding: 10px;
-  margin: 0;
-  overflow: auto;
-}
-
-@media (min-width: 1024px) {
-  .content {
-    float: left;
-    margin: 0 10px;
-    width: 620px;
-  }
-}
-
-@media (min-width: 1360px) {
-  .content {
-    margin: 0 15px;
-    width: 770px;
-  }
-}
-
-@media (min-width: 680px) and (max-width: 1023px) {
-  .content {
-    float: left;
-    padding: 0 5px;
-    width: 66.66%;
-    box-sizing: border-box;
-  }
-}
-
-@media (min-width: 680px) and (max-width: 1023px) {
-  .content {
-    float: left;
-    padding: 0 5px;
-    width: 66.66%;
-    box-sizing: border-box;
-  }
-}
-
-@media (min-width: 1024px) {
-  .sidebar {
-    float: right;
-    margin: 0 10px;
-    width: 300px;
-  }
-}
-
-@media (min-width: 1360px) {
-  .sidebar {
-    margin: 0 15px;
-    width: 370px;
-  }
-}
-
-@media (min-width: 680px) and (max-width: 1023px) {
-  .sidebar {
-    float: right;
-    padding: 0 5px;
-    width: 33.33%;
-    box-sizing: border-box;
-  }
-}
-
-@media (max-width: 680px) {
-  .sidebar {
-    padding: 0 5px;
-    box-sizing: border-box;
-  }
-}
-
-@media (max-width: 680px) {
-  .test {
-    padding: 0 5px;
-    box-sizing: border-box;
-  }
-}
-
 /*# sourceMappingURL=maps/style.css.map */
diff --git a/css/style.min.css b/css/style.min.css
index 41a690b..57aaa99 100644
--- a/css/style.min.css
+++ b/css/style.min.css
@@ -1 +1 @@
-@media (min-width:1024px){.container{margin:0 auto;width:960px}.container:after{clear:both;content:'';display:block}.col2>.container{margin:0 0 0 -10px;width:160px}.col3>.container{margin:0 0 0 -10px;width:240px}.col4>.container{margin:0 0 0 -10px;width:320px}.col5>.container{margin:0 0 0 -10px;width:400px}.col6>.container{margin:0 0 0 -10px;width:480px}.col7>.container{margin:0 0 0 -10px;width:560px}.col8>.container{margin:0 0 0 -10px;width:640px}.col9>.container{margin:0 0 0 -10px;width:720px}.col10>.container{margin:0 0 0 -10px;width:800px}.col11>.container{margin:0 0 0 -10px;width:880px}.col12>.container{margin:0 0 0 -10px;width:960px}.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10,.col11,.col12{float:left;margin:0 10px}.col2{width:140px}.col3{width:220px}.col4{width:300px}.col5{width:380px}.col6{width:460px}.col7{width:540px}.col8{width:620px}.col9{width:700px}.col10{width:780px}.col11{width:860px}.col12{width:940px}.pre1{margin-left:90px}.pre2{margin-left:170px}.pre3{margin-left:250px}.pre4{margin-left:330px}.pre5{margin-left:410px}.pre6{margin-left:490px}.pre7{margin-left:570px}.pre8{margin-left:650px}.pre9{margin-left:730px}.pre10{margin-left:810px}.suf1{margin-right:80px}.suf2{margin-right:160px}.suf3{margin-right:240px}.suf4{margin-right:320px}.suf5{margin-right:400px}.suf6{margin-right:480px}.suf7{margin-right:560px}.suf8{margin-right:640px}.suf9{margin-right:720px}.suf10{margin-right:800px}.colr{float:right;margin:0 10px}.alpha{margin-left:0}.omega{margin-right:0}.clear{clear:both}.center{float:none;margin:0 auto}}@media (min-width:1360px){.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10{float:left;margin:0 15px}.col12{margin:0 15px;width:1170px}.col2{width:170px}.col3{width:270px}.col4{width:370px}.col5{width:470px}.col6{width:570px}.col7{width:670px}.col8{width:770px}.col9{width:870px}.col10{width:970px}.col11{width:1070px}.pre1{margin-left:115px}.pre2{margin-left:215px}.pre3{margin-left:315px}.pre4{margin-left:415px}.pre5{margin-left:515px}.pre6{margin-left:615px}.pre7{margin-left:715px}.pre8{margin-left:815px}.pre9{margin-left:915px}.pre10{margin-left:1015px}.suf1{margin-right:115px}.suf2{margin-right:215px}.suf3{margin-right:315px}.suf4{margin-right:415px}.suf5{margin-right:515px}.suf6{margin-right:615px}.suf7{margin-right:715px}.suf8{margin-right:815px}.suf9{margin-right:915px}.suf10{margin-right:1015px}.container{width:1200px}.col2>.container{margin:0 0 0 -15px;width:200px}.col3>.container{margin:0 0 0 -15px;width:300px}.col4>.container{margin:0 0 0 -15px;width:400px}.col5>.container{margin:0 0 0 -15px;width:500px}.col6>.container{margin:0 0 0 -15px;width:600px}.col7>.container{margin:0 0 0 -15px;width:700px}.col8>.container{margin:0 0 0 -15px;width:800px}.col9>.container{margin:0 0 0 -15px;width:900px}.col10>.container{margin:0 0 0 -15px;width:1000px}.col11>.container{margin:0 0 0 -15px;width:1100px}.col12>.container{margin:0 0 0 -15px;width:1200px}.colr{float:right;margin:0 15px}.alpha{margin-left:0}.omega{margin-right:0}.clear{clear:both}.center{float:none;margin:0 auto}}@media (min-width:680px) and (max-width:1023px){.wrap{overflow:hidden;width:100%}.container{width:100%;padding:0 5px;box-sizing:border-box}.container:after{clear:both;content:'';display:block}.container .container{width:102%;width:calc(100% + 20px);margin-left:-10px}.col7,.col8,.col9,.col10,.col11,.col12{margin:0;padding:0 5px;width:100%;box-sizing:border-box}.col3,.col4,.col5,.col6{width:50%}.col2,.col3,.col4,.col5,.col6{float:left;margin:0;padding:0 5px;box-sizing:border-box}.col2{width:33.33%}.m-full{width:100%}.m-full.colr{float:none}.m-half{float:left;width:50%}.m-1_3{float:left;width:33.33%}.m-2_3{float:left;width:66.66%}.colr{float:right}.alpha{margin-left:0}.omega{margin-right:0}.clear{clear:both}.center{float:none;margin:0 auto}}@media (min-width:120px) and (max-width:679px){.wrap{overflow:hidden;width:100%}.container{width:100%;padding:0 5px;box-sizing:border-box}.container:after{clear:both;content:'';display:block}.container .container{width:102%;width:calc(100% + 20px);margin-left:-10px}.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10,.col11,.col12{margin:0;padding:0 5px;width:100%;box-sizing:border-box}.col2{float:left;width:50%}.col2,.s-full{margin:0;padding:0 5px;box-sizing:border-box}.s-full{float:none;width:100%}.s-half{float:left;margin:0;padding:0 5px;width:50%;box-sizing:border-box}.clear{clear:both}}body{margin:0;padding:0;font-family:sans-serif}.red{color:red}.red-light{color:#ffb3b3}.red-dark{color:maroon}@media (min-width:1024px){body{font-size:18px}}@media (min-width:680px) and (max-width:1023px){body{font-size:16px}}@media (min-width:120px) and (max-width:679px){body{font-size:14px}}body{color:#666;padding:50px 0;font-family:Roboto Condensed,sans-serif;font-size:18px;background:#fff}body,h2{margin:0;font-weight:300}h2{color:#d8531e;font-size:48px}h3{color:#333;font-weight:300;margin:0;font-size:36px;line-height:36px;padding:12px 0}p{margin:0 0 21px}a{color:#d8531e}section{margin-bottom:50px}.box{margin:0 0 10px;padding:10px;background:#f5f5f5}@media (min-width:1024px){.box{margin-bottom:20px;padding:20px}}@media (min-width:1360px){.box{margin-bottom:30px;padding:30px}}.box p{margin:0}.code{font-family:Courier New,serif;font-size:14px}.nesting{background-color:#ffffdf;margin-bottom:20px}.nesting .nesting{background-color:#ffe7df}pre{border:1px solid #ccc;background-color:#f9f9f9;padding:10px;margin:0;overflow:auto}@media (min-width:1024px){.content{float:left;margin:0 10px;width:620px}}@media (min-width:1360px){.content{margin:0 15px;width:770px}}@media (min-width:680px) and (max-width:1023px){.content{float:left;padding:0 5px;width:66.66%;box-sizing:border-box}}@media (min-width:1024px){.sidebar{float:right;margin:0 10px;width:300px}}@media (min-width:1360px){.sidebar{margin:0 15px;width:370px}}@media (min-width:680px) and (max-width:1023px){.sidebar{float:right;padding:0 5px;width:33.33%;box-sizing:border-box}}@media (max-width:680px){.sidebar,.test{padding:0 5px;box-sizing:border-box}}
\ No newline at end of file
+@media (min-width:1024px){.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10,.col11,.col12{float:left;margin:0 10px}.container{margin:0 auto;width:960px}.container:after{clear:both;content:'';display:block}.col2>.container{margin:0 0 0 -10px;width:160px}.col3>.container{margin:0 0 0 -10px;width:240px}.col4>.container{margin:0 0 0 -10px;width:320px}.col5>.container{margin:0 0 0 -10px;width:400px}.col6>.container{margin:0 0 0 -10px;width:480px}.col7>.container{margin:0 0 0 -10px;width:560px}.col8>.container{margin:0 0 0 -10px;width:640px}.col9>.container{margin:0 0 0 -10px;width:720px}.col10>.container{margin:0 0 0 -10px;width:800px}.col11>.container{margin:0 0 0 -10px;width:880px}.col12>.container{margin:0 0 0 -10px;width:960px}.col2{width:140px}.col3{width:220px}.col4{width:300px}.col5{width:380px}.col6{width:460px}.col7{width:540px}.col8{width:620px}.col9{width:700px}.col10{width:780px}.col11{width:860px}.col12{width:940px}.pre1{margin-left:90px}.pre2{margin-left:170px}.pre3{margin-left:250px}.pre4{margin-left:330px}.pre5{margin-left:410px}.pre6{margin-left:490px}.pre7{margin-left:570px}.pre8{margin-left:650px}.pre9{margin-left:730px}.pre10{margin-left:810px}.suf1{margin-right:80px}.suf2{margin-right:160px}.suf3{margin-right:240px}.suf4{margin-right:320px}.suf5{margin-right:400px}.suf6{margin-right:480px}.suf7{margin-right:560px}.suf8{margin-right:640px}.suf9{margin-right:720px}.suf10{margin-right:800px}.colr{float:right;margin:0 10px}.alpha{margin-left:0}.omega{margin-right:0}.clear{clear:both}.center{float:none;margin:0 auto}}@media (min-width:1360px){.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10{float:left;margin:0 15px}.col12{margin:0 15px;width:1170px}.col2{width:170px}.col3{width:270px}.col4{width:370px}.col5{width:470px}.col6{width:570px}.col7{width:670px}.col8{width:770px}.col9{width:870px}.col10{width:970px}.col11{width:1070px}.pre1{margin-left:115px}.pre2{margin-left:215px}.pre3{margin-left:315px}.pre4{margin-left:415px}.pre5{margin-left:515px}.pre6{margin-left:615px}.pre7{margin-left:715px}.pre8{margin-left:815px}.pre9{margin-left:915px}.pre10{margin-left:1015px}.suf1{margin-right:115px}.suf2{margin-right:215px}.suf3{margin-right:315px}.suf4{margin-right:415px}.suf5{margin-right:515px}.suf6{margin-right:615px}.suf7{margin-right:715px}.suf8{margin-right:815px}.suf9{margin-right:915px}.suf10{margin-right:1015px}.container{width:1200px}.col2>.container{margin:0 0 0 -15px;width:200px}.col3>.container{margin:0 0 0 -15px;width:300px}.col4>.container{margin:0 0 0 -15px;width:400px}.col5>.container{margin:0 0 0 -15px;width:500px}.col6>.container{margin:0 0 0 -15px;width:600px}.col7>.container{margin:0 0 0 -15px;width:700px}.col8>.container{margin:0 0 0 -15px;width:800px}.col9>.container{margin:0 0 0 -15px;width:900px}.col10>.container{margin:0 0 0 -15px;width:1000px}.col11>.container{margin:0 0 0 -15px;width:1100px}.col12>.container{margin:0 0 0 -15px;width:1200px}.colr{float:right;margin:0 15px}.alpha{margin-left:0}.omega{margin-right:0}.clear{clear:both}.center{float:none;margin:0 auto}}@media (min-width:680px) and (max-width:1023px){.wrap{overflow:hidden;width:100%}.container{width:100%;padding:0 5px;box-sizing:border-box}.container:after{clear:both;content:'';display:block}.container .container{width:102%;width:calc(100% + 20px);margin-left:-10px}.col7,.col8,.col9,.col10,.col11,.col12{margin:0;padding:0 5px;width:100%;box-sizing:border-box}.col3,.col4,.col5,.col6{width:50%}.col2,.col3,.col4,.col5,.col6{float:left;margin:0;padding:0 5px;box-sizing:border-box}.col2{width:33.33%}.m-full{width:100%}.m-full.colr{float:none}.m-half{float:left;width:50%}.m-1_3{float:left;width:33.33%}.m-2_3{float:left;width:66.66%}.colr{float:right}.alpha{margin-left:0}.omega{margin-right:0}.clear{clear:both}.center{float:none;margin:0 auto}}@media (min-width:120px) and (max-width:679px){.wrap{overflow:hidden;width:100%}.container{width:100%;padding:0 5px;box-sizing:border-box}.container:after{clear:both;content:'';display:block}.container .container{width:102%;width:calc(100% + 20px);margin-left:-10px}.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10,.col11,.col12{margin:0;padding:0 5px;width:100%;box-sizing:border-box}.col2{float:left;width:50%}.col2,.s-full{margin:0;padding:0 5px;box-sizing:border-box}.s-full{float:none;width:100%}.s-half{float:left;margin:0;padding:0 5px;width:50%;box-sizing:border-box}.clear{clear:both}}
\ No newline at end of file
diff --git a/index.html b/index.html
index 3e987be..ffed9e5 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
 	<title>hoisin.scss</title>
 	<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300' rel='stylesheet' type='text/css'>
 	<link rel="stylesheet" type="text/css" href="css/style.min.css">
-
+	<link rel="stylesheet" type="text/css" href="css/sample.css">
 </head>
 <body>
 	<section>
diff --git a/package.json b/package.json
index 6d95e43..82565d8 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "hoisin.scss",
   "title": "Hoisin.scss",
   "description": "A simple responsive mini framework to kick start your project.",
-  "version": "0.9.13",
+  "version": "0.9.14",
   "homepage": "https://github.com/Cyber-Duck/hoisin.scss",
   "license": "ISC",
   "author": {
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 6a5c2b7..b7bfeb5 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -50,6 +50,7 @@
 }
 
 
+
 ///* 
 // * Box shadow
 // * @param $value ($h-offset $v-offset $blur $spread $color | inset | initial | inherit);
diff --git a/scss/_vars.scss b/scss/_vars.scss
index e0b5e56..04209db 100644
--- a/scss/_vars.scss
+++ b/scss/_vars.scss
@@ -18,7 +18,9 @@ $white:                         #fff;
 $text:                          #000;
 $title:                         #000;
 
+
 // Grid
+$include-grid:                  true;
 $col-qty:                       12;
 $col-width:                     60px;
 $gutter:                        20px;
diff --git a/scss/_version.scss b/scss/_version.scss
index e46183a..cf961b4 100644
--- a/scss/_version.scss
+++ b/scss/_version.scss
@@ -2,7 +2,7 @@
  * Hoisin.scss
  * CSS responsive framework boilerplate
  * Create your own grids, plugin anything
- * Version: 0.9.13
+ * Version: 0.9.14
  * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,
  *             Ramon Lapenta <me@ramonlapenta.com>
  *
diff --git a/scss/l/_base.scss b/scss/l/_base.scss
index 4dea693..d7553ce 100644
--- a/scss/l/_base.scss
+++ b/scss/l/_base.scss
@@ -1,90 +1,99 @@
 // * Large screens grid system
 // *
 
-// * Define the size of the container using variables
-$wrap: ($col-width * $col-qty) + $gutter * ($col-qty - 1);
-
-.container {
-    margin: 0 auto;
-    width: $wrap + $gutter;
-
-    &:after {
-        clear: both;
-        content: '';
-        display: block;
-    }
-}
-
-// * Loop through the cols to generate size of nested containers
-@for $i from 2 through $col-qty {
-    .col#{$i} > .container {
-        margin: 0 0 0 0 -($gutter/2);
-        width: ($col-width * $i) + ($gutter * $i);
-    }
-}
-
 // * Empty declaration as a base for all spans common styles
 %base-col {
     float: left;
     margin: 0 $gutter/2;
 }
 
-// * Mixin to loop through spans using the empty declaration
+///* 
+// * Cols
+// * Mixin to create the col spans using the previous empty % declaration
+// *
+// * @include cols;
+// */
 @mixin cols {
     @for $i from 1 through $col-qty {
         .col#{$i} { @extend %base-col; }
     }
 }
 
-// * Output all the spans common styles
-@include cols;
+// Output the grid only if variable set to true
+@if ($include-grid) {
+
+    // * Define the size of the container using variables
+    $wrap: ($col-width * $col-qty) + $gutter * ($col-qty - 1);
 
-// * Loop to generate each span 
-@for $i from 2 through $col-qty {
-    .col#{$i} {
-        width: ($col-width * $i) + ($gutter * $i) - $gutter;
+    .container {
+        margin: 0 auto;
+        width: $wrap + $gutter;
+
+        &:after {
+            clear: both;
+            content: '';
+            display: block;
+        }
     }
-}
 
-@for $i from 1 through ($col-qty - 2) {
-    .pre#{$i} {
-        margin-left: ($col-width * $i) + ($gutter * $i) + ($gutter / 2);
+    // * Loop through the cols to generate size of nested containers
+    @for $i from 2 through $col-qty {
+        .col#{$i} > .container {
+            margin: 0 0 0 0 -($gutter/2);
+            width: ($col-width * $i) + ($gutter * $i);
+        }
     }
-}
 
-@for $i from 1 through ($col-qty - 2) {
-    .suf#{$i} {
-        margin-right: ($col-width * $i) + ($gutter * $i);
+    // * Output all the spans common styles
+    @include cols;
+
+    // * Loop to generate each span 
+    @for $i from 2 through $col-qty {
+        .col#{$i} {
+            width: ($col-width * $i) + ($gutter * $i) - $gutter;
+        }
     }
-}
 
-// *
-// * Additional grid utilities
-// *
+    @for $i from 1 through ($col-qty - 2) {
+        .pre#{$i} {
+            margin-left: ($col-width * $i) + ($gutter * $i) + ($gutter / 2);
+        }
+    }
 
-// * Force float a span to the right
-.colr {
-    float: right;
-    margin: 0 $gutter/2;
-}
+    @for $i from 1 through ($col-qty - 2) {
+        .suf#{$i} {
+            margin-right: ($col-width * $i) + ($gutter * $i);
+        }
+    }
 
-// * Remove left margin from span
-.alpha {
-    margin-left: 0;
-}
+    // *
+    // * Additional grid utilities
+    // *
 
-// * Remove right margin from span
-.omega {
-    margin-right: 0;
-}
+    // * Force float a span to the right
+    .colr {
+        float: right;
+        margin: 0 $gutter/2;
+    }
 
-// * Clear helper
-.clear {
-    clear: both;
-}
+    // * Remove left margin from span
+    .alpha {
+        margin-left: 0;
+    }
+
+    // * Remove right margin from span
+    .omega {
+        margin-right: 0;
+    }
+
+    // * Clear helper
+    .clear {
+        clear: both;
+    }
 
-// * center span in container
-.center {
-    float: none;
-    margin: 0 auto;
-}
\ No newline at end of file
+    // * center span in container
+    .center {
+        float: none;
+        margin: 0 auto;
+    }
+}
diff --git a/scss/l/_xl.scss b/scss/l/_xl.scss
index 8dbb1da..fc3cbde 100644
--- a/scss/l/_xl.scss
+++ b/scss/l/_xl.scss
@@ -2,7 +2,6 @@
 // * Grid system
 // * Define the size of the container using extra large variables
 // *
-$wrap: $xl-col-width * 12 + $xl-gutter * 11;
 
 // * Generate a common style for all spans
 %base-xl-col {
@@ -10,69 +9,80 @@ $wrap: $xl-col-width * 12 + $xl-gutter * 11;
     margin: 0 $xl-gutter/2;
 }
 
+///* 
+// * Cols
+// * Mixin to create the col spans using the previous empty % declaration
+// *
+// * @include cols;
+// */
 @mixin cols {
     @for $i from 1 to $col-qty - 1 {
         .col#{$i} { @extend %base-xl-col; }
     }
 }
 
-// * Output the common span styles
-@include cols;
+// Output the grid only if variable set to true
+@if ($include-grid) {
+    $wrap: $xl-col-width * 12 + $xl-gutter * 11;
 
-// Define widths for each span
-.col#{$col-qty} {
-    margin: 0 $xl-gutter/2; // Full width, doesn't need float
-    width: ($xl-col-width * $col-qty) + ($xl-gutter * $col-qty) - $xl-gutter;
-}
+    // * Output the common span styles
+    @include cols;
 
-@for $i from 2 to $col-qty {
-    .col#{$i} {
-        width: $xl-col-width * $i + $xl-gutter * $i - $xl-gutter;
+    // Define widths for each span
+    .col#{$col-qty} {
+        margin: 0 $xl-gutter/2; // Full width, doesn't need float
+        width: ($xl-col-width * $col-qty) + ($xl-gutter * $col-qty) - $xl-gutter;
     }
-}
 
-@for $i from 1 through 10 {
-    .pre#{$i} {
-        margin-left: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);
+    @for $i from 2 to $col-qty {
+        .col#{$i} {
+            width: $xl-col-width * $i + $xl-gutter * $i - $xl-gutter;
+        }
     }
-}
 
-@for $i from 1 through 10 {
-    .suf#{$i} {
-        margin-right: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);
+    @for $i from 1 through 10 {
+        .pre#{$i} {
+            margin-left: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);
+        }
     }
-}
 
-.container {
-    width: $wrap + $xl-gutter;
-}
+    @for $i from 1 through 10 {
+        .suf#{$i} {
+            margin-right: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);
+        }
+    }
 
-@for $i from 2 through $col-qty {
-    .col#{$i} > .container {
-        margin: 0 0 0 0 -($xl-gutter/2);
-        width: ($xl-col-width * $i) + ($xl-gutter * $i);
+    .container {
+        width: $wrap + $xl-gutter;
     }
-}
 
-// * Grid utilities
-.colr {
-    float: right;
-    margin: 0 $xl-gutter/2;
-}
+    @for $i from 2 through $col-qty {
+        .col#{$i} > .container {
+            margin: 0 0 0 0 -($xl-gutter/2);
+            width: ($xl-col-width * $i) + ($xl-gutter * $i);
+        }
+    }
 
-.alpha {
-    margin-left: 0;
-}
+    // * Grid utilities
+    .colr {
+        float: right;
+        margin: 0 $xl-gutter/2;
+    }
 
-.omega {
-    margin-right: 0;
-}
+    .alpha {
+        margin-left: 0;
+    }
 
-.clear {
-    clear: both;
-}
+    .omega {
+        margin-right: 0;
+    }
 
-.center {
-    float: none;
-    margin: 0 auto;
+    .clear {
+        clear: both;
+    }
+
+    .center {
+        float: none;
+        margin: 0 auto;
+    }
 }
diff --git a/scss/m/_base.scss b/scss/m/_base.scss
index 4ec5635..09ae21b 100644
--- a/scss/m/_base.scss
+++ b/scss/m/_base.scss
@@ -2,100 +2,103 @@
 // * Define the properties of the flexible container
 // *
 
-.wrap {
-    overflow: hidden;
-    width: 100%;
-}
-
-.container {
-    width: 100%;
-    padding: 0 ($gutter/4);
-    box-sizing: border-box;
-    
-    &::after {
-        clear: both;
-        content: '';
-        display: block;
+// Output the grid only if variable set to true
+@if ($include-grid) {
+    .wrap {
+        overflow: hidden;
+        width: 100%;
     }
 
     .container {
-        width: 102%;
-        width: calc(100% + #{$gutter});
-        margin-left: -($gutter/2);
+        width: 100%;
+        padding: 0 ($gutter/4);
+        box-sizing: border-box;
+        
+        &::after {
+            clear: both;
+            content: '';
+            display: block;
+        }
+
+        .container {
+            width: 102%;
+            width: calc(100% + #{$gutter});
+            margin-left: -($gutter/2);
+        }
     }
-}
 
-.col12, 
-.col11, 
-.col10, 
-.col9, 
-.col8, 
-.col7 {
-    margin: 0;
-    padding: 0 ($gutter/4);
-    width: 100%;
-    box-sizing: border-box;
-}
+    .col12, 
+    .col11, 
+    .col10, 
+    .col9, 
+    .col8, 
+    .col7 {
+        margin: 0;
+        padding: 0 ($gutter/4);
+        width: 100%;
+        box-sizing: border-box;
+    }
 
-.col6, 
-.col5, 
-.col4, 
-.col3 {
-    float: left;
-    margin: 0;
-    padding: 0 ($gutter/4);
-    width: 50%;
-    box-sizing: border-box;
-}
+    .col6, 
+    .col5, 
+    .col4, 
+    .col3 {
+        float: left;
+        margin: 0;
+        padding: 0 ($gutter/4);
+        width: 50%;
+        box-sizing: border-box;
+    }
 
-.col2 {
-    float: left;
-    margin: 0;
-    padding: 0 ($gutter/4);
-    width: 33.33%;
-    box-sizing: border-box;
-}
+    .col2 {
+        float: left;
+        margin: 0;
+        padding: 0 ($gutter/4);
+        width: 33.33%;
+        box-sizing: border-box;
+    }
 
-.m-full {
-    width: 100%;
-    &.colr {
-        float: none;
+    .m-full {
+        width: 100%;
+        &.colr {
+            float: none;
+        }
     }
-}
 
-.m-half {
-    float: left;
-    width: 50%;
-}
+    .m-half {
+        float: left;
+        width: 50%;
+    }
 
-.m-1_3 {
-    float: left;
-    width: 33.33%;
-}
+    .m-1_3 {
+        float: left;
+        width: 33.33%;
+    }
 
-.m-2_3 {
-    float: left;
-    width: 66.66%;
-}
+    .m-2_3 {
+        float: left;
+        width: 66.66%;
+    }
 
-// * Additional grid utilities
-.colr {
-    float: right;
-}
+    // * Additional grid utilities
+    .colr {
+        float: right;
+    }
 
-.alpha {
-    margin-left: 0;
-}
+    .alpha {
+        margin-left: 0;
+    }
 
-.omega {
-    margin-right: 0;
-}
+    .omega {
+        margin-right: 0;
+    }
 
-.clear {
-    clear: both;
-}
+    .clear {
+        clear: both;
+    }
 
-.center {
-    float: none;
-    margin: 0 auto;
-}
+    .center {
+        float: none;
+        margin: 0 auto;
+    }
+}
\ No newline at end of file
diff --git a/scss/s/_base.scss b/scss/s/_base.scss
index cb3d75d..5c0e7a0 100644
--- a/scss/s/_base.scss
+++ b/scss/s/_base.scss
@@ -2,68 +2,72 @@
 // * Define the properties of the flexible container
 // *
 
-.wrap {
-    overflow: hidden;
-    width: 100%;
-}
-
-.container {
-    width: 100%;
-    padding: 0 ($gutter/4);
-    box-sizing: border-box;
-    &:after {
-        clear: both;
-        content: '';
-        display: block;
+// Output the grid only if variable set to true
+@if ($include-grid) {
+    .wrap {
+        overflow: hidden;
+        width: 100%;
     }
-    
+
     .container {
-        width: 102%;
-        width: calc(100% + #{$gutter});
-        margin-left: -($gutter/2);
+        width: 100%;
+        padding: 0 ($gutter/4);
+        box-sizing: border-box;
+
+        &:after {
+            clear: both;
+            content: '';
+            display: block;
+        }
+        
+        .container {
+            width: 102%;
+            width: calc(100% + #{$gutter});
+            margin-left: -($gutter/2);
+        }
     }
-}
 
-.col12, 
-.col11, 
-.col10, 
-.col9, 
-.col8, 
-.col7, 
-.col6, 
-.col5, 
-.col4, 
-.col3 {
-    margin: 0;
-    padding: 0 ($gutter/4);
-    width: 100%;
-    box-sizing: border-box;
-}
+    .col12, 
+    .col11, 
+    .col10, 
+    .col9, 
+    .col8, 
+    .col7, 
+    .col6, 
+    .col5, 
+    .col4, 
+    .col3 {
+        margin: 0;
+        padding: 0 ($gutter/4);
+        width: 100%;
+        box-sizing: border-box;
+    }
 
-.col2 {
-    float: left;
-    margin: 0;
-    padding: 0 ($gutter/4);
-    width: 50%;
-    box-sizing: border-box;
-}
+    .col2 {
+        float: left;
+        margin: 0;
+        padding: 0 ($gutter/4);
+        width: 50%;
+        box-sizing: border-box;
+    }
 
-.s-full {
-    float: none;
-    margin: 0;
-    padding: 0 ($gutter/4);
-    width: 100%;
-    box-sizing: border-box;
-}
+    .s-full {
+        float: none;
+        margin: 0;
+        padding: 0 ($gutter/4);
+        width: 100%;
+        box-sizing: border-box;
+    }
 
-.s-half {
-    float: left;
-    margin: 0;
-    padding: 0 ($gutter/4);
-    width: 50%;
-    box-sizing: border-box;
-}
+    .s-half {
+        float: left;
+        margin: 0;
+        padding: 0 ($gutter/4);
+        width: 50%;
+        box-sizing: border-box;
+    }
 
-.clear {
-    clear: both;
+    .clear {
+        clear: both;
+    }
 }
diff --git a/scss/sample.scss b/scss/sample.scss
new file mode 100644
index 0000000..63bb57d
--- /dev/null
+++ b/scss/sample.scss
@@ -0,0 +1,18 @@
+@import 'version';
+@import 'vars';
+@import 'functions';
+@import 'mixins';
+@import 'grid';
+
+
+// Common components
+// @import 'components/component';
+@import 'components/body';
+
+// This is just Hoisin's sample page styles
+// You can remove this import and delete the _sample.scss
+// file for your project.
+@import 'components/sample'; 
+
+// Pages
+// @import 'pages/page';
diff --git a/scss/style.scss b/scss/style.scss
index 59df075..053ac95 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -6,12 +6,6 @@
 
 // Common components
 // @import 'components/component';
-@import 'components/body';
-
-// This is just Hoisin's sample page styles
-// You can remove this import and delete the _sample.scss
-// file for your project.
-@import 'components/sample'; 
 
 // Pages
 // @import 'pages/page';