diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md
index 3d6d1a6..1cfe648 100644
--- a/docs/v3/DEVLOG.md
+++ b/docs/v3/DEVLOG.md
@@ -68,3 +68,8 @@
 - Removed legacy code from `grid`, specifically the one targeting `box-flex` (old syntax). - This trimmed the module size from `940bytes` down to `848bytes`.
 - Removed legacy support for prefixed flexbox (`-webkit-`), trimmed off another `91bytes`.
 - Improved indentation for `grid` module, now that prefixed code is gone.
+
+## 20171025
+
+- Improved the `grid` module by creating a simple `@mixin` to generate each grid step. Complexity is significantly lower now.
+- Properly configured the `grid` module for defaults, without anything stored in CSS variables it now weighs a nice `750bytes`. This will probably grow ever so slightly as soon as I get to add CSS variables.
diff --git a/docs/v3/style.min.css b/docs/v3/style.min.css
index d231749..9534217 100644
--- a/docs/v3/style.min.css
+++ b/docs/v3/style.min.css
@@ -1 +1 @@
-:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#eee;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a—  " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 20px}.row{box-sizing:border-box;display:-webkit-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex-flow:row wrap;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-sm,.row.cols-sm>*{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-sm-2,.row.cols-sm-2>*{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-sm-3,.row.cols-sm-3>*{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-sm-4,.row.cols-sm-4>*{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-sm-5,.row.cols-sm-5>*{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-sm-6,.row.cols-sm-6>*{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-sm-7,.row.cols-sm-7>*{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-sm-8,.row.cols-sm-8>*{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-sm-9,.row.cols-sm-9>*{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-sm-10,.row.cols-sm-10>*{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-sm-11,.row.cols-sm-11>*{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-sm-12,.row.cols-sm-12>*{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{-webkit-order:initial;order:initial}.col-sm-first{-webkit-order:-999;order:-999}.col-sm-last{-webkit-order:999;order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-md,.row.cols-md>*{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-md-1,.row.cols-md-1>*{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-md-2,.row.cols-md-2>*{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-md-3,.row.cols-md-3>*{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-md-4,.row.cols-md-4>*{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-md-5,.row.cols-md-5>*{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-md-6,.row.cols-md-6>*{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-md-7,.row.cols-md-7>*{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-md-8,.row.cols-md-8>*{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-md-9,.row.cols-md-9>*{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-md-10,.row.cols-md-10>*{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-md-11,.row.cols-md-11>*{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-md-12,.row.cols-md-12>*{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333%}.col-md-offset-2{margin-left:16.66667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333%}.col-md-offset-5{margin-left:41.66667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333%}.col-md-offset-8{margin-left:66.66667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{-webkit-order:initial;order:initial}.col-md-first{-webkit-order:-999;order:-999}.col-md-last{-webkit-order:999;order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-lg,.row.cols-lg>*{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-lg-2,.row.cols-lg-2>*{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-lg-3,.row.cols-lg-3>*{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-lg-4,.row.cols-lg-4>*{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-lg-5,.row.cols-lg-5>*{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-lg-6,.row.cols-lg-6>*{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-lg-7,.row.cols-lg-7>*{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-lg-8,.row.cols-lg-8>*{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-lg-9,.row.cols-lg-9>*{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-lg-10,.row.cols-lg-10>*{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-lg-11,.row.cols-lg-11>*{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-lg-12,.row.cols-lg-12>*{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{-webkit-order:initial;order:initial}.col-lg-first{-webkit-order:-999;order:-999}.col-lg-last{-webkit-order:999;order:999}}:not(.doc){font-family:'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif}code:not(.doc),kbd:not(.doc),pre:not(.doc),samp:not(.doc){font-family:'Inconsolata', Menlo, Consolas, monospace}.index-splash{width:100%;height:100vh}.index-splash-image{background-image:url("./index-splash.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}.index-splash-image:not(.no-filter){filter:blur(2px)}h1.splash{position:absolute;margin:0;width:100%;text-align:center;height:100%;line-height:60vh;font-size:3rem;font-weight:400;color:#f22f21}h1.splash small{display:initial;font-size:0.5em;color:#222}h1.splash::first-letter{font-size:1.33em;color:#fff;background:#f22f21;border-radius:6px;padding:0 10px}p.splash{margin:0;position:absolute;width:100%;text-align:center;padding-top:40vh}#version-info{position:absolute;bottom:0;background:rgba(0,0,0,0.25);padding:2px 6px;border-radius:4px;color:#dc2b1e;right:8px;font-weight:500}header{display:block;height:3.25rem;background:#f8f8f8;color:#444;padding:0.125rem 0.5rem;white-space:nowrap;overflow-x:auto;overflow-y:hidden;position:sticky;border-bottom:1px solid #ddd;top:0;text-transform:uppercase;line-height:3.5rem;font-weight:500;cursor:pointer}header:hover{color:#111}.row.padded{padding-top:16px;padding-bottom:16px}
+:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#eee;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a—  " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 20px}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 4px}.col-sm,.row.cols-sm>*{flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{flex-basis:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{flex-basis:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{flex-basis:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{flex-basis:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{flex-basis:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{flex-basis:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{flex-basis:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{flex-basis:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{flex-basis:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{flex-basis:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{flex-basis:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{flex-basis:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 4px}.col-md,.row.cols-md>*{flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{flex-basis:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{flex-basis:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{flex-basis:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{flex-basis:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{flex-basis:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{flex-basis:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{flex-basis:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{flex-basis:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{flex-basis:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{flex-basis:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{flex-basis:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{flex-basis:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 4px}.col-lg,.row.cols-lg>*{flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{flex-basis:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{flex-basis:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{flex-basis:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{flex-basis:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{flex-basis:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{flex-basis:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{flex-basis:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{flex-basis:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{flex-basis:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{flex-basis:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{flex-basis:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{flex-basis:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}}:not(.doc){font-family:'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif}code:not(.doc),kbd:not(.doc),pre:not(.doc),samp:not(.doc){font-family:'Inconsolata', Menlo, Consolas, monospace}.index-splash{width:100%;height:100vh}.index-splash-image{background-image:url("./index-splash.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}.index-splash-image:not(.no-filter){filter:blur(2px)}h1.splash{position:absolute;margin:0;width:100%;text-align:center;height:100%;line-height:60vh;font-size:3rem;font-weight:400;color:#f22f21}h1.splash small{display:initial;font-size:0.5em;color:#222}h1.splash::first-letter{font-size:1.33em;color:#fff;background:#f22f21;border-radius:6px;padding:0 10px}p.splash{margin:0;position:absolute;width:100%;text-align:center;padding-top:40vh}#version-info{position:absolute;bottom:0;background:rgba(0,0,0,0.25);padding:2px 6px;border-radius:4px;color:#dc2b1e;right:8px;font-weight:500}header{display:block;height:3.25rem;background:#f8f8f8;color:#444;padding:0.125rem 0.5rem;white-space:nowrap;overflow-x:auto;overflow-y:hidden;position:sticky;border-bottom:1px solid #ddd;top:0;text-transform:uppercase;line-height:3.5rem;font-weight:500;cursor:pointer}header:hover{color:#111}.row.padded{padding-top:16px;padding-bottom:16px}
diff --git a/src/mini/_grid.scss b/src/mini/_grid.scss
index bcbaa4d..7080e42 100644
--- a/src/mini/_grid.scss
+++ b/src/mini/_grid.scss
@@ -2,21 +2,18 @@
   Definitions for the grid system.
 */
 // The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
-$use-four-step-grid:           false !default;        // Flag for the grid system choice (`true`/`false`).
 $include-parent-layout:        true !default;         // Flag for rows defining column layouts (`true`/`false`).
 $grid-container-name:          'container' !default;  // Class name for the grid system container.
-$grid-container-side-padding:  20px !default;         // Padding for the grid container (left and right only).
+$grid-container-side-padding:  0.75rem !default;      // Padding for the grid container (left and right only).
 $grid-row-name:                'row' !default;        // Class name for the grid system rows.
 $grid-row-parent-layout-prefix:'cols' !default;       // Class name prefix for the grid's row parents.
 $grid-column-prefix:           'col' !default;        // Class name prefix for the grid's columns.
 $grid-column-offset-suffix:    'offset' !default;     // Class name suffix for the grid's offsets.
 $grid-column-count:            12 !default;           // Number of columns in the grid (integer value only).
-$grid-column-padding:          0 4px !default;        // Padding for the columns of the grid.
+$grid-column-padding:          0 0.25rem !default;    // Padding for the columns of the grid.
 $grid-order-normal-suffix:     'normal' !default;     // Class name suffix for grid columns with normal priority.
 $grid-order-first-suffix:      'first' !default;      // Class name suffix for grid columns with highest priority.
 $grid-order-last-suffix:       'last' !default;       // Class name suffix for grid columns with lowest priorty.
-$grid-extra-small-prefix:      'xs' !default;         // Extra small screen class prefix for grid (four-step-grid-only).
-$grid-small-breakpoint:        480px !default;        // Small screen breakpoint for grid (four-step-grid-only).
 $grid-small-prefix:            'sm' !default;         // Small screen class prefix for grid.
 $grid-medium-breakpoint:       768px !default;        // Medium screen breakpoint for grid.
 $grid-medium-prefix:           'md' !default;         // Medium screen class prefix for grid.
@@ -30,217 +27,85 @@ $grid-large-prefix:            'lg' !default;         // Large screen class pref
 // Grid row definition.
 .#{$grid-row-name} {
   box-sizing: border-box;
-  display:   -webkit-flex;
-  display:          flex;
+  display: flex;
   flex: 0 1 auto;
   flex-flow: row wrap;
 }
-// Small screen grid definitions.
-@if $include-parent-layout {
-  // Grid column generic definitions for small screens.
-  .#{$grid-column-prefix}-#{$grid-small-prefix},
-  [class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
-  [class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'],
-  .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
-    box-sizing: border-box;
-    flex: 0 0 auto;
-    padding: $grid-column-padding;
-  }
-  // Grid column specific definition for flexible column.
-  .#{$grid-column-prefix}-#{$grid-small-prefix},
-  .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix} > *  {
-    // max-width: 100%; -- TODO: Are we certain we don't need this?
-    flex-grow: 1;
-    flex-basis: 0;
-  }
-}
-@else {
-  // Grid column generic definitions for small screens.
-  .#{$grid-column-prefix}-#{$grid-small-prefix},
-  [class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
-  [class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'] {
-    flex: 0 0 auto;
-    padding: $grid-column-padding;
-  }
-  // Grid column specific definition for flexible column.
-  .#{$grid-column-prefix}-#{$grid-small-prefix} {
-    // max-width: 100%; -- TODO: Are we certain we don't need this?
-    flex-grow: 1;
-    flex-basis: 0;
-  }
-}
-// Grid column specific definitions for predefined columns.
-@for $i from 1 through $grid-column-count {
+// Inline mixin, used to generate class definitions for each grid step.
+@mixin generate-grid-size ($size-prefix){
   @if $include-parent-layout {
-    .#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i},
-    .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-#{$i} > * {
-      flex-basis: #{($i * 100% / $grid-column-count)};
+    .#{$grid-column-prefix}-#{$size-prefix},
+    [class^='#{$grid-column-prefix}-#{$size-prefix}-'],
+    [class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'],
+    .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$size-prefix}-'] > * {
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      padding: $grid-column-padding;
+    }
+    // Grid column specific definition for flexible column.
+    .#{$grid-column-prefix}-#{$size-prefix},
+    .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix} > *  {
+      // max-width: 100%; -- TODO: Are we certain we don't need this?
+      flex-grow: 1;
+      flex-basis: 0;
     }
   }
   @else {
-    .#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i} {
-      flex-basis: #{($i * 100% / $grid-column-count)};
+    // Grid column generic definitions.
+    .#{$grid-column-prefix}-#{$size-prefix},
+    [class^='#{$grid-column-prefix}-#{$size-prefix}-'],
+    [class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'] {
+      flex: 0 0 auto;
+      padding: $grid-column-padding;
+    }
+    // Grid column specific definition for flexible column.
+    .#{$grid-column-prefix}-#{$size-prefix} {
+      // max-width: 100%; -- TODO: Are we certain we don't need this?
+      flex-grow: 1;
+      flex-basis: 0;
     }
   }
-}
-// Grid column specific definitions for offset columns.
-@for $i from 0 through ($grid-column-count - 1) {
-  .#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-#{$i} {
-    @if $i == 0 {
-      margin-left: 0;
+  // Grid column specific definitions for predefined columns.
+  @for $i from 1 through $grid-column-count {
+    @if $include-parent-layout {
+      .#{$grid-column-prefix}-#{$size-prefix}-#{$i},
+      .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix}-#{$i} > * {
+        flex-basis: #{($i * 100% / $grid-column-count)};
+      }
     }
     @else {
-      margin-left: #{($i * 100% / $grid-column-count)};
+      .#{$grid-column-prefix}-#{$size-prefix}-#{$i} {
+        flex-basis: #{($i * 100% / $grid-column-count)};
+      }
+    }
+    // Offest definitions.
+    .#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-#{($i - 1)} {
+      @if ($i - 1) == 0 {
+        margin-left: 0;
+      }
+      @else {
+        margin-left: #{(($i - 1) * 100% / $grid-column-count)};
+      }
     }
   }
+  // Reordering definitions.
+  .#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-normal-suffix} {
+    order: initial;
+  }
+  .#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-first-suffix}  {
+    order: -999;
+  }
+  .#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-last-suffix} {
+    order: 999;
+  }
 }
-.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-normal-suffix} {
-  order: initial;
-}
-.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-first-suffix}  {
-  order: -999;
-}
-.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-last-suffix} {
-  order: 999;
-}
-// Medium screen breakpoint.
+// Definitions for smaller screens.
+@include generate-grid-size($grid-small-prefix);
+// Definitions for mediium screens.
 @media screen and (min-width: #{$grid-medium-breakpoint}){
-  @if $include-parent-layout {
-    // Grid column generic definitions for medium screens.
-    .#{$grid-column-prefix}-#{$grid-medium-prefix},
-    [class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'],
-    [class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-'], .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * {
-      box-sizing: border-box;
-      flex: 0 0 auto;
-      padding: $grid-column-padding;
-    }
-    // Grid column specific definition for flexible column.
-    .#{$grid-column-prefix}-#{$grid-medium-prefix},
-    .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix} > *  {
-      // max-width: 100%; -- TODO: Are we certain we don't need this?
-      flex-grow: 1;
-      flex-basis: 0;
-    }
-  }
-  @else {
-    // Grid column generic definitions for medium screens.
-    .#{$grid-column-prefix}-#{$grid-medium-prefix},
-    [class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'],
-    [class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-'] {
-      box-sizing: border-box;
-      flex: 0 0 auto;
-      padding: $grid-column-padding;
-    }
-    // Grid column specific definition for flexible column.
-    .#{$grid-column-prefix}-#{$grid-medium-prefix} {
-      // max-width: 100%; -- TODO: Are we certain we don't need this?
-      flex-grow: 1;
-      flex-basis: 0;
-    }
-  }
-  // Grid column specific definitions for predefined columns.
-  @for $i from 1 through $grid-column-count {
-    @if $include-parent-layout {
-      .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i},
-      .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-#{$i} > * {
-        flex-basis: #{($i * 100% / $grid-column-count)};
-      }
-    }
-    @else {
-      .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i} {
-        flex-basis: #{($i * 100% / $grid-column-count)};
-      }
-    }
-  }
-  // Grid column specific definitions for offset columns.
-  @for $i from 0 through ($grid-column-count - 1) {
-    .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-#{$i} {
-      @if $i == 0 {
-        margin-left: 0;
-      }
-      @else {
-        margin-left: #{($i * 100% / $grid-column-count)};
-      }
-    }
-  }
-  .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-normal-suffix} {
-    order: initial;
-  }
-  .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-first-suffix}  {
-    order: -999;
-  }
-  .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-last-suffix} {
-    order: 999;
-  }
+  @include generate-grid-size($grid-medium-prefix);
 }
-// Large screen breakpoint.
+// Definitions for large screens.
 @media screen and (min-width: #{$grid-large-breakpoint}){
-  @if $include-parent-layout {
-    // Grid column generic definitions for large screens.
-    .#{$grid-column-prefix}-#{$grid-large-prefix},
-    [class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'],
-    [class^='#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-'],
-    .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * {
-      box-sizing: border-box;
-      flex: 0 0 auto;
-      padding: $grid-column-padding;
-    }
-    // Grid column specific definition for flexible column.
-    .#{$grid-column-prefix}-#{$grid-large-prefix},
-    .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix} > *  {
-      // max-width: 100%; -- TODO: Are we certain we don't need this?
-      flex-grow: 1;
-      flex-basis: 0;
-    }
-  }
-  @else {
-    // Grid column generic definitions for large screens.
-    .#{$grid-column-prefix}-#{$grid-large-prefix},
-    [class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'],
-    [class^='#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-'] {
-      box-sizing: border-box;
-      flex: 0 0 auto;
-      padding: $grid-column-padding;
-    }
-    // Grid column specific definition for flexible column.
-    .#{$grid-column-prefix}-#{$grid-large-prefix} {
-      // max-width: 100%; -- TODO: Are we certain we don't need this?
-      flex-grow: 1;
-      flex-basis: 0;
-    }
-  }
-  // Grid column specific definitions for predefined columns.
-  @for $i from 1 through $grid-column-count {
-    @if $include-parent-layout {
-      .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i},
-      .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-#{$i} > * {
-        flex-basis: #{($i * 100% / $grid-column-count)};
-      }
-    }
-    @else {
-      .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i} {
-        flex-basis: #{($i * 100% / $grid-column-count)};
-      }
-    }
-  }
-  // Grid column specific definitions for offset columns.
-  @for $i from 0 through ($grid-column-count - 1) {
-    .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-#{$i} {
-      @if $i == 0 {
-        margin-left: 0;
-      }
-      @else {
-        margin-left: #{($i * 100% / $grid-column-count)};
-      }
-    }
-  }
-  .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-normal-suffix} {
-    order: initial;
-  }
-  .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-first-suffix}  {
-    order: -999;
-  }
-  .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-last-suffix} {
-    order: 999;
-  }
+  @include generate-grid-size($grid-large-prefix);
 }