adding

5 years ago · bde142138d
--- a/assets/iconmoon/PNG/checked.png
+++ b/assets/iconmoon/PNG/checked.png
--- a/assets/iconmoon/PNG/error.png
+++ b/assets/iconmoon/PNG/error.png
--- a/assets/iconmoon/PNG/minus.png
+++ b/assets/iconmoon/PNG/minus.png
--- a/assets/iconmoon/Read
+++ b/assets/iconmoon/Read
@ -0,0 +1,15 @@
 The *SVG* folder contains the icons you selected as separate SVG files.

 If you prefer using PNGs, PDFs, or CSS sprites, refer to the Preferences panel of the IcoMoon app before downloading your zip pack.

 *demo.html* lists the icons that you selected. To insert your icons as inline SVGs (with the <use> element), copy the <svg> element (that contains symbol definitions) from the source of the demo.html file, below your own HTML's <body> tag. After copying this SVG, you can reference your glyphs like the following:

 <svg class="icon icon-checked"><use xlink:href="#icon-checked"></use></svg>

 You can get this code from the SVG tab of the IcoMoon app, or by referring to the source of the demo.html file. To see how you can change the color/size of your icons using CSS, refer to the example provided in the *style.css* file.

 If you prefer to reference an external SVG (containing <defs>) instead of embedding it in HTML, you will need to use *svgxuse.js* in order to support IE 9+. In browsers that don't support referencing external SVGs (such as IE 9), this polyfill sends one HTTP request to fetch and cache all symbol definitions. See *demo-external-svg.html* for this approach. This demo references the *symbol-defs.svg* file and uses the aforementioned polyfill. Note that it must be hosted on a web server to work
 properly. Learn more about this polyfill here: https://github.com/Keyamoon/svgxuse

 You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

--- a/assets/iconmoon/SVG/checked.svg
+++ b/assets/iconmoon/SVG/checked.svg
@ -0,0 +1,5 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>checked</title>
 <path d="M26.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h2.5v-2.5c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 21c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 15c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 9c-0.276 0-0.5-0.224-0.5-0.5v-2.5h-2.5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM14.666 21.053c-0.184 0.185-0.483 0.185-0.668 0l-1.002-1.002c-0.002-0.003-0.001-0.007-0.003-0.009l-3.188-3.212c-0.185-0.184-0.185-0.483 0-0.668l1.002-1.003c0.185-0.185 0.484-0.185 0.669 0l2.86 2.881 6.014-6.013c0.184-0.185 0.483-0.185 0.668 0l1.002 1.003c0.186 0.185 0.186 0.484 0 0.669l-7.354 7.354zM20.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM14.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM8.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v2.5h2.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM8.5 6h-2.5v2.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5h3c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM5.5 11c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM5.5 17c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM11.5 26h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5zM17.5 26h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5z"></path>
 </svg>
--- a/assets/iconmoon/SVG/error.svg
+++ b/assets/iconmoon/SVG/error.svg
@ -0,0 +1,5 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>error</title>
 <path d="M26.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h2.5v-2.5c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 21c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 15c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 9c-0.276 0-0.5-0.224-0.5-0.5v-2.5h-2.5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM20.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM20.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM14.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM8.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v2.5h2.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM8.5 6h-2.5v2.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5h3c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM5.5 11c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM5.5 17c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM20.736 19.723l-1.014 1.014c-0.186 0.187-0.488 0.187-0.675 0l-2.87-2.87-2.87 2.87c-0.187 0.187-0.488 0.187-0.675 0l-1.013-1.014c-0.187-0.187-0.187-0.488 0-0.675l2.871-2.87-2.871-2.87c-0.187-0.186-0.187-0.488 0-0.675l1.013-1.013c0.187-0.187 0.488-0.187 0.675 0l2.87 2.87 2.87-2.87c0.187-0.187 0.489-0.187 0.675 0l1.014 1.013c0.186 0.187 0.186 0.489 0 0.675l-2.871 2.87 2.871 2.87c0.186 0.186 0.186 0.488 0 0.675zM11.5 26h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5z"></path>
 </svg>
--- a/assets/iconmoon/SVG/minus.svg
+++ b/assets/iconmoon/SVG/minus.svg
@ -0,0 +1,5 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>minus</title>
 <path d="M8.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-2.5h2.5c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM11.5 6h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5zM20.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM26.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h2.5v2.5c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 11c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 17c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 23c-0.276 0-0.5 0.224-0.5 0.5v2.5h-2.5c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM20.5 26h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM14.5 26h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM8.5 26h-2.5v-2.5c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM5.5 21c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5zM5.5 15c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5zM11.938 17h8c0.553 0 1-0.448 1-1 0-0.553-0.447-1-1-1h-8c-0.553 0-1 0.447-1 1 0 0.552 0.447 1 1 1z"></path>
 </svg>
--- a/assets/iconmoon/demo-external-svg.html
+++ b/assets/iconmoon/demo-external-svg.html
@ -0,0 +1,31 @@
 <!doctype html>
 <html>
 <head>
    <title>IcoMoon - SVG Icons</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="demo-files/demo.css">
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <header class="bgc1 clearfix">
 <div class="mhl">
    <p>SVG Icons - Generated by <a href="https://icomoon.io/app">IcoMoon</a></p><p><strong>Notice</strong>: This demo (along with "symbol-defs.svg" and "svgxuse.js" files) should be <b>hosted on a web server</b> to work properly.</p>
 </div>
 </header>
    <div class="clearfix mhl ptl">
        <h1 class="mvm mtn fgc1">Grid Size: 32</h1>
        <div class="glyph fs1">
            <div class="clearfix pbs">
                <svg class="icon icon-checked"><use xlink:href="symbol-defs.svg#icon-checked"></use></svg><span class="name"> icon-checked</span>
            </div>
        </div>
        <div class="glyph fs1">
            <div class="clearfix pbs">
                <svg class="icon icon-minus"><use xlink:href="symbol-defs.svg#icon-minus"></use></svg><span class="name"> icon-minus</span>
            </div>
        </div>
  </div>
 <script defer src="svgxuse.js"></script>
 </body>
 </html>
--- a/assets/iconmoon/demo-files/demo.css
+++ b/assets/iconmoon/demo-files/demo.css
@ -0,0 +1,147 @@
 body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #555;
  background: #fff;
 }
 h1 {
  font-size: 1.5em;
  font-weight: normal;
  box-shadow: 0 1px #ddd, 0 2px #fff, 0 3px #ddd;
 }
 small {
  font-size: .66666667em;
 }
 a {
  color: #e74c3c;
  text-decoration: none;
 }
 a:hover, a:focus {
  box-shadow: 0 1px #e74c3c;
 }
 .bshadow0, input {
  box-shadow: inset 0 -2px #e7e7e7;
 }
 input:hover {
  box-shadow: inset 0 -2px #ccc;
 }
 input, fieldset {
  font-size: 1em;
  margin: 0;
  padding: 0;
  border: 0;
 }
 input {
  color: inherit;
  line-height: 1.5;
  height: 1.5em;
  padding: .25em 0;
 }
 input:focus {
  outline: none;
  box-shadow: inset 0 -2px #449fdb;
 }
 .glyph {
  font-size: 16px;
  margin-right: 1.5em;
  float: left;
  width: 17em;
 }
 svg {
  color: #000;
 }
 .liga {
  width: 80%;
  width: calc(100% - 2.5em);
 }
 .talign-right {
  text-align: right;
 }
 .talign-center {
  text-align: center;
 }
 .bgc1 {
  background: #f1f1f1;
 }
 .fgc0 {
  color: #000;
 }
 .fgc1 {
  color: #999;
 }
 p {
  margin-top: 1em;
  margin-bottom: 1em;
 }
 .mvm {
  margin-top: .75em;
  margin-bottom: .75em;
 }
 .mtn {
  margin-top: 0;
 }
 .mtl, .mal {
  margin-top: 1.5em;
 }
 .mbl, .mal {
  margin-bottom: 1.5em;
 }
 .mal, .mhl {
  margin-left: 1.5em;
  margin-right: 1.5em;
 }
 .mhmm {
  margin-left: 1em;
  margin-right: 1em;
 }
 .ptl {
  padding-top: 1.5em;
 }
 .pbs, .pvs {
  padding-bottom: .25em;
 }
 .pvs, .pts {
  padding-top: .25em;
 }
 .unit {
  float: left;
 }
 .unitRight {
  float: right;
 }
 .size1of2 {
  width: 50%;
 }
 .size1of1 {
  width: 100%;
 }
 .clearfix:before, .clearfix:after {
  content: " ";
  display: table;
 }
 .clearfix:after {
  clear: both;
 }
 .hidden-true {
  display: none;
 }
 .textbox0 {
  width: 3em;
  background: #f1f1f1;
  padding: .25em .5em;
  line-height: 1.5;
  height: 1.5em;
 }
 .fs0 {
  font-size: 16px;
 }
 .fs1 {
  font-size: 32px;
 }
 .name {
  margin-left: .25em;
 }

--- a/assets/iconmoon/demo.html
+++ b/assets/iconmoon/demo.html
@ -0,0 +1,44 @@
 <!doctype html>
 <html>
 <head>
    <title>IcoMoon - SVG Icons</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="demo-files/demo.css">
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
 <symbol id="icon-checked" viewBox="0 0 32 32">
 <title>checked</title>
 <path d="M26.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h2.5v-2.5c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 21c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 15c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 9c-0.276 0-0.5-0.224-0.5-0.5v-2.5h-2.5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM14.666 21.053c-0.184 0.185-0.483 0.185-0.668 0l-1.002-1.002c-0.002-0.003-0.001-0.007-0.003-0.009l-3.188-3.212c-0.185-0.184-0.185-0.483 0-0.668l1.002-1.003c0.185-0.185 0.484-0.185 0.669 0l2.86 2.881 6.014-6.013c0.184-0.185 0.483-0.185 0.668 0l1.002 1.003c0.186 0.185 0.186 0.484 0 0.669l-7.354 7.354zM20.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM14.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM8.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v2.5h2.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM8.5 6h-2.5v2.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5h3c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM5.5 11c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM5.5 17c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM11.5 26h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5zM17.5 26h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5z"></path>
 </symbol>
 <symbol id="icon-minus" viewBox="0 0 32 32">
 <title>minus</title>
 <path d="M8.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-2.5h2.5c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM11.5 6h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5zM20.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM26.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h2.5v2.5c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 11c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 17c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 23c-0.276 0-0.5 0.224-0.5 0.5v2.5h-2.5c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM20.5 26h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM14.5 26h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM8.5 26h-2.5v-2.5c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM5.5 21c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5zM5.5 15c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5zM11.938 17h8c0.553 0 1-0.448 1-1 0-0.553-0.447-1-1-1h-8c-0.553 0-1 0.447-1 1 0 0.552 0.447 1 1 1z"></path>
 </symbol>
 </defs>
 </svg>

 <header class="bgc1 clearfix">
 <div class="mhl">
    <p>SVG Icons - Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
 </div>
 </header>
    <div class="clearfix mhl ptl">
        <h1 class="mvm mtn fgc1">Grid Size: 32</h1>
        <div class="glyph fs1">
            <div class="clearfix pbs">
                <svg class="icon icon-checked"><use xlink:href="#icon-checked"></use></svg><span class="name"> icon-checked</span>
            </div>
        </div>
        <div class="glyph fs1">
            <div class="clearfix pbs">
                <svg class="icon icon-minus"><use xlink:href="#icon-minus"></use></svg><span class="name"> icon-minus</span>
            </div>
        </div>
  </div>
 <script defer src="svgxuse.js"></script>
 </body>
 </html>
--- a/assets/iconmoon/selection.json
+++ b/assets/iconmoon/selection.json
@ -0,0 +1,85 @@
 {
  "IcoMoonType": "selection",
  "icons": [
    {
      "icon": {
        "paths": [
          "M848 864h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h80v-80c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 672c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 480c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 288c-8.832 0-16-7.168-16-16v-80h-80c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM469.312 673.696c-5.888 5.92-15.456 5.92-21.376 0l-32.064-32.064c-0.064-0.096-0.032-0.224-0.096-0.288l-102.016-102.784c-5.92-5.888-5.92-15.456 0-21.376l32.064-32.096c5.92-5.92 15.488-5.92 21.408 0l91.52 92.192 192.448-192.416c5.888-5.92 15.456-5.92 21.376 0l32.064 32.096c5.952 5.92 5.952 15.488 0 21.408l-235.328 235.328zM656 192h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16s-7.2 16-16 16zM464 192h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16s-7.2 16-16 16zM272 864h-96c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16s16 7.168 16 16v80h80c8.832 0 16 7.168 16 16s-7.168 16-16 16zM272 192h-80v80c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16h96c8.832 0 16 7.168 16 16s-7.168 16-16 16zM176 352c8.832 0 16 7.168 16 16v96c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16zM176 544c8.832 0 16 7.168 16 16v96c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16zM368 832h96c8.8 0 16 7.168 16 16s-7.2 16-16 16h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16zM560 832h96c8.8 0 16 7.168 16 16s-7.2 16-16 16h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "checked",
          "checkmark",
          "tick",
          "checkbox"
        ],
        "grid": 32
      },
      "attrs": [],
      "properties": {
        "id": 323,
        "order": 2,
        "prevSize": 32,
        "name": "checked"
      },
      "setIdx": 0,
      "setId": 0,
      "iconIdx": 322
    },
    {
      "icon": {
        "paths": [
          "M272 160h-96c-8.832 0-16 7.168-16 16v96c0 8.832 7.168 16 16 16s16-7.168 16-16v-80h80c8.832 0 16-7.168 16-16s-7.168-16-16-16zM368 192h96c8.8 0 16-7.168 16-16s-7.2-16-16-16h-96c-8.832 0-16 7.168-16 16s7.168 16 16 16zM656 160h-96c-8.832 0-16 7.168-16 16s7.168 16 16 16h96c8.8 0 16-7.168 16-16s-7.2-16-16-16zM848 160h-96c-8.832 0-16 7.168-16 16s7.168 16 16 16h80v80c0 8.832 7.168 16 16 16 8.8 0 16-7.168 16-16v-96c0-8.832-7.2-16-16-16zM848 352c-8.832 0-16 7.168-16 16v96c0 8.832 7.168 16 16 16 8.8 0 16-7.168 16-16v-96c0-8.832-7.2-16-16-16zM848 544c-8.832 0-16 7.168-16 16v96c0 8.832 7.168 16 16 16 8.8 0 16-7.168 16-16v-96c0-8.832-7.2-16-16-16zM848 736c-8.832 0-16 7.168-16 16v80h-80c-8.832 0-16 7.168-16 16s7.168 16 16 16h96c8.8 0 16-7.168 16-16v-96c0-8.832-7.2-16-16-16zM656 832h-96c-8.832 0-16 7.168-16 16s7.168 16 16 16h96c8.8 0 16-7.168 16-16s-7.2-16-16-16zM464 832h-96c-8.832 0-16 7.168-16 16s7.168 16 16 16h96c8.8 0 16-7.168 16-16s-7.2-16-16-16zM272 832h-80v-80c0-8.832-7.168-16-16-16s-16 7.168-16 16v96c0 8.832 7.168 16 16 16h96c8.832 0 16-7.168 16-16s-7.168-16-16-16zM176 672c8.832 0 16-7.168 16-16v-96c0-8.832-7.168-16-16-16s-16 7.168-16 16v96c0 8.832 7.168 16 16 16zM176 480c8.832 0 16-7.168 16-16v-96c0-8.832-7.168-16-16-16s-16 7.168-16 16v96c0 8.832 7.168 16 16 16zM382.016 544h256c17.696 0 32-14.336 32-32 0-17.696-14.304-32-32-32h-256c-17.696 0-32 14.304-32 32-0 17.664 14.304 32 32 32z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "minus",
          "remove",
          "delete"
        ],
        "grid": 32
      },
      "attrs": [],
      "properties": {
        "id": 326,
        "order": 5,
        "prevSize": 32,
        "name": "minus"
      },
      "setIdx": 0,
      "setId": 0,
      "iconIdx": 325
    }
  ],
  "height": 1024,
  "preferences": {
    "showGlyphs": true,
    "showCodes": true,
    "showQuickUse": true,
    "showQuickUse2": true,
    "showSVGs": true,
    "fontPref": {
      "prefix": "icon-",
      "metadata": {},
      "metrics": {
        "emSize": 1024,
        "baseline": 6.25,
        "whitespace": 50
      }
    },
    "imagePref": {
      "prefix": "icon-",
      "png": true,
      "useClassSelector": true,
      "color": 0,
      "bgColor": 16777215,
      "name": "icomoon",
      "classSelector": ".icon"
    },
    "historySize": 50
  }
 }
--- a/assets/iconmoon/style.css
+++ b/assets/iconmoon/style.css
@ -0,0 +1,16 @@
 .icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
 }

 /* ==========================================
 Single-colored icons can be modified like so:
 .icon-name {
  font-size: 32px;
  color: red;
 }
 ========================================== */
--- a/assets/iconmoon/svgxuse.js
+++ b/assets/iconmoon/svgxuse.js
@ -0,0 +1,230 @@
 /*!
 * @copyright Copyright (c) 2017 IcoMoon.io
 * @license   Licensed under MIT license
 *            See https://github.com/Keyamoon/svgxuse
 * @version   1.2.6
 */
 /*jslint browser: true */
 /*global XDomainRequest, MutationObserver, window */
 (function () {
    "use strict";
    if (typeof window !== "undefined" && window.addEventListener) {
        var cache = Object.create(null); // holds xhr objects to prevent multiple requests
        var checkUseElems;
        var tid; // timeout id
        var debouncedCheck = function () {
            clearTimeout(tid);
            tid = setTimeout(checkUseElems, 100);
        };
        var unobserveChanges = function () {
            return;
        };
        var observeChanges = function () {
            var observer;
            window.addEventListener("resize", debouncedCheck, false);
            window.addEventListener("orientationchange", debouncedCheck, false);
            if (window.MutationObserver) {
                observer = new MutationObserver(debouncedCheck);
                observer.observe(document.documentElement, {
                    childList: true,
                    subtree: true,
                    attributes: true
                });
                unobserveChanges = function () {
                    try {
                        observer.disconnect();
                        window.removeEventListener("resize", debouncedCheck, false);
                        window.removeEventListener("orientationchange", debouncedCheck, false);
                    } catch (ignore) {}
                };
            } else {
                document.documentElement.addEventListener("DOMSubtreeModified", debouncedCheck, false);
                unobserveChanges = function () {
                    document.documentElement.removeEventListener("DOMSubtreeModified", debouncedCheck, false);
                    window.removeEventListener("resize", debouncedCheck, false);
                    window.removeEventListener("orientationchange", debouncedCheck, false);
                };
            }
        };
        var createRequest = function (url) {
            // In IE 9, cross origin requests can only be sent using XDomainRequest.
            // XDomainRequest would fail if CORS headers are not set.
            // Therefore, XDomainRequest should only be used with cross origin requests.
            function getOrigin(loc) {
                var a;
                if (loc.protocol !== undefined) {
                    a = loc;
                } else {
                    a = document.createElement("a");
                    a.href = loc;
                }
                return a.protocol.replace(/:/g, "") + a.host;
            }
            var Request;
            var origin;
            var origin2;
            if (window.XMLHttpRequest) {
                Request = new XMLHttpRequest();
                origin = getOrigin(location);
                origin2 = getOrigin(url);
                if (Request.withCredentials === undefined && origin2 !== "" && origin2 !== origin) {
                    Request = XDomainRequest || undefined;
                } else {
                    Request = XMLHttpRequest;
                }
            }
            return Request;
        };
        var xlinkNS = "http://www.w3.org/1999/xlink";
        checkUseElems = function () {
            var base;
            var bcr;
            var fallback = ""; // optional fallback URL in case no base path to SVG file was given and no symbol definition was found.
            var hash;
            var href;
            var i;
            var inProgressCount = 0;
            var isHidden;
            var Request;
            var url;
            var uses;
            var xhr;
            function observeIfDone() {
                // If done with making changes, start watching for chagnes in DOM again
                inProgressCount -= 1;
                if (inProgressCount === 0) { // if all xhrs were resolved
                    unobserveChanges(); // make sure to remove old handlers
                    observeChanges(); // watch for changes to DOM
                }
            }
            function attrUpdateFunc(spec) {
                return function () {
                    if (cache[spec.base] !== true) {
                        spec.useEl.setAttributeNS(xlinkNS, "xlink:href", "#" + spec.hash);
                        if (spec.useEl.hasAttribute("href")) {
                            spec.useEl.setAttribute("href", "#" + spec.hash);
                        }
                    }
                };
            }
            function onloadFunc(xhr) {
                return function () {
                    var body = document.body;
                    var x = document.createElement("x");
                    var svg;
                    xhr.onload = null;
                    x.innerHTML = xhr.responseText;
                    svg = x.getElementsByTagName("svg")[0];
                    if (svg) {
                        svg.setAttribute("aria-hidden", "true");
                        svg.style.position = "absolute";
                        svg.style.width = 0;
                        svg.style.height = 0;
                        svg.style.overflow = "hidden";
                        body.insertBefore(svg, body.firstChild);
                    }
                    observeIfDone();
                };
            }
            function onErrorTimeout(xhr) {
                return function () {
                    xhr.onerror = null;
                    xhr.ontimeout = null;
                    observeIfDone();
                };
            }
            unobserveChanges(); // stop watching for changes to DOM
            // find all use elements
            uses = document.getElementsByTagName("use");
            for (i = 0; i < uses.length; i += 1) {
                try {
                    bcr = uses[i].getBoundingClientRect();
                } catch (ignore) {
                    // failed to get bounding rectangle of the use element
                    bcr = false;
                }
                href = uses[i].getAttribute("href")
                        || uses[i].getAttributeNS(xlinkNS, "href")
                        || uses[i].getAttribute("xlink:href");
                if (href && href.split) {
                    url = href.split("#");
                } else {
                    url = ["", ""];
                }
                base = url[0];
                hash = url[1];
                isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0;
                if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) {
                    // the use element is empty
                    // if there is a reference to an external SVG, try to fetch it
                    // use the optional fallback URL if there is no reference to an external SVG
                    if (fallback && !base.length && hash && !document.getElementById(hash)) {
                        base = fallback;
                    }
                    if (uses[i].hasAttribute("href")) {
                        uses[i].setAttributeNS(xlinkNS, "xlink:href", href);
                    }
                    if (base.length) {
                        // schedule updating xlink:href
                        xhr = cache[base];
                        if (xhr !== true) {
                            // true signifies that prepending the SVG was not required
                            setTimeout(attrUpdateFunc({
                                useEl: uses[i],
                                base: base,
                                hash: hash
                            }), 0);
                        }
                        if (xhr === undefined) {
                            Request = createRequest(base);
                            if (Request !== undefined) {
                                xhr = new Request();
                                cache[base] = xhr;
                                xhr.onload = onloadFunc(xhr);
                                xhr.onerror = onErrorTimeout(xhr);
                                xhr.ontimeout = onErrorTimeout(xhr);
                                xhr.open("GET", base);
                                xhr.send();
                                inProgressCount += 1;
                            }
                        }
                    }
                } else {
                    if (!isHidden) {
                        if (cache[base] === undefined) {
                            // remember this URL if the use element was not empty and no request was sent
                            cache[base] = true;
                        } else if (cache[base].onload) {
                            // if it turns out that prepending the SVG is not necessary,
                            // abort the in-progress xhr.
                            cache[base].abort();
                            delete cache[base].onload;
                            cache[base] = true;
                        }
                    } else if (base.length && cache[base]) {
                        setTimeout(attrUpdateFunc({
                            useEl: uses[i],
                            base: base,
                            hash: hash
                        }), 0);
                    }
                }
            }
            uses = "";
            inProgressCount += 1;
            observeIfDone();
        };
        var winLoad;
        winLoad = function () {
            window.removeEventListener("load", winLoad, false); // to prevent memory leaks
            tid = setTimeout(checkUseElems, 0);
        };
        if (document.readyState !== "complete") {
            // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty.
            window.addEventListener("load", winLoad, false);
        } else {
            // No need to add a listener if the document is already loaded, initialize immediately.
            winLoad();
        }
    }
 }());
--- a/assets/iconmoon/symbol-defs.svg
+++ b/assets/iconmoon/symbol-defs.svg
@ -0,0 +1,12 @@
 <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
 <symbol id="icon-checked" viewBox="0 0 32 32">
 <title>checked</title>
 <path d="M26.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h2.5v-2.5c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 21c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 15c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 9c-0.276 0-0.5-0.224-0.5-0.5v-2.5h-2.5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM14.666 21.053c-0.184 0.185-0.483 0.185-0.668 0l-1.002-1.002c-0.002-0.003-0.001-0.007-0.003-0.009l-3.188-3.212c-0.185-0.184-0.185-0.483 0-0.668l1.002-1.003c0.185-0.185 0.484-0.185 0.669 0l2.86 2.881 6.014-6.013c0.184-0.185 0.483-0.185 0.668 0l1.002 1.003c0.186 0.185 0.186 0.484 0 0.669l-7.354 7.354zM20.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM14.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM8.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v2.5h2.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM8.5 6h-2.5v2.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5h3c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM5.5 11c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM5.5 17c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM11.5 26h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5zM17.5 26h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5z"></path>
 </symbol>
 <symbol id="icon-minus" viewBox="0 0 32 32">
 <title>minus</title>
 <path d="M8.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-2.5h2.5c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM11.5 6h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5zM20.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM26.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h2.5v2.5c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 11c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 17c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 23c-0.276 0-0.5 0.224-0.5 0.5v2.5h-2.5c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM20.5 26h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM14.5 26h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM8.5 26h-2.5v-2.5c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM5.5 21c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5zM5.5 15c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5zM11.938 17h8c0.553 0 1-0.448 1-1 0-0.553-0.447-1-1-1h-8c-0.553 0-1 0.447-1 1 0 0.552 0.447 1 1 1z"></path>
 </symbol>
 </defs>
 </svg>
--- a/dist/crispy.css
+++ b/dist/crispy.css
--- a/dist/crispy.min.css
+++ b/dist/crispy.min.css
--- a/dist/example/index.html
+++ b/dist/example/index.html
@ -0,0 +1,812 @@
 <!doctype html>
 <html class="no-js" lang="en_EN">

 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
 	<title>Crispy</title>
 	<meta name="description" content="">
 	<meta name="viewport" content="width=device-width, initial-scale=1">



 	<link rel="stylesheet" href="styles.css">
 </head>

 <body>
 	<header id="header" class="header">
 		<div class="container">
 			<div class="grid">
 				<div class="col-12">
 					<div class="text-center">
                        <hgroup>
 							<a href="/">
                                <!--<svg class="icon header__logo" alt="Crisp" viewBox="0 0 100 100">
                                    <use xlink:href="/svg/icons.svg#chip" />
                                </svg>-->
                                <div class="header__title h1">
 								    Crispy Boilerplate<br />
                                    <span class="text-small header__small">0.9.9</span>
                                </div>
                            </a>
                            <div class="header__subtitle h5">
                                Less is More
                            </div>
 						</hgroup>
 					</div>
 				</div>
 			</div>
 		</div>
 	</header>
 	<a class="button button--up" href="#header">
 		<!--<svg class="icon" alt="up" viewBox="0 0 100 100">
 			<use xlink:href="/svg/icons.svg#triangle-up" />
 		</svg>-->
 	</a>
 	<div class="container">
 		<div class="grid">
 			<div class="col-12 col-sm-3">
 				<nav class="nav">
 					<ul class="group margin-top-0">
 						<li><a href="#getting-started">Getting Started</a></li>
 						<li><a href="#typography">Typography</a></li>
 						<li><a href="#components">Components</a></li>
 						<li><a href="#functions">Functions</a></li>
 						<li><a href="#helpers">Helpers</a></li>
 						<li><a href="#mixins">Mixins</a></li>
 						<li><a href="#reflex-grid">Reflex Grid</a></li>
 					</ul>
 				</nav>
 			</div>
 			<div class="col-12 col-sm-9">
 				<p>
                    Flat Sass Boilerplate gives you an amount of basic settings, components, helpers, mixins and functions.
                </p>
                <p>
                    The problem of most frameworks is they trying to hard adding a lot of styles
                    which has to be customized and documented if you used it for a Project.
                    Often these changes cause a loss of performance and raise the propability of errors.
                </p>
                <p>
                    Crispy Boilerplate uses also the following libraries:
                </p>
                <ul>
                    <li><a href="https://necolas.github.io/normalize.css/" target="_blank">normalize.css</a></li>
                    <li><a href="http://reflexgrid.com" target="_blank">reflex-grid</a></li>
                </ul>

                <h3>Coding Style</h3>
                <p>
                    The boilerplate uses as coding style <a href="http://getbem.com/" target="_blank">BEM</a>,
                    but as a more simpler idea of it. One of the benefits of BEM is that you create components and can reuse them.
                    But one the other hand it can be really strange if you overthinking it.
                </p>
                <h3>Not Fancy but Small</h3>
                <p>
                    Components are created to give you a structure and a basic set of styles and not to look fancy.
                    The idea is to extend each component and save time to write a bunch of extra CSS code and
                    therefore get more performance while minimize the causes of errors. Of Course is really Fancy to get more Performance and less Errors.
                </p>
                <h3>Include</h3>
                <p>
                    Components and Helpers are organizes as Mixins, that makes it a little easier to
                    to add Styles you need.
                </p>

                <!-- getting started -->
 				<hr class="margin-top-3">
                <h2 id="getting-started">Getting Started</h2>
                <h3>Installation</h3>
                <pre class="code"><code>npm install crispy-boilerplate</code></pre>
                <p>Main SCSS-file:</p>
                <pre class="code"><code>@import
    "crispy";</code></pre>
                <p>After this include mixins you need:</p>
                <pre class="code"><code>@include crispy__*()</code></pre>
                <p>To overwrite defaults simple add your own config-file before importing crispy:</p>
                <pre class="code"><code>@import
    "config",
    "crispy";</code></pre>

                <h3>Example</h3>
                <p>
                    You find an example in "/src/example", this is this documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.
                </p>
                <h4>Site</h4>
                <p>
                    Contains header, footer, partials that are used on a site or webapp. Header and footer are not classical components, there often more complex and have a special brand.
                </p>
                <h4>Templates</h4>
                <p>
                    Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components.
                </p>

 				<!-- typography -->
 				<hr class="margin-top-3">
 				<h2 id="typography" class="margin-top-1">
                    Typography
                </h2>

                <!-- abbr -->
 				<h3 class="h4 margin-top-2 margin-bottom-0">a</h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;a href=&quot;&quot;&gt;&lt;/a&gt;</code></pre>
 				<p>
 					Color of Text is set by <strong>$crispy__color-primary</strong>. <strong>Hover</strong> is set by
                    <strong>$crispy__color-text</strong>
 				</p>

 				<!-- abbr -->
 				<h3 class="h4 margin-top-2 margin-bottom-0">abbr</h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;abbr title=&quot;&quot;&gt;&lt;/abbr&gt;</code></pre>
 				<p>
 					Glossier viral occupy mixtape pok pok cornhole, <abbr title="vape affogato hella">vape affogato hella</abbr> knausgaard thundercats
 				</p>

 				<!-- blockquote -->
 				<h3 class="h4 margin-top-2 margin-bottom-0">blockquote</h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;blockquote&gt;&lt;/blockquote&gt;</code></pre>
 				<blockquote>
 					Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.
 				</blockquote>

                <!-- hr -->
 				<h3 class="h4 margin-top-2 margin-bottom-0">hr</h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;hr&gt;</code></pre>
                <p>
                    <hr>
                </p>

 				<!-- paragraph -->
 				<h3 class="h4 margin-top-2 margin-bottom-0">paragraph</h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;p&gt;&lt;/p&gt;</code></pre>
 				<p>
 					Glossier viral occupy mixtape pok pok.
 				</p>

                <!-- mark -->
 				<h3 class="h4 margin-top-2 margin-bottom-0">mark</h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;mark&gt;&lt;/mark&gt;</code></pre>
                <p>
                    Pug before they <mark>four loko</mark> Deep v bespoke
                </p>

 				<!-- list -->
 				<h3 class="h4 margin-top-2 margin-bottom-0">list</h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;ul&gt;
    &lt;li&gt;item 1&lt;/li&gt;
    &lt;li&gt;item 2
        &lt;ul&gt;
            &lt;li&gt;child item 1&lt;/li&gt;
            &lt;li&gt;child item 2&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
 &lt;/ul&gt;
 &lt;ol&gt;
    &lt;li&gt;item 1&lt;/li&gt;
    &lt;li&gt;item 2&lt;/li&gt;
 &lt;/ol&gt;
 &lt;dl&gt;
    &lt;dt&gt;defined title 1&lt;/dt&gt;
    &lt;dd&gt;defined item 1&lt;/dd&gt;
 &lt;/dl&gt;</code></pre>
 				<ul>
 					<li>item 1</li>
 					<li>
 						item 2
 						<ul>
 							<li>child item 1</li>
 							<li>child item 2</li>
 						</ul>
 					</li>
 				</ul>
 				<ol>
 					<li>item 1</li>
 					<li>item 2</li>
 				</ol>
 				<dl>
 					<dt>defined title 1</dt>
 					<dd>defined item 1</dd>
 				</dl>

 				<!-- components -->
 				<hr class="margin-top-3">
 				<h2 id="components" class="margin-top-1">
                    Components
                </h2>

 				<!-- components / button -->
 				<h3 class="h4 margin-top-2 margin-bottom-0">
                    Button
                </h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code margin-top-1"><code>&lt;button class=&quot;button&quot;&gt;&lt;/button&gt;
 &lt;button class=&quot;button button--wide&quot;&gt;&lt;/button&gt;</code></pre>
 				<button class="button">Default</button>
 				<button class="button button--wide margin-top-1">Info</button>

                <!-- components / code -->
 				<h3 class="h4 margin-top-2 margin-bottom-0">
                    Code
                </h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code margin-top-1"><code>&lt;pre class=&quot;code&quot;&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;</code></pre>

 				<!-- components / group -->
 				<h3 class="h4 margin-top-2 margin-bottom-0">
                    Group
                </h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;nav&gt;
    &lt;ul class=&quot;group&quot;&gt;
        &lt;li class=&quot;group__item&quot;&gt;first item&lt;/li&gt;
        &lt;li class=&quot;group__item&quot;&gt;second item&lt;/li&gt;
        &lt;li class=&quot;group__item&quot;&gt;third item&lt;/li&gt;
    &lt;/ul&gt;
 &lt;/nav&gt;</code></pre>
 				<div class="panel panel__inner margin-bottom-1">
 					<nav>
 						<ul class="group">
 							<li class="group__item">first item</li>
 							<li class="group__item">second item</li>
 							<li class="group__item">third item</li>
 						</ul>
 					</nav>
 				</div>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;nav&gt;
    &lt;ul class=&quot;group group--horizontal group--separate&quot;&gt;
        &lt;li class=&quot;group__item&quot;&gt;first item&lt;/li&gt;
        &lt;li class=&quot;group__item&quot;&gt;second item&lt;/li&gt;
        &lt;li class=&quot;group__item&quot;&gt;third item&lt;/li&gt;
    &lt;/ul&gt;
 &lt;/nav&gt;</code></pre>
 				<div class="panel panel__inner">
 					<nav>
 						<ul class="group group--horizontal group--separate">
 							<li class="group__item">first item</li><li class="group__item">second item</li><li class="group__item">third item</li>
 						</ul>
 					</nav>
 				</div>

 				<!-- components / heading -->
 				<h3 class="h4 margin-top-2 margin-bottom-0">
                    Heading
                </h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;h2&gt;&lt;/h2&gt;
 &lt;h2 class="h3"&gt;&lt;/h2&gt;</code></pre>
 				<h4 class="h6">Sass:</h4>
 				<pre class="code"><code>$crispy__heading__font-sizes: (
    'h1': 40px,
    'h2': 36px,
    'h3': 32px,
    'h4': 28px,
    'h5': 24px,
    'h6': 20px
 ) !default;</code></pre>

 				<h1>Heading h1</h1>
 				<h2>Heading h1</h2>
 				<h3>Heading h1</h3>
 				<h4>Heading h1</h4>
 				<h5>Heading h1</h5>
 				<h6>Heading h1</h6>

 				<!-- components / hero -->
 				<h3 class="h4 margin-top-2 margin-bottom-0">
                    Hero
                </h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;div class=&quot;hero hero--bottom&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre>
 				<div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>

                <!-- components / panel -->
                <h3 class="h4 margin-top-2 margin-bottom-0">
                    Panel
                </h3>
                <h4 class="h6">Html:</h4>
                <pre class="code"><code>&lt;div class=&quot;panel&quot;&gt;
    &lt;div class=&quot;panel__inner&quot;&gt;
        Lorem Ipsum
    &lt;/div&gt;
 &lt;/div&gt;</code></pre>
                <div class="panel">
                    <div class="panel__inner">
                        Lorem Ipsum
                    </div>
                </div>

 				<!-- components / modal -->
 				<h3 class="h4 margin-top-3 margin-bottom-0">
                    Modal
                </h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;div class=&quot;modal modal--bottom width-100&quot;&gt;
     &lt;div class=&quot;panel&quot;&gt;
        &lt;div class=&quot;panel__inner&quot;&gt;
            Lorem Ipsum
        &lt;/div&gt;
    &lt;/div&gt;
 &lt;/div&gt;</code></pre>
 				<div style="position: relative; width: 100%; height: 200px; border: 1px dotted black;">
                    <div class="modal modal--top-left">
 						<div class="panel">
 							<div class="panel__inner">
 								.modal--top-left
 							</div>
 						</div>
 					</div>
                    <div class="modal modal--top-right">
 						<div class="panel">
 							<div class="panel__inner">
 								.modal--top-right
 							</div>
 						</div>
 					</div>
 					<div class="modal">
 						<div class="panel">
 							<div class="panel__inner">
 								.modal
 							</div>
 						</div>
 					</div>
                    <div class="modal modal--bottom-left">
 						<div class="panel">
 							<div class="panel__inner">
 								.modal--bottom-left
 							</div>
 						</div>
 					</div>
                    <div class="modal modal--bottom-right">
 						<div class="panel">
 							<div class="panel__inner">
 								.modal--bottom-right
 							</div>
 						</div>
 					</div>
 				</div>

 				<!-- components / table -->
 				<h3 class="h4 margin-top-2 margin-bottom-0">
                    Table
                </h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;table class=&quot;table table--striped&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
 &lt;/table&gt;</code></pre>

 				<table class="table table--striped margin-bottom-2">
 					<thead>
 						<tr>
 							<th>name</th>
 							<th>age</th>
 						</tr>
 					</thead>
 					<tbody>
 						<tr>
 							<td>Mr. Brown</td>
 							<td>43</td>
 						</tr>
 						<tr>
 							<td>Mr. Magenta</td>
 							<td>32</td>
 						</tr>
 						<tr>
 							<td>Mr. White</td>
 							<td>45</td>
 						</tr>
 					</tbody>
 				</table>

                <!-- components / field / checkbox -->
 				<h3 class="h4 margin-top-0 margin-bottom-0">
                    Checkbox
                </h3>
                <div class="field">
                    <input id="field__checkbox__1" class="field__checkbox" type="checkbox" name="field__checkbox__1" value="true" />
                    <label for="field__checkbox__1" class="field__label">
                        <svg class="icon field__checkbox__unchecked" aria-hidden="true">
                            <use xlink:href="symbol-defs.svg#icon-minus"></use>
                        </svg>
                        <svg class="icon field__checkbox__checked" aria-hidden="true">
                            <use xlink:href="symbol-defs.svg#icon-checked"></use>
                        </svg>
                        checkbox 1
                    </label>
                </div>
                <div class="field field--error">
                    <input id="field__checkbox__2" class="field__checkbox" type="checkbox" name="field__checkbox__2" value="true" />
                    <label for="field__checkbox__2" class="field__label">
                        <svg class="icon field__checkbox__unchecked" aria-hidden="true">
                            <use xlink:href="symbol-defs.svg#icon-minus"></use>
                        </svg>
                        <svg class="icon field__checkbox__checked" aria-hidden="true">
                            <use xlink:href="symbol-defs.svg#icon-checked"></use>
                        </svg>
                        checkbox 1
                    </label>
                    <div class="field__panel">
                        error item 1
                    </div>
                </div>

                <!-- components / field / radio -->
 				<h3 class="h4 margin-top-0x margin-bottom-0x">
                    Radio
                </h3>
                <div class="field">
                    <input id="field__radio__1" class="field__radio" type="radio" name="field__radio__1[]" value="true" />
                    <label for="field__radio__1" class="field__label">
                        <svg class="icon field__radio__unchecked" aria-hidden="true">
                            <use xlink:href="symbol-defs.svg#icon-minus"></use>
                        </svg>
                        <svg class="icon field__radio__checked" aria-hidden="true">
                            <use xlink:href="symbol-defs.svg#icon-checked" />
                        </svg>
                        radio item 1
                    </label><br />
                    <input id="field__radio__2" class="field__radio" type="radio" name="field__radio__1[]" value="true" />
                    <label for="field__radio__2" class="field__label">
                        <svg class="icon field__radio__unchecked" aria-hidden="true">
                            <use xlink:href="symbol-defs.svg#icon-minus"></use>
                        </svg>
                        <svg class="icon field__radio__checked" aria-hidden="true">
                            <use xlink:href="symbol-defs.svg#icon-checked" />
                        </svg>
                        radio item 2
                    </label>
                </div>

                <!-- radio / error -->
                <div class="field field--error">
                    <input id="field__radio__3" class="field__radio" type="radio" name="field__radio__2[]" value="true" />
                    <label for="field__radio__3" class="field__label">
                        <svg class="icon field__radio__unchecked" aria-hidden="true">
                            <use xlink:href="symbol-defs.svg#icon-minus"></use>
                        </svg>
                        <svg class="icon field__radio__checked" aria-hidden="true">
                            <use xlink:href="symbol-defs.svg#icon-checked" />
                        </svg>
                        radio item 1
                    </label><br />
                    <input id="field__radio__4" class="field__radio" type="radio" name="field__radio__2[]" value="true" />
                    <label for="field__radio__4" class="field__label">
                        <svg class="icon field__radio__unchecked" aria-hidden="true">
                            <use xlink:href="symbol-defs.svg#icon-minus"></use>
                        </svg>
                        <svg class="icon field__radio__checked" aria-hidden="true">
                            <use xlink:href="symbol-defs.svg#icon-checked" />
                        </svg>
                        radio item 2
                    </label>
                    <div class="field__panel">
                        error item 1
                    </div>
                </div>

                <!-- components / field / select -->
 				<h3 class="h4 margin-top-0x margin-bottom-0x">
                    Select
                </h3>
                <div class="field">
                    <label class="field__label">
                        Select Item
                        <select class="field__select">
                            <option>select item 1</option>
                            <option>select item 2</option>
                            <option>select item 3</option>
                        </select>
                    </label>
                </div>
                <div class="field field--error">
                    <label class="field__label">
                        Select Item
                        <select class="field__select">
                            <option>select item 1</option>
                            <option>select item 2</option>
                            <option>select item 3</option>
                        </select>
                        <div class="field__panel">
                            error item 1
                        </div>
                    </label>
                </div>

                <!-- components / field / input textarea -->
 				<h3 class="h4 margin-top-0x margin-bottom-0x">
                    Input / Textarea
                </h3>
                <div class="field">
                    <input class="field__text" type="text" />
                </div>
                <div class="field field--valid">
                    <label class="field__label">
                        Text
                        <input type="text" class="field__text" />
                    </label>
                    <div class="field__panel">
                        error item 1
                    </div>
                </div>
                <div class="field field--error">
                    <label class="field__label">
                        Text
                        <input type="text" class="field__text" />
                    </label>
                    <div class="field__panel">
                        error item 1
                    </div>
                </div>
                <div class="field">
                    <label class="field__label">
                        Textarea
                        <textarea class="field__text"></textarea>
                    </label>
                </div>
                <div class="field field--error">
                    <label class="field__label">
                        Textarea
                        <textarea class="field__text"></textarea>
                    </label>
                    <div class="field__panel">
                        error item 1
                    </div>
                </div>

 				<!-- functions -->
 				<hr class="margin-top-3x">
 				<h2 id="functions" class="margin-top-1x">
                    Functions
                </h2>

 				<!-- functions / toEm / toRem -->
 				<h3 class="h4 margin-top-0x margin-bottom-0x">
                    toEm()<br>
                    toRem()
                </h3>
 				<h4 class="h6 margin-top-1x">Sass:</h4>
 				<pre class="code"><code>toEm(5px);
 toEm(10px 10px 0 0);
 toRem(10px 10px 0 0);
 </code></pre>
 				<p>
 					Returns <strong>em</strong> and <strong>rem</strong>, accepts px and unitless values.
 				</p>

 				<!-- functions / stripUnit -->
 				<h3 class="h4 margin-top-0x margin-bottom-0x">
                    stripUnit()
                </h3>
 				<h4 class="h6 margin-top-1x">Sass:</h4>
 				<pre class="code"><code>toEm(10px);</code></pre>
 				<p>
 					Returns value without unit.
 				</p>

 				<!-- helpers -->
 				<hr class="margin-top-3x">
 				<h2 id="helpers" class="margin-top-1x">
                    Helpers
                </h2>

 				<!-- helpers / align -->
 				<h3 class="h4 margin-top-1x">
                    Float
                </h3>
 				<pre class="code">&lt;div class=&quot;text-left&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;text-center&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;text-right&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;text-justify&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;float-left&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;float-center&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;float-none&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;center&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;</code></pre>

 				<!-- helpers / margin -->
 				<h3 class="h4 margin-top-1x">
                    Margin
                </h3>
 				<p>
 					margin-top and -bottom from <strong>$crispy__margin</strong> as px.
 				</p>
 				<pre class="code">&lt;div class=&quot;panel margin-bottom-0&quot;&gt;margin-bottom-0&lt;/div&gt;
 &lt;div class=&quot;margin-bottom-1&quot;&gt;margin-bottom-1&lt;/div&gt;
 &lt;div class=&quot;margin-bottom-2&quot;&gt;margin-bottom-2&lt;/div&gt;
 &lt;div class=&quot;margin-bottom-3&quot;&gt;margin-bottom-3&lt;/div&gt;
 &lt;div class=&quot;margin-bottom-4&quot;&gt;margin-bottom-4&lt;/div&gt;
 &lt;div class=&quot;margin-bottom-5&quot;&gt;margin-bottom-5&lt;/div&gt;</code></pre>
 				<div class="panel panel__inner margin-bottom-0">margin-bottom-0</div>
 				<div class="panel panel__inner margin-bottom-1">margin-bottom-1</div>
 				<div class="panel panel__inner margin-bottom-2">margin-bottom-2</div>
 				<div class="panel panel__inner margin-bottom-3">margin-bottom-3</div>
                <div class="panel panel__inner margin-bottom-4">margin-bottom-4</div>
                <div class="panel panel__inner margin-bottom-5">margin-bottom-5</div>

 				<!-- helpers / media -->
 				<h3 class="h4 margin-top-1">
                    Media
                </h3>
 				<pre class="code"><code>&lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;
 &lt;figure&gt;
    &lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;
    &lt;figcaption class=&quot;text-center&quot;&gt;Lorem Ipsum&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;div class=&quot;video-responsive&quot; style=&quot;height: 280px;&quot;&gt;
    &lt;iframe src=&quot;https://giphy.com/embed/13XW2MJE0XCoM0&quot; width=&quot;480&quot; height=&quot;361&quot;&gt;&lt;/iframe&gt;
 &lt;/div&gt;</code></pre>
 				<div class="grid">
 					<div class="col-6">
 						<img class="img-responsive" src="https://picsum.photos/400" />
 					</div>
 					<div class="col-6">
 						<figure>
 							<img class="img-responsive" src="https://picsum.photos/400" />
 							<figcaption class="text-center">Lorem Ipsum</figcaption>
 						</figure>
 					</div>
 				</div>
 				<div class="grid">
 					<div class="col-6">
 						<div class="video-responsive" style="height: 280px;">
 							<iframe src="https://giphy.com/embed/13XW2MJE0XCoM0" width="480" height="361" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
 						</div>
 					</div>
 				</div>

                <!-- helpers / text -->
                <h3 class="h4 margin-top-1x">
                    Text
                </h3>
                <pre class="code">&lt;div class=&quot;text-left&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;text-center&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;text-right&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;text-justify&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;text-italic&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;text-normal&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;text-bold&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;text-uppercase&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;text-lowercase&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;text-small&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;text-crossed&quot;&gt;&lt;/div&gt;</code></pre>

                <p>
                    Also there are classes for,
                </p>
                <ul>
                    <li>text-* with $crispy__font-sizes for "font-size"</li>
                    <li>text-* with $crispy__colors for "color"</li>
                    <li>background-* with $crispy__font-sizes for "background-color"</li>
                </ul>

 				<!-- helpers / media -->
 				<h3 class="h4 margin-top-1x">
                    Width
                </h3>
 				<pre class="code"><code>&lt;div class=&quot;panel width-25&quot;&gt;width-25&lt;/div&gt;
 &lt;div class=&quot;width-50&quot;&gt;width-50&lt;/div&gt;
 &lt;div class=&quot;width-75&quot;&gt;width-75&lt;/div&gt;
 &lt;div class=&quot;width-100&quot;&gt;width-100&lt;/div&gt;</code></pre>
 				<div class="panel panel__inner width-25 margin-bottom-1">width-25</div>
 				<div class="panel panel__inner width-50 margin-bottom-1">width-50</div>
 				<div class="panel panel__inner width-75 margin-bottom-1">width-75</div>
 				<div class="panel panel__inner width-100 margin-bottom-1">width-100</div>

 				<!-- mixins -->
 				<hr class="margin-top-3x">
 				<h2 id="mixins" class="margin-top-1x">
                    Mixins
                </h2>

 				<!-- mixins / media-queries -->
 				<h3 class="h4 margin-top-1x">
                    Media Queries
                </h3>
 				<p>
 					These <strong>@mixins</strong> were used with the Breakpoints from the <a href="#reflex-grid">Reflex Grid</a>.
 				</p>
 				<ul>
 					<li><strong>xs</strong> 576px</li>
 					<li><strong>sm</strong> 768px</li>
 					<li><strong>md</strong> 992px</li>
 					<li><strong>lg</strong> 1200px</li>
 					<li><strong>xlg</strong> 1600px</li>
 				</ul>
 				<h4 class="h6 margin-top-1x">Html:</h4>
 				<pre class="code"><code>&lt;div class=&quot;sm&quot;&gt;sm&lt;/div&gt;
 &lt;div class=&quot;md&quot;&gt;md&lt;/div&gt;
 &lt;div class=&quot;md-only&quot;&gt;md-only&lt;/div&gt;
 &lt;div class=&quot;lg-only&quot;&gt;lg-only&lt;/div&gt;</pre></code>
 				<h4 class="h6 margin-top-1x">Sass:</h4>
 				<pre class="code"><code>.sm, .md, .md-only, .lg-only {
    display: none;
 }

 .sm {
    @include crispy__media-sm() {
        display: block;
    }
 }

 .md {
    @include crispy__media-md() {
        display: block;
    }
 }

 .md-only {
    @include crispy__media-md-only() {
        display: block;
    }
 }

 .lg-only {
    @include crispy__media-lg-only() {
        display: block;
    }
 }</code></pre>
 				<div class="grid">
 					<div class="col-3">
 						<div class="panel panel__inner sm margin-bottom-1">sm</div>
 					</div>
 					<div class="col-3">
 						<div class="panel panel__inner md margin-bottom-1">md</div>
 					</div>
 					<div class="col-3">
 						<div class="panel panel__inner md-only margin-bottom-1">md-only</div>
 					</div>
 					<div class="col-3">
 						<div class="panel panel__inner lg-only margin-bottom-1">lg-only</div>
 					</div>
 				</div>

 				<!-- Reflex Grid -->
 				<hr class="margin-top-3x">
 				<h2 id="reflex-grid" class="margin-top-1x">
 						Reflex Grid
 					</h2>
 				<p>
 					The <strong>Reflex Grid</strong> is from <a target="_blank" href="http://lendmeyourear.net">Lee Jordan</a>. I have build a few helper for media-queries. <strong>Reflex Grid </strong> is lightweight, simple and uses a flexbox grid with cross browser
 					support, an inline-block fallback.
 				</p>
 				<p>
 					Documentation: <a target="_blank" href="http://reflexgrid.com/docs/">http://reflexgrid.com/docs/</a><br /> Github: <a target="_blank" href="https://github.com/leejordan/reflex">https://github.com/leejordan/reflex</a>
 				</p>
 			</div>
 		</div>
 	</div>

    <footer class="footer">
 		<div class="container">
 			<div class="grid">
 				<div class="col-12">
 					<div class="text-center">
 						<div class="group group--horizontal">
                            <ul class="group__section group__section--separate">
                                <li class="group__item"><a href="/imprint.html">Imprint</a></li><li class="group__item"><a href="/privacy-policy.html">Privacy Policy</a></li>
                            </ul>
                        </div>
 					</div>
 				</div>
 			</div>
 		</div>
 	</footer>

 </body>
 </html>
--- a/dist/example/styles.css
+++ b/dist/example/styles.css
--- a/dist/example/symbol-defs.svg
+++ b/dist/example/symbol-defs.svg
@ -0,0 +1,12 @@
 <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
 <symbol id="icon-checked" viewBox="0 0 32 32">
 <title>checked</title>
 <path d="M26.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h2.5v-2.5c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 21c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 15c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 9c-0.276 0-0.5-0.224-0.5-0.5v-2.5h-2.5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM14.666 21.053c-0.184 0.185-0.483 0.185-0.668 0l-1.002-1.002c-0.002-0.003-0.001-0.007-0.003-0.009l-3.188-3.212c-0.185-0.184-0.185-0.483 0-0.668l1.002-1.003c0.185-0.185 0.484-0.185 0.669 0l2.86 2.881 6.014-6.013c0.184-0.185 0.483-0.185 0.668 0l1.002 1.003c0.186 0.185 0.186 0.484 0 0.669l-7.354 7.354zM20.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM14.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM8.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v2.5h2.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM8.5 6h-2.5v2.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5h3c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM5.5 11c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM5.5 17c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM11.5 26h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5zM17.5 26h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5z"></path>
 </symbol>
 <symbol id="icon-minus" viewBox="0 0 32 32">
 <title>minus</title>
 <path d="M8.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-2.5h2.5c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM11.5 6h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5zM20.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM26.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h2.5v2.5c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 11c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 17c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 23c-0.276 0-0.5 0.224-0.5 0.5v2.5h-2.5c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM20.5 26h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM14.5 26h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM8.5 26h-2.5v-2.5c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM5.5 21c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5zM5.5 15c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5zM11.938 17h8c0.553 0 1-0.448 1-1 0-0.553-0.447-1-1-1h-8c-0.553 0-1 0.447-1 1 0 0.552 0.447 1 1 1z"></path>
 </symbol>
 </defs>
 </svg>
--- a/example/_components.scss
+++ b/example/_components.scss
@ -1,3 +0,0 @@
@import
    'components/button'
    'components/nav';
--- a/example/_site.scss
+++ b/example/_site.scss
@ -1,3 +0,0 @@
@import
    'site/header'
    'site/footer';
--- a/example/_templates.scss
+++ b/example/_templates.scss
@ -1,2 +0,0 @@
@import
    'templates/home';
--- a/example/example.scss
+++ b/example/example.scss
@ -1,25 +0,0 @@
@import
    'config',
    'crispy',
    'site',
    'components',
    'templates';

 // components
@include crispy__button();
@include crispy__heading();
@include crispy__table();

 // helpers
@include crispy__float();
@include crispy__spacing();
@include crispy__media();
@include crispy__text();
@include crispy__width();

 // example
@include site__header();
@include site__footer();
@include components__button();
@include components__nav();
@include templates__home();
--- a/mix-manifest.json
+++ b/mix-manifest.json
@ -1,3 +1,5 @@
 {
    "/dist/crispy.min.css": "/dist/crispy.min.css"
    "/dist/crispy.css": "/dist/crispy.css",
    "/dist/example/styles.css": "/dist/example/styles.css",
    "/dist/example/symbol-defs.svg": "/dist/example/symbol-defs.svg"
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,28 +1,32 @@
 {
    "name": "crispy-boilerplate",
    "version": "1.2.3",
    "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions",
    "repository": {
        "type": "git",
        "url": "git@gitlab.tentakelfabrik.de:tentakelfabrik/crispy-boilerplate.git"
    },
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "author": "Björn Hase",
    "license": "MIT",
    "devDependencies": {
        "cross-env": "^5.2.0",
        "laravel-mix": "^2.1.14",
        "postcss-css-variables": "^0.11.0"
    },
    "dependencies": {
        "normalize-scss": "^7.0.1"
    }
  "name": "crispy",
  "version": "2.0.0",
  "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions",
  "repository": {
    "type": "git",
    "url": "git@gitlab.tentakelfabrik.de:tentakelfabrik/crispy.git"
  },
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "author": "Björn Hase",
  "license": "MIT",
  "devDependencies": {
    "cross-env": "^5.2.1",
    "laravel-mix": "^5.0.0",
    "postcss-css-variables": "^0.11.0",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.23.0",
    "sass-loader": "^8.0.0"
  },
  "dependencies": {
    "normalize-scss": "^7.0.1",
    "reflex-grid": "^2.0.4"
  }
 }
--- a/src/scss/_core.scss
+++ b/src/scss/_core.scss
@ -10,8 +10,6 @@
 *
 */

@import 'normalize';

@mixin crispy__core() {
    html {
        font-size: 100%;
@ -89,7 +87,7 @@
    ol,
    ul {
        padding: 0;
        margin: toEm(0 0 $crispy__spacing $crispy__spacing);
        margin: toEm(0 0 $crispy__spacing ($crispy__spacing * 2));
    }

    ol ol,
@ -132,7 +130,7 @@

    // body
    body {
        font-family: $crispy__font-family;
        font-family: $crispy__font-family-primary;
        font-weight: normal;
        line-height: $crispy__golden-ratio;
        color: $crispy__color-text;
--- a/src/scss/_functions.scss
+++ b/src/scss/_functions.scss
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@ -34,7 +34,7 @@
 *
 *
 */
@mixin crispy__reset-list() {
@mixin crispy__clear_list() {
    list-style: none;
    margin: 0;
    padding: 0;
--- a/src/scss/_modifiers.scss
+++ b/src/scss/_modifiers.scss
@ -179,7 +179,7 @@
        border: 0 !important;
    }

    .radiusless
    .radiusless {
        border-radius: 0 !important;
    }

@ -210,35 +210,35 @@
    }

    @for $i from 0 through $crispy__spacing__steps {
        .margin-top-#{($i + 1)} {
        .margin-top-#{$i} {
            margin-top: ($crispy__spacing * $i) !important;
        }

        .margin-left-#{($i + 1)} {
        .margin-left-#{$i} {
            margin-left: ($crispy__spacing * $i) !important;
        }

        .margin-bottom-#{($i + 1)} {
        .margin-bottom-#{$i} {
            margin-bottom: ($crispy__spacing * $i) !important;
        }

        .margin-right-#{($i + 1)} {
            margin-right: ($crispy__spacing * ($i)) !important;
        .margin-right-#{$i} {
            margin-right: ($crispy__spacing * $i) !important;
        }

        .padding-top-#{($i + 1)} {
        .padding-top-#{$i} {
            padding-top: ($crispy__spacing * $i) !important;
        }

        .padding-left-#{($i + 1)} {
        .padding-left-#{$i} {
            padding-left: ($crispy__spacing * $i) !important;
        }

        .padding-bottom-#{($i + 1)} {
        .padding-bottom-#{$i} {
            padding-bottom: ($crispy__spacing * $i) !important;
        }

        .padding-right-#{($i + 1)} {
        .padding-right-#{$i} {
            padding-right: ($crispy__spacing * $i) !important;
        }
    }
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@ -1,5 +1,5 @@
@import
    'functions/units';
    'functions';

 /**
 * Variables
@ -16,12 +16,8 @@
 $crispy__font-size: 16px !default;
 $crispy__golden-ratio: 1.618 !default;

 $crispy__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;

 $crispy__family-primary: $family-sans-serif !default
 $crispy__family-secondary: $family-sans-serif !default
 $crispy__family-code: $family-monospace !default

 $crispy__font-family-primary: Arial, Helvetica, Neue Helvetica, sans-serif !default;
 $crispy__font-family-monospace: Arial, Helvetica, Neue Helvetica, sans-serif !default;
 $crispy__direction: ltr !default;

 // spacing
@ -40,15 +36,17 @@ $crispy__color-text: #363636 !default;
 $crispy__color-border: #d0d0d0 !default;
 $crispy__color-background: #ffffff !default;

 $crispy__color-panel: #d0d0d0 !default;

 $crispy__color-link: #ffffff !default;
 $crispy__color-link-hover: #ffffff !default;
 $crispy__color-link-visited: $purple !default;
 $crispy__color-link-focus: $grey-darker !default;
 $crispy__color-link-active: $grey-darker !default;
 $crispy__color-link-visited: #ffffff !default;
 $crispy__color-link-focus: #ffffff !default;
 $crispy__color-link-active: #ffffff !default;

 // borders
 $crispy__border-radius: 0 !default;
 $cirspy__border: 1px solid $crispy__color-border !default;
 $crispy__border: 1px solid $crispy__color-border !default;

 // breakpoints
 $crispy__xs: 576px !default;
--- a/src/all.scss
+++ b/src/all.scss
@ -0,0 +1,26 @@
@import
    'crispy';

@include crispy__core();
@include crispy__modifiers();

@include crispy__button();
@include crispy__code();

@include crispy__group();
@include crispy__heading();
@include crispy__hero();
@include crispy__icon();
@include crispy__media();
@include crispy__modal();

@include crispy__field();
@include crispy__field__label();
@include crispy__field__checkbox();
@include crispy__field__radio();
@include crispy__field__select();
@include crispy__field__text();
@include crispy__field__panel();

@include crispy__panel();
@include crispy__table();
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
--- a/src/scss/components/_code.scss
+++ b/src/scss/components/_code.scss
--- a/src/scss/components/_field.scss
+++ b/src/scss/components/_field.scss
@ -30,10 +30,14 @@ $crispy__field__input__color: $crispy__color-text !default;
@mixin crispy__field() {
    .field {
        margin: $crispy__field__margin;

        .icon {
            vertical-align: top;
        }
    }

    // basic style for input elements, will be used to @extend
    .field__input {
    .field__text, .field__select, .field__select {
        display: block;
        width: 100%;
        line-height: $crispy__golden-ratio;
@ -41,6 +45,6 @@ $crispy__field__input__color: $crispy__color-text !default;
        color: $crispy__field__input__color;
        appearance: none;

        @include crispy__font-size($crispy__field__input__font-size);
        font-size: $crispy__field__input__font-size;
    }
 }
--- a/src/scss/components/_group.scss
+++ b/src/scss/components/_group.scss
@ -1,8 +1,8 @@
 /**
 * component: group
 *
 * <nav class="group group--horizontal">
 *     <ul class="group__section">
 * <nav>
 *     <ul class="group group--horizontal">
 *         <li class="group__item"></li>
 *     <ul>
 * </nav>
@ -18,26 +18,24 @@ $crispy__group__character__margin: toEm(0 $crispy__spacing 0) !default;

@mixin crispy__group() {
    .group {
        @include crispy__clear_list();

        &--horizontal {
            .group__item, .group__section {
            .group__item {
                display: inline-block;
            }
        }

        &__section {
            @include crispy__clearlist();
        &--separate {
            .group__item {
                &:after {
                    margin: $crispy__group__character__margin;
                    content: $crispy__group__character;
                }

            &--separate {
                .group__item {
                &:last-child {
                    &:after {
                        margin: $crispy__group__character__margin;
                        content: $crispy__group__character;
                    }

                    &:last-child {
                        &:after {
                            display: none;
                        }
                        display: none;
                    }
                }
            }
--- a/src/scss/components/_heading.scss
+++ b/src/scss/components/_heading.scss
--- a/src/scss/components/_hero.scss
+++ b/src/scss/components/_hero.scss
--- a/src/components/_icon.scss
+++ b/src/components/_icon.scss
@ -0,0 +1,21 @@
 /**
 * component: icon
 *
 *
 *
 * @author Björn Hase
 * @license http://opensource.org/licenses/MIT The MIT License
 * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
 *
 */

 $crispy__icon__width: 1.5em !default;

@mixin crispy__icon {
    .icon {
        width: $crispy__icon__width;
        height: $crispy__icon__width;
        vertical-align: middle;
        overflow: hidden;
    }
 }
--- a/src/scss/components/_media.scss
+++ b/src/scss/components/_media.scss
--- a/src/components/_modal.scss
+++ b/src/components/_modal.scss
@ -0,0 +1,78 @@
 /**
 * component: modal
 *
 * <div class="modal">
 *     <div class="panel">
 *
 *     </div>
 * </div>
 *
 * @author Björn Hase
 * @license http://opensource.org/licenses/MIT The MIT License
 * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
 *
 */

 $crispy__modal__margin: 1em !default;
 $crispy__modal__max-width: 500px !default;
 $crispy__modal__margin: toEm($crispy__spacing * 2) !default;
 $crispy__modal__z-index: zIndex('modal') !default;

@mixin crispy__modal {
    .modal {
        position: absolute;
        z-index: $crispy__modal__z-index;
        width: 100%;

        margin: 0;
        max-width: $crispy__modal__max-width;

        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);

        &--fixed {
            position: fixed;
        }

        &--bottom-left, &--top-left, &--center-left {
            left: 0;
        }

        &--bottom-right, &--top-right, &--center-right {
            right: 0;
            left: unset;
        }

        &--bottom-left,
        &--top-left,
        &--bottom-right,
        &--top-right,
        &--bottom-center,
        &--top-center,
        &--center-right,
        &--center-left {
            margin: $crispy__modal__margin;
            transform: translate(0, 0);
        }

        &--bottom-left, &--bottom-right, &--bottom-center {
            bottom: 0;
            top: unset;
        }

        &--center-right, &--center-left {
            transform: translate(0, -50%);
            margin-top: 0;
            margin-bottom: 0;
        }

        &--bottom-center, &--top-center {
            transform: translate(-50%, 0);
        }

        &--top-left, &--top-right, &--top-center {
            top: 0;
        }
    }
 }
--- a/src/scss/components/_panel.scss
+++ b/src/scss/components/_panel.scss
@ -17,6 +17,8 @@ $crispy__panel__padding: toEm($crispy__spacing) !default;

@mixin crispy__panel {
    .panel {
        background-color: $crispy__color-panel;

        &__inner {
            padding: $crispy__panel__padding;
        }
--- a/src/scss/components/_table.scss
+++ b/src/scss/components/_table.scss
--- a/src/scss/components/field/_checkbox.scss
+++ b/src/scss/components/field/_checkbox.scss
--- a/src/scss/components/field/_label.scss
+++ b/src/scss/components/field/_label.scss
--- a/src/scss/components/field/_panel.scss
+++ b/src/scss/components/field/_panel.scss
@ -4,7 +4,7 @@
 * <div class="field">
 *     <div class="field__panel">
 *         <ul>
 *           <li>item 1<li>
 *              <li>item 1<li>
 *         </ul>
 *     </div>
 * </div>
--- a/src/scss/components/field/_radio.scss
+++ b/src/scss/components/field/_radio.scss
--- a/src/scss/components/field/_select.scss
+++ b/src/scss/components/field/_select.scss
@ -25,12 +25,10 @@ $crispy__field__select__border-color--error: $crispy__color-danger !default;
@mixin crispy__field__select()
 {
    .field__select {
        @extend .field__input;

        padding: $crispy__field__select__padding;
        border: $crispy__field__select__border;
        background-color: $crispy__field__select__background-color;
        

        &:focus {
            outline: 0;
            border-color: $crispy__field__select__border-color--focus;
--- a/src/scss/components/field/_text.scss
+++ b/src/scss/components/field/_text.scss
@ -20,7 +20,7 @@ $crispy__field__text__border-color--error: $crispy__color-danger !default;

@mixin crispy__field__text() {
    .field__text {
        @extend .field__input;
        margin: 0;
        border: $crispy__field__text__border;

        &:focus {
--- a/src/scss/crispy.scss
+++ b/src/scss/crispy.scss
@ -1,18 +1,22 @@
@import

    'normalize',

    'functions',
    'variables',
    'mixins',
    'core',

    'modifiers',

    'components/button',
    'components/code',
    'components/group',
    'components/heading',
    'components/hero',
    'components/icon',
    'components/media',
    'components/modal',
    'components/panel',
    'components/table',
    'components/field',

    'modifiers',
    'mixins';
    'components/field';
--- a/src/example/_config.scss
+++ b/src/example/_config.scss
--- a/src/example/components/_button.scss
+++ b/src/example/components/_button.scss
--- a/src/example/components/_nav.scss
+++ b/src/example/components/_nav.scss
--- a/src/example/site/_footer.scss
+++ b/src/example/site/_footer.scss
--- a/src/example/site/_header.scss
+++ b/src/example/site/_header.scss
--- a/src/example/styles.scss
+++ b/src/example/styles.scss
@ -0,0 +1,13 @@
@import

    'reflex',

    '../all',

    'site/header',
    'site/footer',

    'components/button',
    'components/nav',

    'templates/home';
--- a/src/example/templates/_home.scss
+++ b/src/example/templates/_home.scss
--- a/src/scss/_helpers.scss
+++ b/src/scss/_helpers.scss
--- a/src/scss/components/_modal.scss
+++ b/src/scss/components/_modal.scss
@ -1,56 +0,0 @@
 /**
 * component: modal
 *
 * <div class="modal">
 *
 * </div>
 *
 * @author Björn Hase
 * @license http://opensource.org/licenses/MIT The MIT License
 * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
 *
 */

 $crispy__modal__margin: toEm($crispy__spacing * 2) !default;
 $crispy__modal__z-index: zIndex('modal') !default;

@mixin crispy__modal {
    .modal {
        position: absolute;
        z-index: $crispy__modal__z-index;

        &--fixed {
            position: fixed;
        }

        &--left {
            left: 0;
        }

        &--top-center {
            left: 50%;
        }

        &--top {
            top: 0;
        }

        &--right {
            right: 0;
        }

        &--bottom {
            bottom: 0;
        }

        &--center {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .panel {
            margin: $crispy__modal__margin;
        }
    }
 }
--- a/src/scss/example.scss
+++ b/src/scss/example.scss
@ -1,2 +0,0 @@
@import
    'crispy';
--- a/webpack.mix.js
+++ b/webpack.mix.js
@ -11,9 +11,22 @@ let mix = require('laravel-mix');
 |
 */

 mix.sass('src/scss/example.scss', 'dist/crispy.min.css', {
         includePaths: ["node_modules/normalize-scss/sass"]
     })
 mix.sass('src/all.scss', 'dist/crispy.css', {
        sassOptions: {
            includePaths: [
                'node_modules/normalize-scss/sass'
            ]
        }
    })
    .sass('src/example/styles.scss', 'dist/example/styles.css', {
        sassOptions: {
            includePaths: [
                'node_modules/normalize-scss/sass',
                'node_modules/reflex-grid/scss'
            ]
        }
    })
    .copy('assets/iconmoon/symbol-defs.svg', 'dist/example')
    .options({
        postCss: [
            require('postcss-css-variables')()