adding

4 years ago · 9f304207fb
--- a/dist/crispy-all.css
+++ b/dist/crispy-all.css
--- a/dist/crispy-minimal.css
+++ b/dist/crispy-minimal.css
--- a/dist/example/components.html
+++ b/dist/example/components.html
@ -1,4 +1,4 @@
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Components | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Components</h1></header><h2 class="margin-bottom-1">Button</h2><hr class="marginless margin-bottom-2"/><h3 class="h4">SCSS:</h3><pre class="code margin-top-1"><code>$crispy__button__font-family: $crispy__font-family;
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Components | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Components</h1></header><h2 class="h3 margin-bottom-1">Button</h2><hr class="marginless margin-bottom-2"/><h3 class="h4">SCSS:</h3><pre class="code margin-top-1"><code>$crispy__button__font-family: $crispy__font-family;
 $crispy__button__font-weight: $crispy__font-weight;
 $crispy__button__font-size: $crispy__font-size;
 $crispy__button__font-size-breakpoints: $crispy__font-size-breakpoints;
@ -13,7 +13,7 @@ $crispy__button__margin-breakpoints: $crispy__margin-breakpoints;
 </code></pre><h3 class="h4">Html:</h3><pre class="code margin-top-1"><code>&lt;button class=&quot;button&quot;&gt;&lt;/button&gt;
 &lt;button class=&quot;button text-size-medium&quot;&gt;&lt;/button&gt;
 &lt;button class=&quot;button text-size-large&quot;&gt;&lt;/button&gt;
 &lt;button class=&quot;button width-100&quot;&gt;&lt;/button&gt;</code></pre><button class="button">Default</button> <button class="button text-size-medium">Default</button> <button class="button text-size-large">Default</button> <button class="button width-100">Info</button> <button class="button"><svg class="icon icon-color-danger" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg></button> <button class="button"><svg class="icon icon-color-danger" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg> Button</button><h2 class="margin-top-3 margin-bottom-1">Code</h2><hr class="marginless margin-bottom-2"/><h3 class="h4">SCSS:</h3><pre class="code margin-top-1"><code>$crispy__code__border: $crispy__border;
 &lt;button class=&quot;button width-100&quot;&gt;&lt;/button&gt;</code></pre><button class="button">Default</button> <button class="button text-size-medium">Default</button> <button class="button text-size-large">Default</button> <button class="button width-100">Info</button> <button class="button"><svg class="icon icon-color-danger" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg></button> <button class="button"><svg class="icon icon-color-danger" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg> Button</button><h2 class="h3 margin-top-3 margin-bottom-1">Code</h2><hr class="marginless margin-bottom-2"/><h3 class="h4">SCSS:</h3><pre class="code margin-top-1"><code>$crispy__code__border: $crispy__border;
 $crispy__code__background-color: $crispy__color-grey-light;

 $crispy__code__padding: $crispy__padding;
@ -24,7 +24,7 @@ $crispy__code__margin-breakpoints: $crispy__margin-breakpoints;
 </code></pre><h3 class="h4">Html:</h3><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><h2 class="margin-top-3">Fields</h2><h3 class="h4 magin-top-2">SCSS:</h3><pre class="code margin-top-1"><code>$crispy__field__margin: $crispy__margin;
 </code></pre><h2 class="h3 margin-top-3">Fields</h2><h3 class="h4 magin-top-2">SCSS:</h3><pre class="code margin-top-1"><code>$crispy__field__margin: $crispy__margin;
 $crispy__field__border: $crispy__border;

 $crispy__field__color--valid: $crispy__color-success;
@ -159,14 +159,14 @@ $crispy__field__select__border: $crispy__border;</code></pre><h3 class="h4 margi
            error item 1
        &lt;/div&gt;
    &lt;/label&gt;
 &lt;/div&gt;</code></pre><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><h2 class="margin-top-3">Group</h2><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__group__margin: 0 0.5em 0 !default;
 &lt;/div&gt;</code></pre><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><h2 class="h3 margin-top-3">Group</h2><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__group__margin: 0 0.5em 0 !default;
 $crispy__group__character: '/' !default;</code></pre><h3 class="h4">Html:</h3><pre class="code"><code>&lt;nav&gt;
    &lt;ul class=&quot;group group--hr&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-2"><nav><ul class="group group--hr"><li class="group__item">first item</li><li class="group__item">second item</li><li class="group__item">third item</li></ul></nav></div><div class="panel panel__inner"><nav><ul class="group"><li class="group__item"><button class="button marginless">Button</button></li><li class="group__item"><button class="button marginless">Button</button></li><li class="group__item"><button class="button marginless">Button</button></li></ul></nav></div><h2 class="margin-top-3">Hero</h2><h3 class="h4">Html:</h3><pre class="code"><code>&lt;div class=&quot;hero&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre><div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div><pre class="code margin-top-3"><code>&lt;div class=&quot;hero hero--top&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre><div class="hero hero--top" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div><pre class="code margin-top-3"><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><h2 class="margin-top-3">Icon</h2><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__icon__size: 1.15em;
 &lt;/nav&gt;</code></pre><div class="panel panel__inner margin-bottom-2"><nav><ul class="group group--hr"><li class="group__item">first item</li><li class="group__item">second item</li><li class="group__item">third item</li></ul></nav></div><div class="panel panel__inner"><nav><ul class="group"><li class="group__item"><button class="button marginless">Button</button></li><li class="group__item"><button class="button marginless">Button</button></li><li class="group__item"><button class="button marginless">Button</button></li></ul></nav></div><h2 class="h3 margin-top-3">Hero</h2><h3 class="h4">Html:</h3><pre class="code"><code>&lt;div class=&quot;hero&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre><div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div><pre class="code margin-top-3"><code>&lt;div class=&quot;hero hero--top&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre><div class="hero hero--top" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div><pre class="code margin-top-3"><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><h2 class="h3 margin-top-3">Icon</h2><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__icon__size: 1.15em;
 </code></pre><h3 class="h4">Html:</h3><pre class="code"><code>&lt;svg class=&quot;icon text-size-small&quot; aria-hidden=&quot;true&quot;&gt;
     &lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
 &lt;/svg&gt;
@ -184,26 +184,26 @@ $crispy__group__character: '/' !default;</code></pre><h3 class="h4">Html:</h3><p
 &lt;/svg&gt;
 &lt;svg class=&quot;icon icon-color-danger&quot; aria-hidden=&quot;true&quot;&gt;
     &lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
 &lt;/svg&gt;;</code></pre><div class="panel"><div class="panel__inner"><svg class="icon text-size-small" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg> <svg class="icon" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg> <svg class="icon text-size-large" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg> <svg class="icon text-size-big" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg> <svg class="icon text-size-mega" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg> <svg class="icon icon-color-danger" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg></div></div><h2 class="margin-top-3">Media</h2><h3 class="h4">Html:</h3><pre class="code"><code>&lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;
 &lt;/svg&gt;;</code></pre><div class="panel"><div class="panel__inner"><svg class="icon text-size-small" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg> <svg class="icon" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg> <svg class="icon text-size-large" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg> <svg class="icon text-size-big" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg> <svg class="icon text-size-mega" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg> <svg class="icon icon-color-danger" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg></div></div><h2 class="h3 margin-top-3">Media</h2><h3 class="h4">Html:</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;
 </code></pre><div class="grid"><div class="col-12 col-md-6"><img class="img-responsive width-100" src="https://picsum.photos/400"/></div><div class="col-12 col-md-6"><figure><img class="img-responsive width-100" src="https://picsum.photos/400"/><figcaption class="text-center">Lorem Ipsum</figcaption></figure></div></div><h2 class="margin-top-3">Panel</h2><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__panel__inner-padding: $crispy__padding;
 </code></pre><div class="grid"><div class="col-12 col-md-6"><img class="img-responsive width-100" src="https://picsum.photos/400"/></div><div class="col-12 col-md-6"><figure><img class="img-responsive width-100" src="https://picsum.photos/400"/><figcaption class="text-center">Lorem Ipsum</figcaption></figure></div></div><h2 class="h3 margin-top-3">Panel</h2><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__panel__inner-padding: $crispy__padding;
 $crispy__panel__inner-padding-breakpoints: $crispy__padding-breakpoints;
 $crispy__panel__background-color: $crispy__color-grey-light;
 </code></pre><h3 class="h4">Html:</h3><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><h2 class="margin-top-3">Progress</h2><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__progress__height: 30px;
 &lt;/div&gt;</code></pre><div class="panel"><div class="panel__inner">Lorem Ipsum</div></div><h2 class="h3 margin-top-3">Progress</h2><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__progress__height: 30px;
 $crispy__progress__background-color: $crispy__color-primary;
 $crispy__progress__border-width: 1px;
 $crispy__progress__border-color: $crispy__color-border;
 </code></pre><h3 class="h4">Html:</h3><pre class="code"><code>&lt;div class=&quot;progress&quot;&gt;
    &lt;div class=&quot;progress__inner&quot; style=&quot;width: 80%&quot;&gt;&lt;/div&gt;
 &lt;/div&gt;
 </code></pre><div class="progress"><div class="progress__inner" style="width: 80%"></div></div><h2 class="margin-top-3">Modal</h2><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__modal__max-width-breakpoints: (
 </code></pre><div class="progress"><div class="progress__inner" style="width: 80%"></div></div><h2 class="h3 margin-top-3">Modal</h2><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__modal__max-width-breakpoints: (
    $crispy__md: 50%
 );

@ -217,7 +217,7 @@ $crispy__modal__z-index: zIndex('modal');</code></pre><h3 class="h4">Html:</h3><
            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><h2 class="margin-top-3">Table</h2><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__table__padding: $crispy__padding;
 &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><h2 class="h3 margin-top-3">Table</h2><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__table__padding: $crispy__padding;
 $crispy__table__padding-breakpoints: $crispy__padding-breakpoints;

 $crispy__table__td__border: 1px solid $crispy__color-border;
@ -245,4 +245,4 @@ $crispy__table__striped__background-color: $crispy__color-grey-light;</code></pr
            &lt;td&gt;45&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></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html>
 &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></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li><li class="group__item"><a class="text-color-white" href="https://github.com/tentakelfabrik/crispy-css" target="_blank"><svg class="icon" alt="github"><use xlink:href="symbol-defs.svg#icon-github"/></svg></a></li></ul><p class="margin-top-1 margin-bottom-0">Made with euphoria by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html>
--- a/dist/example/core.html
+++ b/dist/example/core.html
@ -1 +1 @@
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Core | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Core</h1></header><h2 class="marginless margin-bottom-1">Normalize</h2><hr class="marginless margin-bottom-2"/><h3 class="h4 margin-top-2">a</h3><a href="#">Link</a><h2 class="marginless margin-top-2 margin-bottom-1">Typography</h2><hr class="marginless margin-bottom-2"/><h3 class="h4 margin-top-2">Heading</h3><div class="h1">Heading h1</div><div class="h2">Heading h2</div><div class="h3">Heading h3</div><div class="h4">Heading h4</div><div class="h5">Heading h5</div><div class="h6">Heading h6</div><h3 class="h4 margin-top-2">abbr</h3><p>Glossier viral occupy mixtape pok pok cornhole, <abbr title="vape affogato hella">vape affogato hella</abbr> knausgaard thundercats</p><h3 class="h4 margin-top-2">blockquote</h3><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><h3 class="h4 margin-top-2">hr</h3><hr><h3 class="h4 margin-top-2">paragraph</h3><p>Glossier viral occupy mixtape pok pok.</p><h3 class="h4 margin-top-2">mark</h3><p>Pug before they <mark>four loko</mark> Deep v bespoke</p><h3 class="h4 margin-top-2">list</h3><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></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html>
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Core | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Core</h1></header><h2 class="marginless margin-bottom-1">Normalize</h2><hr class="marginless margin-bottom-2"/><h3 class="h4 margin-top-2">a</h3><a href="#">Link</a><h2 class="marginless margin-top-2 margin-bottom-1">Typography</h2><hr class="marginless margin-bottom-2"/><h3 class="h4 margin-top-2">Heading</h3><div class="h1">Heading h1</div><div class="h2">Heading h2</div><div class="h3">Heading h3</div><div class="h4">Heading h4</div><div class="h5">Heading h5</div><div class="h6">Heading h6</div><h3 class="h4 margin-top-2">abbr</h3><p>Glossier viral occupy mixtape pok pok cornhole, <abbr title="vape affogato hella">vape affogato hella</abbr> knausgaard thundercats</p><h3 class="h4 margin-top-2">blockquote</h3><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><h3 class="h4 margin-top-2">hr</h3><hr><h3 class="h4 margin-top-2">paragraph</h3><p>Glossier viral occupy mixtape pok pok.</p><h3 class="h4 margin-top-2">mark</h3><p>Pug before they <mark>four loko</mark> Deep v bespoke</p><h3 class="h4 margin-top-2">list</h3><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></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li><li class="group__item"><a class="text-color-white" href="https://github.com/tentakelfabrik/crispy-css" target="_blank"><svg class="icon" alt="github"><use xlink:href="symbol-defs.svg#icon-github"/></svg></a></li></ul><p class="margin-top-1 margin-bottom-0">Made with euphoria by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html>
--- a/dist/example/functions.html
+++ b/dist/example/functions.html
@ -1,4 +1,4 @@
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Functions | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Functions</h1></header><h3 class="h4 margin-top-0">stripUnit()</h3><h4 class="h6 margin-top-1">Sass:</h4><pre class="code"><code>stripUnit(10px);</code></pre><p>Returns value without unit.</p><h3 class="h4 margin-top-0">zIndex(name)</h3><h4 class="h6 margin-top-1">Sass:</h4><pre class="code"><code>zIndex('modal');</code></pre><p>Returns value from $crispy__z-index.</p><h4 class="h6 margin-top-1">Sass:</h4><pre class="code"><code>$crispy__z-index: (
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Functions | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Functions</h1></header><h2 class="h3 margin-bottom-1">getValue($map)</h2><hr class="marginless margin-bottom-2"/><p>Returns a value from a map if key "default" found.</p><h2 class="h3 margin-top-3 margin-bottom-1">stripUnit($value)</h2><hr class="marginless margin-bottom-2"/><p>Returns value without unit.</p><h3 class="h4">SCSS:</h3><pre class="code"><code>stripUnit(10px);</code></pre><h2 class="h3 margin-top-3 margin-bottom-1">zIndex($name)</h2><hr class="marginless margin-bottom-2"/><p>Returns value from $crispy__z-index.</p><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__z-index: (
    'overlay': 90,
    'modal'  : 100
 );</code></pre></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html>
 );</code></pre><pre class="code"><code>zIndex('modal');</code></pre></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li><li class="group__item"><a class="text-color-white" href="https://github.com/tentakelfabrik/crispy-css" target="_blank"><svg class="icon" alt="github"><use xlink:href="symbol-defs.svg#icon-github"/></svg></a></li></ul><p class="margin-top-1 margin-bottom-0">Made with euphoria by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html>
--- a/dist/example/getting-started.html
+++ b/dist/example/getting-started.html
@ -123,4 +123,4 @@ $crispy__border: 1px solid $crispy__color-border !default;
 </code></pre><p>For Custom Variables add a File before importing Crispy.</p><pre class="code"><code>@import
    "config",
    "node_modules/crispy-css/src/crispy";
 </code></pre><h2 class="margin-top-3 margin-bottom-1">Example</h2><hr class="marginless margin-bottom-2"/><p>You find all of this Site in "/src/example". This is also an Example how you can use Crispy CSS and orginaize your Project.</p><h3 class="h4">Site</h3><p>Contains header, footer and some partials that are used on a Site or Webapp.</p><h3 class="h4">Templates</h3><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></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html>
 </code></pre><h2 class="margin-top-3 margin-bottom-1">Example</h2><hr class="marginless margin-bottom-2"/><p>You find all of this Site in "/src/example". This is also an Example how you can use Crispy CSS and orginaize your Project.</p><h3 class="h4">Site</h3><p>Contains header, footer and some partials that are used on a Site or Webapp.</p><h3 class="h4">Templates</h3><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></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li><li class="group__item"><a class="text-color-white" href="https://github.com/tentakelfabrik/crispy-css" target="_blank"><svg class="icon" alt="github"><use xlink:href="symbol-defs.svg#icon-github"/></svg></a></li></ul><p class="margin-top-1 margin-bottom-0">Made with euphoria by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html>
--- a/dist/example/helpers.html
+++ b/dist/example/helpers.html
--- a/dist/example/imprint.html
+++ b/dist/example/imprint.html
--- a/dist/example/index.html
+++ b/dist/example/index.html
@ -1 +1 @@
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title><meta name="description" content="Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="home"><header id="header" class="header"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><hgroup><a href="/"><h1 class="h2 margin-top-4 margin-bottom-0"><svg class="icon icon--big margin-bottom-1" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg><br/>Crispy CSS</h1></a><small class="text-color-primary">v3.0.0</small><h2 class="h5 margin-top-1">Lightweight CSS Framework for Building Apps and Websites</h2></hgroup></div></div></div></div></header><div class="container"><div class="grid margin-top-2 margin-bottom-2"><div class="col-12 col-sm-6 col-lg-4 col-align-center"><h3 class="h4 text-center"><span class="h3__icon"><svg class="icon icon-color-primary text-size-medium" alt="Mixins and Functions"><use xlink:href="symbol-defs.svg#icon-emoticon-zip"/></svg></span><div>Ugly</div></h3><p class="text-center">Yes, this Framework has no fancy Layout or shiny Elements, because what created with Crispy CSS could be fancy. This Framework adds basic styles and support your Work.</p></div><div class="col-12 col-sm-6 col-lg-4"><h3 class="h4 text-center"><span class="h3__icon"><svg class="icon icon-color-primary text-size-medium" alt="Customizeable"><use xlink:href="symbol-defs.svg#icon-spray"/></svg></span><div>Helpers</div></h3><p class="text-center">Mixins, Functions and Modifiers make your Workflow simpler. Only import Components you really need and make your Work lightweight.</p></div><div class="col-12 col-sm-6 col-lg-4"><h3 class="h4 text-center"><span class="h3__icon"><svg class="icon icon-color-primary text-size-large" alt="Coding Style"><use xlink:href="symbol-defs.svg#icon-design"/></svg></span><div>Coding Style</div></h3><p class="text-center">Crispy CSS uses <a href="http://getbem.com/" target="_blank">BEM</a>, but an simpler approach of it. BEM is good to show dependencies in Components and add structure to your Styles.</p></div></div><div class="margin-bottom-2 text-center text-size-medium"><a class="button background-color-success text-color-white margin-left-1 margin-right-1" href="/getting-started.html">Getting started! <svg class="icon margin-left-1" alt="proceed"><use xlink:href="symbol-defs.svg#icon-circle-right"/></svg> </a><a class="button background-color-grey text-color-white margin-left-1 margin-right-1" target="_blank" href="https://github.com/tentakelfabrik/crispy-css">Visit on Github <svg class="icon margin-left-1" alt="github"><use xlink:href="symbol-defs.svg#icon-github"/></svg></a></div><div class="margin-bottom-5 margin-top-4"><div class="grid"><div class="col-12"><h2 class="h3 text-center">Apps and Websites that have been crafted</h2></div></div><div class="grid"><div class="col-12 col-sm-6 col-md-4"><h3 class="h5 text-center">Tentakelfabrik</h3><a class="text-center show" href="https://tentakelfabrik.de" target="_blank"><img class="bordered img-responsive width-100" src="img/tentakelfabrik.jpg"/></a></div><div class="col-12 col-sm-6 col-md-4"><h3 class="h5 text-center">Gaming Circus</h3><a class="text-center show" href="https://gaming-circus.de" target="_blank"><img class="bordered img-responsive width-100" src="img/gaming-circus.jpg"/></a></div><div class="col-12 col-sm-6 col-md-4"><h3 class="h5 text-center">Trinkkofi</h3><a class="text-center show" href="https://trinkkofi.de" target="_blank"><img class="bordered img-responsive width-100" src="img/trinkkofi.jpg"/></a></div></div></div></div><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html>
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title><meta name="description" content="Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="home"><header id="header" class="header"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><hgroup><a href="/"><h1 class="h2 margin-top-4 margin-bottom-0"><svg class="icon icon--big margin-bottom-1" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg><br/>Crispy CSS</h1></a><small class="text-color-primary">v3.0.0</small><h2 class="h5 margin-top-1">Lightweight CSS Framework for Building Apps and Websites</h2></hgroup></div></div></div></div></header><div class="container"><div class="grid margin-top-2 margin-bottom-2"><div class="col-12 col-sm-6 col-lg-4 col-align-center"><h3 class="h4 text-center"><span class="h3__icon"><svg class="icon icon-color-primary text-size-medium" alt="Mixins and Functions"><use xlink:href="symbol-defs.svg#icon-emoticon-zip"/></svg></span><div>Ugly</div></h3><p class="text-center">Yes, this Framework has no fancy Layout or shiny Elements, because what created with Crispy CSS could be fancy. This Framework adds basic styles and support your Work.</p></div><div class="col-12 col-sm-6 col-lg-4"><h3 class="h4 text-center"><span class="h3__icon"><svg class="icon icon-color-primary text-size-medium" alt="Customizeable"><use xlink:href="symbol-defs.svg#icon-spray"/></svg></span><div>Helpers</div></h3><p class="text-center">Mixins, Functions and Modifiers make your Workflow simpler. Only import Components you really need and make your Work lightweight.</p></div><div class="col-12 col-sm-6 col-lg-4"><h3 class="h4 text-center"><span class="h3__icon"><svg class="icon icon-color-primary text-size-large" alt="Coding Style"><use xlink:href="symbol-defs.svg#icon-design"/></svg></span><div>Coding Style</div></h3><p class="text-center">Crispy CSS uses <a href="http://getbem.com/" target="_blank">BEM</a>, but an simpler approach of it. BEM is good to show dependencies in Components and add structure to your Styles.</p></div></div><div class="margin-bottom-2 text-center text-size-medium"><a class="button background-color-success text-color-white margin-left-1 margin-right-1" href="/getting-started.html">Getting started! <svg class="icon margin-left-1" alt="proceed"><use xlink:href="symbol-defs.svg#icon-circle-right"/></svg> </a><a class="button background-color-grey text-color-white margin-left-1 margin-right-1" target="_blank" href="https://github.com/tentakelfabrik/crispy-css">Visit on Github <svg class="icon margin-left-1" alt="github"><use xlink:href="symbol-defs.svg#icon-github"/></svg></a></div><div class="margin-bottom-5 margin-top-4"><div class="grid"><div class="col-12"><h2 class="h3 text-center">Apps and Websites that have been crafted</h2></div></div><div class="grid"><div class="col-12 col-sm-6 col-md-4"><h3 class="h5 text-center">Tentakelfabrik</h3><a class="text-center show" href="https://tentakelfabrik.de" target="_blank"><img class="bordered img-responsive width-100" src="img/tentakelfabrik.jpg"/></a></div><div class="col-12 col-sm-6 col-md-4"><h3 class="h5 text-center">Gaming Circus</h3><a class="text-center show" href="https://gaming-circus.de" target="_blank"><img class="bordered img-responsive width-100" src="img/gaming-circus.jpg"/></a></div><div class="col-12 col-sm-6 col-md-4"><h3 class="h5 text-center">Trinkkofi</h3><a class="text-center show" href="https://trinkkofi.de" target="_blank"><img class="bordered img-responsive width-100" src="img/trinkkofi.jpg"/></a></div></div></div></div><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li><li class="group__item"><a class="text-color-white" href="https://github.com/tentakelfabrik/crispy-css" target="_blank"><svg class="icon" alt="github"><use xlink:href="symbol-defs.svg#icon-github"/></svg></a></li></ul><p class="margin-top-1 margin-bottom-0">Made with euphoria by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html>
--- a/dist/example/mixins.html
+++ b/dist/example/mixins.html
@ -1,49 +1,8 @@
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Mixins | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Mixins</h1></header><h3 class="h4 margin-top-1">Triangle</h3><h4 class="h6 margin-top-1">Sass:</h4><pre class="code"><code>.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
 display: block;
 }

 .triangle-left {
@include triangle('left', $crispy__color-primary);
 }

 .triangle-right {
@include triangle('right', $crispy__color-primary);
 }

 .triangle-top {
@include triangle('top', $crispy__color-primary);
 }

 .triangle-bottom {
@include triangle('bottom', $crispy__color-primary);
 }
 </code></pre><p><span class="triangle-right"></span> <span class="triangle-left"></span> <span class="triangle-top"></span> <span class="triangle-bottom"></span></p><h3 class="h4 margin-top-1">Media Queries</h3><p>These <strong>@mixins</strong> were used with the Breakpoints from <a target="_blank" href="http://reflexgrid.com/docs/">http://reflexgrid.com/docs/</a>. Reflex-Grid is also used as grid for this Site.</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-1">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;</code></pre><h4 class="h6 margin-top-1">Sass:</h4><pre class="code"><code>.sm, .md, .md-only, .lg-only {
 display: none;
 }

 .sm {
@include crispy__media-sm() {
 display: block;
 }
 }
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Mixins | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Mixins</h1></header><h2 class="h3 margin-bottom-1">crispy__clearfix()</h2><hr class="marginless margin-bottom-2"/><p>Clear Floats.</p><h2 class="h3 margin-top-3 margin-bottom-1">crispy__clearlist()</h2><hr class="marginless margin-bottom-2"/><p>Resets Style for a List-Element</p><h2 class="h3 margin-top-3 margin-bottom-1">crispy__media-*, crispy__media-*-only</h2><hr class="marginless margin-bottom-2"/><p>For each Breakpoint there is a Mixin as an Media Query.</p><pre class="code"><code>@include crispy__media-xs() {

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

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

 .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></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html>
 </code></pre><h2 class="h3 margin-top-3 margin-bottom-1">crispy__media-breakpoints($property, $breakpoints, $important: false)</h2><hr class="marginless margin-bottom-2"/><p>Set property and his value for each Breakpoint.</p><h2 class="h3 margin-top-3 margin-bottom-1">crispy__media-breakpoints-calculate($property, $factor, $breakpoints, $important: false)</h2><hr class="marginless margin-bottom-2"/><p>Set property and his value with an factor for each Breakpoint.</p><h2 class="h3 margin-top-3 margin-bottom-1">crispy__media-breakpoints-font-size($breakpoints, $font-size, $default, $important: false)</h2><hr class="marginless margin-bottom-2"/><p>Set font-size from Breakpoints, use for calculating difference from font-size and default font-size</p></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li><li class="group__item"><a class="text-color-white" href="https://github.com/tentakelfabrik/crispy-css" target="_blank"><svg class="icon" alt="github"><use xlink:href="symbol-defs.svg#icon-github"/></svg></a></li></ul><p class="margin-top-1 margin-bottom-0">Made with euphoria by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html>
--- a/dist/example/privacy-policy.html
+++ b/dist/example/privacy-policy.html
--- a/dist/example/styles.css
+++ b/dist/example/styles.css
--- a/src/_core.scss
+++ b/src/_core.scss
@ -50,9 +50,9 @@
        direction: $crispy__direction;

        font-size: $crispy__font-size;
        @include crispy__media__breakpoints('line-height', $crispy__line-height__breakpoints);
        @include crispy__media-breakpoints('line-height', $crispy__line-height__breakpoints);

        line-height: $crispy__line-height;
        @include crispy__media__breakpoints('font-size', $crispy__font-size-breakpoints);
        @include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
    }
 }
--- a/src/_functions.scss
+++ b/src/_functions.scss
@ -10,30 +10,17 @@


 /**
 * strip unit from value
 *  strip unit from value
 *
 *  @param  {mixed} $value
 *  @return {number}
 *
 * @param  {mixed} $value
 * @return {number}
 */
@function stripUnit($value) {
    @return $value / ($value * 0 + 1);
 }


 /**
 *  factor
 *
 *  
 *
 *  @param  {integer} $x
 *  @return {float}
 *
 */
@function factor($x) {
    @return ($x * $x) / 2;
 }


 /**
 *  get value of key "default" in map
 *
@ -41,17 +28,18 @@
 *  @return {boolean|unit}
 *
 */
@function getDefault($values) {
@function getDefault($map) {

    $default: false;

    @if map-has-key($values, 'default') {
        $default: map-get($values, 'default');
    @if map-has-key($map, 'default') {
        $default: map-get($map, 'default');
    }

    @return $default;
 }


 /**
 *  z-index
 *
@ -71,35 +59,16 @@
    }
 }


 /**
 *  factor
 *
 *
 *
 * @param  {[type]} $directions [description]
 * @return {[type]}             [description]
 *  @param  {integer} $x
 *  @return {float}
 *
 */
@function oppositeDirection($direction)
 {
    $opposite-direction: 0;

    $direction-map: (
        'top':    'bottom',
        'right':  'left',
        'bottom': 'top',
        'left':   'right',
        'center': 'center',
        'ltr':    'rtl',
        'rtl':    'ltr'
    );

    $direction: to-lower-case($direction);

    @if map-has-key($direction-map, $direction) {
        $opposite-direction: map-get($direction-map, $direction);
    } @else {
        @warn "No opposite direction can be found for `#{$direction}`. Direction omitted.";
    }

    @return $opposite-direction;
 }
@function factor($x) {
    @return ($x * $x) / 2;
 }
--- a/src/_helpers.scss
+++ b/src/_helpers.scss
@ -26,6 +26,33 @@ $crispy__helpers__width: (

@mixin crispy__helpers() {

    /**
     *  borders
     *
     *
     */

    .bordered {
        border: $crispy__border !important;
    }

    .rounded {
        border-radius: $crispy__border-radius !important;
    }

    .round {
        border-radius: 50% !important;
    }

    .borderless {
        border: 0 !important;
    }

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


    /**
     * typography
     *
@ -94,10 +121,36 @@ $crispy__helpers__width: (
    @each $name, $font-size in $crispy__font-sizes {
        .text-size-#{$name} {
            font-size: $font-size !important;
            @include crispy__media__breakpoints__diff($crispy__font-size-breakpoints, $font-size, $defaultFontSize);
            @include crispy__media-breakpoints-font-size($crispy__font-size-breakpoints, $font-size, $defaultFontSize, true);
        }
    }


    /**
     *  colors
     *
     *
     */

    @each $name, $color in $crispy__colors {
        .text-color-#{$name} {
            color: $color !important;
        }
    }

    @each $name, $color in $crispy__colors {
        .border-color-#{$name} {
            border-color: $color !important;
        }
    }

    @each $name, $color in $crispy__colors {
        .background-color-#{$name} {
            background-color: $color !important;
        }
    }


    /**
     *  floating
     *
@ -125,29 +178,6 @@ $crispy__helpers__width: (
        @include crispy__clearfix();
    }

    /**
     *  colors
     *
     *
     */

    @each $name, $color in $crispy__colors {
        .text-color-#{$name} {
            color: $color !important;
        }
    }

    @each $name, $color in $crispy__colors {
        .border-color-#{$name} {
            border-color: $color !important;
        }
    }

    @each $name, $color in $crispy__colors {
        .background-color-#{$name} {
            background-color: $color !important;
        }
    }

    /**
     *  position
@ -211,11 +241,11 @@ $crispy__helpers__width: (
    .show {
        display: block !important;

        &--inline {
        &-inline {
            display: inline !important;
        }

        &--inline-block {
        &-inline-block {
            display: inline-block !important;
        }

@ -223,11 +253,11 @@ $crispy__helpers__width: (
            @include crispy__media-xs() {
                display: block !important;

                &--inline {
                &-inline {
                    display: inline !important;
                }

                &--inline-block {
                &-inline-block {
                    display: inline-block !important;
                }
            }
@ -237,11 +267,11 @@ $crispy__helpers__width: (
            @include crispy__media-sm() {
                display: block !important;

                &--inline {
                &-inline {
                    display: inline !important;
                }

                &--inline-block {
                &-inline-block {
                    display: inline-block !important;
                }
            }
@ -251,11 +281,11 @@ $crispy__helpers__width: (
            @include crispy__media-md() {
                display: block !important;

                &--inline {
                &-inline {
                    display: inline !important;
                }

                &--inline-block {
                &-inline-block {
                    display: inline-block !important;
                }
            }
@ -265,11 +295,11 @@ $crispy__helpers__width: (
            @include crispy__media-lg() {
                display: block !important;

                &--inline {
                &-inline {
                    display: inline !important;
                }

                &--inline-block {
                &-inline-block {
                    display: inline-block !important;
                }
            }
@ -278,43 +308,17 @@ $crispy__helpers__width: (
        &-xlg {
            @include crispy__media-xlg() {
                display: block !important;
                &--inline {
                &-inline {
                    display: inline !important;
                }

                &--inline-block {
                &-inline-block {
                    display: inline-block !important;
                }
            }
        }
    }

    /**
     *  borders
     *
     *
     */

    .bordered {
        border: $crispy__border !important;
    }

    .rounded {
        border-radius: $crispy__border-radius !important;
    }

    .round {
        border-radius: 50% !important;
    }

    .borderless {
        border: 0 !important;
    }

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

    /**
     *  width
     *
@ -347,7 +351,7 @@ $crispy__helpers__width: (
            margin-top: ($crispy__helpers__spacing-gap * factor($i)) !important;

            @if $i > 0 {
                @include crispy__media__breakpoints_calculate('margin-top', factor($i), $crispy__helpers__spacing-breakpoints);
                @include crispy__media-breakpoints-calculate('margin-top', factor($i), $crispy__helpers__spacing-breakpoints, true);
            }
        }

@ -355,7 +359,7 @@ $crispy__helpers__width: (
            margin-bottom: ($crispy__helpers__spacing-gap * factor($i)) !important;

            @if $i > 0 {
                @include crispy__media__breakpoints_calculate('margin-bottom', factor($i), $crispy__helpers__spacing-breakpoints);
                @include crispy__media-breakpoints-calculate('margin-bottom', factor($i), $crispy__helpers__spacing-breakpoints, true);
            }
        }

@ -363,7 +367,7 @@ $crispy__helpers__width: (
            padding-top: ($crispy__helpers__spacing-gap * $i) !important;

            @if $i > 0 {
                @include crispy__media__breakpoints_calculate('padding-top', factor($i), $crispy__helpers__spacing-breakpoints);
                @include crispy__media-breakpoints-calculate('padding-top', factor($i), $crispy__helpers__spacing-breakpoints, true);
            }
        }

@ -371,7 +375,7 @@ $crispy__helpers__width: (
            padding-bottom: ($crispy__helpers__spacing-gap * $i) !important;

            @if $i > 0 {
                @include crispy__media__breakpoints_calculate('padding-bottom', factor($i), $crispy__helpers__spacing-breakpoints);
                @include crispy__media-breakpoints-calculate('padding-bottom', factor($i), $crispy__helpers__spacing-breakpoints, true);
            }
        }

@ -381,7 +385,7 @@ $crispy__helpers__width: (
                margin-left: ($crispy__helpers__spacing-gap * $i) !important;

                @if $i > 0 {
                    @include crispy__media__breakpoints_calculate('margin-left', factor($i), $crispy__helpers__spacing-breakpoints);
                    @include crispy__media-breakpoints-calculate('margin-left', factor($i), $crispy__helpers__spacing-breakpoints, true);
                }
            }

@ -389,7 +393,7 @@ $crispy__helpers__width: (
                margin-right: ($crispy__helpers__spacing-gap * $i) !important;

                @if $i > 0 {
                    @include crispy__media__breakpoints_calculate('margin-right', factor($i), $crispy__helpers__spacing-breakpoints);
                    @include crispy__media-breakpoints-calculate('margin-right', factor($i), $crispy__helpers__spacing-breakpoints, true);
                }
            }

@ -397,7 +401,7 @@ $crispy__helpers__width: (
                padding-left: ($crispy__helpers__spacing-gap * $i) !important;

                @if $i > 0 {
                    @include crispy__media__breakpoints_calculate('padding-left', factor($i), $crispy__helpers__spacing-breakpoints);
                    @include crispy__media-breakpoints-calculate('padding-left', factor($i), $crispy__helpers__spacing-breakpoints, true);
                }
            }

@ -405,7 +409,7 @@ $crispy__helpers__width: (
                padding-right: ($crispy__helpers__spacing-gap * $i) !important;

                @if $i > 0 {
                    @include crispy__media__breakpoints_calculate('padding-right', factor($i), $crispy__helpers__spacing-breakpoints);
                    @include crispy__media-breakpoints-calculate('padding-right', factor($i), $crispy__helpers__spacing-breakpoints, true);
                }
            }
        }
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@ -10,7 +10,7 @@


 /**
 *  clearfix to end floating
 *  Clear Floats
 *
 *
 *
@ -35,7 +35,7 @@
 *
 */

@mixin crispy__clear_list() {
@mixin crispy__clearlist() {
    list-style: none;
    margin: 0;
    padding: 0;
@ -48,7 +48,8 @@


 /**
 *  media-queries
 *  media-queries as mixins
 *  based on breakpoints from variables
 *
 *
 *
@ -128,54 +129,72 @@


 /**
 *  Set property and his value for each Breakpoint
 *
 *  @param  {[type]} $property    [description]
 *  @param  {[type]} $breakpoints [description]
 *  (
 *      $crispy__md: 10px
 *  )
 *
 *  @return {[type]}              [description]
 *
 *  @param  {css} $property
 *  @param  {map} $breakpoints
 *  @param  {Boolean} $important   [false]
 *
 */

@mixin crispy__media__breakpoints($property, $breakpoints) {
@mixin crispy__media-breakpoints($property, $breakpoints, $important: false) {
    @each $breakpoint, $value in $breakpoints {
        @media only screen and (min-width: $breakpoint) {
            #{$property}: $value;
            @if $important == false {
                #{$property}: $value;
            } @else {
                #{$property}: $value !important;
            }
        }
    }
 }


 /**
 *  Set property and his value with an factor for each Breakpoint
 *
 *  @param  {[type]} $property    [description]
 *  @param  {[type]} $factor      [description]
 *  @param  {[type]} $breakpoints [description]
 *  (
 *      $crispy__md: 10px
 *  )
 *
 *  @param  {css} $property
 *  @param  {number} $factor
 *  @param  {map} $breakpoints
 *  @param  {Boolean} $important   [false]
 *
 *  @return {[type]}              [description]
 */

@mixin crispy__media__breakpoints_calculate($property, $factor, $breakpoints) {
@mixin crispy__media-breakpoints-calculate($property, $factor, $breakpoints, $important: false) {
    @each $breakpoint, $value in $breakpoints {
        @media only screen and (min-width: $breakpoint) {
            #{$property}: ($value * $factor) !important;
            @if $important == false {
                #{$property}: ($value * $factor);
            } @else {
                #{$property}: ($value * $factor) !important;
            }
        }
    }
 }


 /**
 *  Set font-size from Breakpoints, use for calculating difference from font-size and default font-size
 *
 *  (
 *      $crispy__md: 1rem
 *  )
 *
 *  @param  {[type]} $breakpoints [des
 *  @param  {[type]} $font-sizes  [description]
 *  @param  {[type]} $font-size   [description]
 *
 *  @return {[type]}              [description]
 *  @param  {map}  $breakpoints
 *  @param  {unit}  $font-size
 *  @param  {unit}  $default
 *  @param  {Boolean} $important   [false]
 *
 */

@mixin crispy__media__breakpoints__diff($breakpoints, $font-size, $default) {

@mixin crispy__media-breakpoints-font-size($breakpoints, $font-size, $default, $important: false) {
    @each $breakpoint, $value in $breakpoints {

        // getting diff
@ -184,55 +203,12 @@
        // ignore if factor is zero
        @if $factor > 0 {
            @media only screen and (min-width: $breakpoint) {
                font-size: ($value * $factor) !important;
                @if $important == false {
                    font-size: ($value * $factor);
                } @else {
                    font-size: ($value * $factor) !important;
                }
            }
        }
    }
 }


 /**
 *  triangle
 *
 *
 *  @param {Direction} $direction - Triangle direction, either 'top', 'right', 'bottom' or 'left'
 *  @param {Color} $color [currentcolor] - Triangle color
 *  @param {Length} $size [1em] - Triangle size
 *
 */

@mixin triangle($direction, $color: currentcolor, $size: 1em) {

    @if not index(top right bottom left, $direction) {
        @error "Direction must be either `top`, `right`, `bottom` or `left`.";
    }

    width: 0;
    height: 0;
    content: '';
    z-index: 2;

    // adding opposite postion for border
    $opposite: oppositeDirection($direction);

    // @TODO with #{opposite-position($direction)} it breaks in webpack
    @if $opposite == top {
        border-top: ($size * 1.5) solid $color;
    } @else if $opposite == bottom {
        border-bottom: ($size * 1.5) solid $color;
    } @else if $opposite == left {
        border-left: ($size * 1.5) solid $color;
    } @else if $opposite == right {
        border-right: ($size * 1.5) solid $color;
    }

    $perpendicular-borders: $size solid transparent;

    @if $direction == top or $direction == bottom {
        border-left: $perpendicular-borders;
        border-right: $perpendicular-borders;
    } @else if $direction == right or $direction == left {
        border-bottom: $perpendicular-borders;
        border-top: $perpendicular-borders;
    }
 }
--- a/src/_variables.scss
+++ b/src/_variables.scss
@ -115,9 +115,9 @@ $crispy__margin-breakpoints: (
    $crispy__md: 0 0 20px
 ) !default;

 $crispy__padding: 0.4em 0.6em !default;
 $crispy__padding: 5px 12px !default;
 $crispy__padding-breakpoints: (
    $crispy__md: 0.8em 1.1em
    $crispy__md: 10px 17px
 ) !default;


--- a/src/components/_button.scss
+++ b/src/components/_button.scss
@ -35,13 +35,13 @@ $crispy__button__margin-breakpoints: $crispy__margin-breakpoints !default;
        font-weight: $crispy__button__font-weight;

        font-size: $crispy__button__font-size;
        @include crispy__media__breakpoints('font-size', $crispy__button__font-size-breakpoints);
        @include crispy__media-breakpoints('font-size', $crispy__button__font-size-breakpoints);

        margin: $crispy__button__margin;
        @include crispy__media__breakpoints('margin', $crispy__button__margin-breakpoints);
        @include crispy__media-breakpoints('margin', $crispy__button__margin-breakpoints);

        padding: $crispy__button__padding;
        @include crispy__media__breakpoints('padding', $crispy__button__padding-breakpoints);
        @include crispy__media-breakpoints('padding', $crispy__button__padding-breakpoints);

        &:hover {
            cursor: pointer;
--- a/src/components/_code.scss
+++ b/src/components/_code.scss
@ -33,9 +33,9 @@ $crispy__code__margin-breakpoints: $crispy__margin-breakpoints !default;
        background-color: $crispy__code__background-color;

        margin: $crispy__code__margin;
        @include crispy__media__breakpoints('margin', $crispy__code__margin-breakpoints);
        @include crispy__media-breakpoints('margin', $crispy__code__margin-breakpoints);

        padding: $crispy__code__padding;
        @include crispy__media__breakpoints('padding', $crispy__code__padding-breakpoints);
        @include crispy__media-breakpoints('padding', $crispy__code__padding-breakpoints);
    }
 }
--- a/src/components/_field.scss
+++ b/src/components/_field.scss
@ -53,7 +53,7 @@ $crispy__field__select__border: $crispy__border !default;
@mixin crispy__field() {
    .field {
        margin: $crispy__field__margin;
        @include crispy__media__breakpoints('margin', $crispy__field__margin-breakpoints);
        @include crispy__media-breakpoints('margin', $crispy__field__margin-breakpoints);
    }

    .field__text, .field__select, .field__select, .field__label {
@ -61,7 +61,7 @@ $crispy__field__select__border: $crispy__border !default;
        font-weight: $crispy__field__font-weight;

        font-size: $crispy__field__font-size;
        @include crispy__media__breakpoints('font-size', $crispy__field__font-size-breakpoints);
        @include crispy__media-breakpoints('font-size', $crispy__field__font-size-breakpoints);
    }

    // basic style for input elements, will be used to @extend
@ -73,7 +73,7 @@ $crispy__field__select__border: $crispy__border !default;
        appearance: none;

        padding: $crispy__field__padding;
        @include crispy__media__breakpoints('padding', $crispy__field__padding-breakpoints);
        @include crispy__media-breakpoints('padding', $crispy__field__padding-breakpoints);
    }

    /**
@ -138,7 +138,7 @@ $crispy__field__select__border: $crispy__border !default;
        background-color: $crispy__field__select__background-color;

        padding: $crispy__field__select__padding;
        @include crispy__media__breakpoints('padding', $crispy__field__select__padding-breakpoints);
        @include crispy__media-breakpoints('padding', $crispy__field__select__padding-breakpoints);

        &:focus {
            outline: 0;
@ -219,7 +219,7 @@ $crispy__field__select__border: $crispy__border !default;

    .field__panel {
        padding: $crispy__field__padding;
        @include crispy__media__breakpoints('padding', $crispy__field__padding-breakpoints);
        @include crispy__media-breakpoints('padding', $crispy__field__padding-breakpoints);
    }

    .field--valid {
--- a/src/components/_group.scss
+++ b/src/components/_group.scss
@ -18,7 +18,7 @@ $crispy__group__character: '/' !default;

@mixin crispy__group() {
    .group {
        @include crispy__clear_list();
        @include crispy__clearlist();
        display: inline-block;

        .group__item {
--- a/src/components/_modal.scss
+++ b/src/components/_modal.scss
@ -36,7 +36,7 @@ $crispy__modal__z-index: zIndex('modal') !default;
        transform: translate(-50%,-50%);

        // make sure that on smartphones modal uses full width
        @include crispy__media__breakpoints('max-width', $crispy__modal__max-width-breakpoints);
        @include crispy__media-breakpoints('max-width', $crispy__modal__max-width-breakpoints);

        &--fixed {
            position: fixed;
@ -60,7 +60,7 @@ $crispy__modal__z-index: zIndex('modal') !default;
        &--center-right,
        &--center-left {
            transform: translate(0, 0);
            @include crispy__media__breakpoints('margin', $crispy__modal__margin-breakpoints);
            @include crispy__media-breakpoints('margin', $crispy__modal__margin-breakpoints);
        }

        &--bottom-left, &--bottom-right, &--bottom-center {
--- a/src/components/_panel.scss
+++ b/src/components/_panel.scss
@ -23,7 +23,7 @@ $crispy__panel__background-color: $crispy__color-grey-light !default;

        &__inner {
            padding: $crispy__panel__inner-padding;
            @include crispy__media__breakpoints('padding', $crispy__panel__inner-padding-breakpoints);
            @include crispy__media-breakpoints('padding', $crispy__panel__inner-padding-breakpoints);
        }
    }
 }
--- a/src/components/_table.scss
+++ b/src/components/_table.scss
@ -57,7 +57,7 @@ $crispy__table__striped__background-color: $crispy__color-grey-light !default;
            border-bottom: $crispy__table__td__border;

            padding: $crispy__table__padding;
            @include crispy__media__breakpoints('padding', $crispy__table__padding-breakpoints);
            @include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints);
        }

        th {
--- a/src/core/_heading.scss
+++ b/src/core/_heading.scss
@ -21,7 +21,7 @@
        line-height: 1.2;
        
        margin: $crispy__heading__margin;
        @include crispy__media__breakpoints('margin', $crispy__heading__margin-breakpoints);
        @include crispy__media-breakpoints('margin', $crispy__heading__margin-breakpoints);
    }

    h5 {
@ -35,7 +35,7 @@
    @each $h, $font-size in $crispy__heading__font-sizes {
        #{$h}, .#{$h} {
            font-size: $font-size;
            @include crispy__media__breakpoints__diff($crispy__heading__font-sizes__breakpoints, $font-size, $crispy__font-size);
            @include crispy__media-breakpoints-font-size($crispy__heading__font-sizes__breakpoints, $font-size, $crispy__font-size);
        }
    }
 }
--- a/src/core/_normalize.scss
+++ b/src/core/_normalize.scss
@ -45,7 +45,7 @@

    figure {
        margin: $crispy__margin;
        @include crispy__media__breakpoints('margin', $crispy__margin-breakpoints);
        @include crispy__media-breakpoints('margin', $crispy__margin-breakpoints);
    }

    figcaption {
@ -170,6 +170,6 @@
        font-family: $crispy__font-family-monospace;
        font-size: $crispy__font-size-monospace;

        @include crispy__media__breakpoints('font-size', $crispy__font-size-monospace__breakpoints);
        @include crispy__media-breakpoints('font-size', $crispy__font-size-monospace__breakpoints);
    }
 }
--- a/src/core/_typography.scss
+++ b/src/core/_typography.scss
@ -12,7 +12,7 @@
    // paragraphs
    p {
        margin: $crispy__margin;
        @include crispy__media__breakpoints('margin', $crispy__margin-breakpoints);
        @include crispy__media-breakpoints('margin', $crispy__margin-breakpoints);
    }

    // Semantic text elements
@ -93,7 +93,7 @@
        padding: 0;
        
        margin: $crispy__margin;
        @include crispy__media__breakpoints('margin', $crispy__margin-breakpoints);
        @include crispy__media-breakpoints('margin', $crispy__margin-breakpoints);
    }

    ol,
--- a/src/example/components/_triangle.scss
+++ b/src/example/components/_triangle.scss
@ -1,31 +0,0 @@
 /**
 *  components: triangle
 *
 *
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */

@mixin component__triangle() {
    .triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
        display: block;
    }

    .triangle-left {
        @include triangle('left', $crispy__color-primary);
    }

    .triangle-right {
        @include triangle('right', $crispy__color-primary);
    }

    .triangle-top {
        @include triangle('top', $crispy__color-primary);
    }

    .triangle-bottom {
        @include triangle('bottom', $crispy__color-primary);
    }
 }
--- a/src/example/components/_main.scss
+++ b/src/example/components/_main.scss
@ -1,5 +1,5 @@
 /**
 *  components: header
 *  site: header
 *
 *
 *  @author Björn Hase, Tentakelfabrik
@ -8,7 +8,7 @@
 *
 */

@mixin component__main() {
@mixin site__main() {
    .main {
        &__title {
            margin-top: 80px;
--- a/src/example/styles.scss
+++ b/src/example/styles.scss
@ -1,17 +1,14 @@
@import

    'reflex',
    '../crispy-all',
    'site/header',
    'site/main',
    'components/button',
    'components/main',
    'components/triangle',
    'templates/home';

@include component__main();
@include component__button();
@include component__triangle();
@include site__header();
@include site__main();
@include template__home();

 .container {
--- a/src/html/partials/components.html
+++ b/src/html/partials/components.html
@ -1,5 +1,5 @@
 <!-- components / button -->
 <h2 class="margin-bottom-1">
 <h2 class="h3 margin-bottom-1">
    Button
 </h2>
 <hr class="marginless margin-bottom-2" />
@ -43,7 +43,7 @@ $crispy__button__margin-breakpoints: $crispy__margin-breakpoints;


 <!-- components / code -->
 <h2 class="margin-top-3 margin-bottom-1">
 <h2 class="h3 margin-top-3 margin-bottom-1">
    Code
 </h2>
 <hr class="marginless margin-bottom-2" />
@ -66,7 +66,7 @@ $crispy__code__margin-breakpoints: $crispy__margin-breakpoints;


 <!-- components / fields -->
 <h2 class="margin-top-3">
 <h2 class="h3 margin-top-3">
    Fields
 </h2>
 <h3 class="h4 magin-top-2">SCSS:</h3>
@ -372,7 +372,7 @@ $crispy__field__select__border: $crispy__border;</code></pre>


 <!-- components / group -->
 <h2 class="margin-top-3">
 <h2 class="h3 margin-top-3">
    Group
 </h2>

@ -416,7 +416,7 @@ $crispy__group__character: '/' !default;</code></pre>


 <!-- components / hero -->
 <h2 class="margin-top-3">
 <h2 class="h3 margin-top-3">
    Hero
 </h2>
 <h3 class="h4">Html:</h3>
@ -429,7 +429,7 @@ $crispy__group__character: '/' !default;</code></pre>


 <!-- icons -->
 <h2 class="margin-top-3">
 <h2 class="h3 margin-top-3">
    Icon
 </h2>

@ -481,7 +481,7 @@ $crispy__group__character: '/' !default;</code></pre>


 <!-- components / media -->
 <h2 class="margin-top-3">
 <h2 class="h3 margin-top-3">
    Media
 </h2>
 <h3 class="h4">Html:</h3>
@ -505,7 +505,7 @@ $crispy__group__character: '/' !default;</code></pre>


 <!-- components / panel -->
 <h2 class="margin-top-3">
 <h2 class="h3 margin-top-3">
    Panel
 </h2>

@ -529,7 +529,7 @@ $crispy__panel__background-color: $crispy__color-grey-light;


 <!-- components / progress -->
 <h2 class="margin-top-3">
 <h2 class="h3 margin-top-3">
    Progress
 </h2>

@ -552,7 +552,7 @@ $crispy__progress__border-color: $crispy__color-border;


 <!-- components / modal -->
 <h2 class="margin-top-3">
 <h2 class="h3 margin-top-3">
    Modal
 </h2>

@ -615,7 +615,7 @@ $crispy__modal__z-index: zIndex('modal');</code></pre>


 <!-- components / table -->
 <h2 class="margin-top-3">
 <h2 class="h3 margin-top-3">
    Table
 </h2>

--- a/src/html/partials/footer.html
+++ b/src/html/partials/footer.html
@ -11,7 +11,7 @@
                            <a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a>
                        </li>
                        <li class="group__item">
                            <a class="text-color-white" href="https://github.com/tentakelfabrik/crispy-css">
                            <a class="text-color-white" href="https://github.com/tentakelfabrik/crispy-css" target="_blank">
                                <svg class="icon" alt="github">
                                    <use xlink:href="symbol-defs.svg#icon-github" />
                                </svg>
@ -19,7 +19,7 @@
                        </li>
                    </ul>
                    <p class="margin-top-1 margin-bottom-0">
                        Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a>
                        Made with euphoria by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a>
                    </p>
                </div>
            </div>
--- a/src/html/partials/functions.html
+++ b/src/html/partials/functions.html
@ -1,24 +1,38 @@
 <!-- functions / getDefault -->
 <h2 class="h3 margin-bottom-1">
    getValue($map)
 </h2>
 <hr class="marginless margin-bottom-2" />
 <p>
    Returns a value from a map if key "default" found.
 </p>


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

 <h3 class="h4">SCSS:</h3>
 <pre class="code"><code>stripUnit(10px);</code></pre>


 <!-- functions / zIndex -->
 <h3 class="h4 margin-top-0">
    zIndex(name)
 </h3>
 <h4 class="h6 margin-top-1">Sass:</h4>
 <pre class="code"><code>zIndex('modal');</code></pre>
 <h2 class="h3 margin-top-3 margin-bottom-1">
    zIndex($name)
 </h2>
 <hr class="marginless margin-bottom-2" />
 <p>
    Returns value from $crispy__z-index.
 </p>
 <h4 class="h6 margin-top-1">Sass:</h4>

 <h3 class="h4">SCSS:</h3>
 <pre class="code"><code>$crispy__z-index: (
    'overlay': 90,
    'modal'  : 100
 );</code></pre>
 );</code></pre>
 <pre class="code"><code>zIndex('modal');</code></pre>
--- a/src/html/partials/helpers.html
+++ b/src/html/partials/helpers.html
@ -1,5 +1,7 @@
 <!-- border -->
 <h3 class="h4 margin-top-2">Border</h3>
 <h2 class="h3 margin-top-3 margin-bottom-1">Border</h2>
 <hr class="marginless margin-bottom-2" />

 <div class="panel panel__inner margin-bottom-1 bordered">
    <div style="width: 50px; height: 50px;" class="background-color-info round"></div>
    .round
@ -12,8 +14,24 @@
 <div class="panel panel__inner margin-bottom-1 bordered rounded">.rounded</div>
 <div class="panel panel__inner margin-bottom-1 bordered borderless">.borderless</div>


 <!-- margin and padding -->
 <h3 class="h4 margin-top-3">Margin / Padding</h3>
 <h2 class="h3 margin-top-3 margin-bottom-1">Margin / Padding</h2>
 <hr class="marginless margin-bottom-2" />
 <p>
    Padding and margin-left, -top, -right and -bottom. The Classes Paddingless and Marginless sets padding and margin in each
    direction to zero. 
 </p>

 <h3 class="h4">SCSS:</h3>
 <pre class="code"><code>$crispy__helpers__spacing-gap: 8px;
 $crispy__helpers__spacing-steps: 6;
 $crispy__helpers__spacing-max-steps: 3;
 $crispy__helpers__spacing-breakpoints: (
    $crispy__md: 12px
 );
 </code></pre>

 <div class="panel bordered padding-bottom-0">padding-bottom-0</div>
 <div class="panel bordered padding-bottom-1">padding-bottom-1</div>
 <div class="panel bordered padding-bottom-2">padding-bottom-2</div>
@ -21,9 +39,14 @@
 <div class="panel bordered padding-bottom-4">padding-bottom-4</div>
 <div class="panel bordered padding-bottom-5">padding-bottom-5</div>
 <div class="panel bordered padding-bottom-6">padding-bottom-6</div>
 <div class="panel bordered paddingless">paddingless</div>
 <div class="panel bordered paddingless">marginless</div>


 <!-- typography -->
 <h3 class="h4 margin-top-3">Typography</h3>
 <h2 class="h3 margin-top-3 margin-bottom-1">Typography</h2>
 <hr class="marginless margin-bottom-2" />

 <p class="panel panel__inner bordered text-left">text-left</p>
 <p class="panel panel__inner bordered text-center">text-center</p>
 <p class="panel panel__inner bordered text-right">text-right</p>
@ -44,8 +67,98 @@
 <p class="panel panel__inner bordered text-crossed">text-crossed</p>
 <p class="panel panel__inner bordered text-unterline">text-underline</p>


 <!-- Font-Size -->
 <h2 class="h3 margin-top-3 margin-bottom-1">Font Size</h2>
 <hr class="marginless margin-bottom-2" />
 <h3 class="h4">SCSS:</h3>
 <pre class="code"><code>$crispy__font-size: 0.9rem;
 $crispy__font-size-breakpoints: (
    $crispy__md: 1.1rem
 );

 $crispy__font-sizes: (
    'default' : $crispy__font-size,
    'small'   : $crispy__font-size * 0.75,
    'medium'  : $crispy__font-size * 1.25,
    'large'   : $crispy__font-size * 1.5,
    'big'     : $crispy__font-size * 1.75,
    'mega'    : $crispy__font-size * 2,
 );
 </code></pre>
 <p class="panel panel__inner bordered text-size-small">text-size-small</p>
 <p class="panel panel__inner bordered text-size-medium">text-size-medium</p>
 <p class="panel panel__inner bordered text-size-large">text-size-large</p>
 <p class="panel panel__inner bordered text-size-big">text-size-big</p>
 <p class="panel panel__inner bordered text-size-mega">text-size-mega</p>


 <!-- Float -->
 <h2 class="h3 margin-top-3 margin-bottom-1">Float</h2>
 <hr class="marginless margin-bottom-2" />
 <p class="panel panel__inner bordered clearfix">
    <span class="float-left">float-left</span>
 </p>
 <p class="panel panel__inner bordered clearfix">
    <span class="float-right">float-right</span>
 </p>
 <p class="panel panel__inner bordered">
    <span class="float-right float-none">float-none</span>
 </p>
 <p class="panel panel__inner bordered">
    <span class="show centered width-25 text-center background-color-info">centered</span>
 </p>


 <!-- Colors -->
 <h2 class="h3 margin-top-3 margin-bottom-1">Colors</h2>
 <hr class="marginless margin-bottom-2" />
 <h3 class="h4">SCSS:</h3>
 <pre class="code"><code>$crispy__colors: (
    'primary'    : $crispy__color-primary,
    'secondary'  : $crispy__color-secondary,
    'success'    : $crispy__color-success,
    'warning'    : $crispy__color-warning,
    'danger'     : $crispy__color-danger,
    'info'       : $crispy__color-info,
    'grey'       : $crispy__color-grey,
    'grey-light' : $crispy__color-grey-light,
    'grey-dark'  : $crispy__color-grey-dark,
    'white'      : $crispy__color-white
 );
 </code></pre>
 <p class="panel panel__inner bordered text-color-danger">text-color-danger</p>
 <p class="panel panel__inner bordered background-color-info">background-color-info</p>
 <p class="panel panel__inner bordered border-color-success">border-color-success</p>


 <!-- Hide & Show -->
 <h2 class="h3 margin-top-3 margin-bottom-1">Hide & Show</h2>
 <hr class="marginless margin-bottom-2" />
 <p>
    For each Breakpoint there is a hide & show-CSS-Class.
 </p>

 <h3 class="h4">Html:</h3>
 <pre class="code"><code>&lt;span class=&quot;hide&quot;&gt;&lt;/span&gt;
 &lt;span class=&quot;show&quot;&gt;&lt;/span&gt;
 &lt;span class=&quot;show-inline&quot;&gt;&lt;/span&gt;
 &lt;span class=&quot;show hide-lg&quot;&gt;&lt;/span&gt;
 </code></pre>


 <!-- width -->
 <h3 class="h4 margin-top-3">Width</h3>
 <h2 class="h3 margin-top-3 margin-bottom-1">Width</h2>
 <hr class="marginless margin-bottom-2" />
 <h3 class="h4">SCSS:</h3>
 <pre class="code"><code>$crispy__helpers__width: (
    '25' : 25%,
    '50' : 50%,
    '75' : 75%,
    '100': 100%
 );
 </code></pre>

 <div class="panel panel__inner bordered width-25 margin-bottom-1">width-25</div>
 <div class="panel panel__inner bordered width-50 margin-bottom-1">width-50</div>
 <div class="panel panel__inner bordered width-75 margin-bottom-1">width-75</div>
--- a/src/html/partials/imprint.html
+++ b/src/html/partials/imprint.html
@ -0,0 +1,20 @@
 <h2 class="h3">Information pursuant to Sect. 5 German Telemedia Act (TMG)</h2>
 <p>Björn Hase<br />
 Tentakelfabrik<br />
 Obermarktstr. 18<br />
 32423 Minden</p>

 <h2 class="h3">Contact</h2>
 <p>Phone: +49 (0)176 6335 6920<br />
 E-mail: <a href="mailto:me@tentakelfabrik.de">me@tentakelfabrik.de</a></p>

 <h2 class="h3">VAT ID</h2>
 <p>Sales tax identification number according to Sect. 27 a of the Sales Tax Law:<br />
 DE277227833</p>

 <h2 class="h3">EU dispute resolution</h2>
 <p>The European Commission provides a platform for online dispute resolution (ODR): <a href="https://ec.europa.eu/consumers/odr" target="_blank" rel="noopener noreferrer">https://ec.europa.eu/consumers/odr</a>.<br /> Our e-mail address can be found above in the site notice.</p>

 <h2 class="h3">Dispute resolution proceedings in front of a consumer arbitration board</h2><p>We are not willing or obliged to participate in dispute resolution proceedings in front of a consumer arbitration board.</p>

 <h3 class="h4">Liability for Contents</h3> <p>As service providers, we are liable for own contents of these websites according to Paragraph 7, Sect. 1 German Telemedia Act (TMG). However, according to Paragraphs 8 to 10 German Telemedia Act (TMG), service providers are not obligated to permanently monitor submitted or stored information or to search for evidences that indicate illegal activities.</p> <p>Legal obligations to removing information or to blocking the use of information remain unchallenged. In this case, liability is only possible at the time of knowledge about a specific violation of law. Illegal contents will be removed immediately at the time we get knowledge of them.</p> <h3>Liability for Links</h3> <p>Our offer includes links to external third party websites. We have no influence on the contents of those websites, therefore we cannot guarantee for those contents. Providers or administrators of linked websites are always responsible for their own contents.</p> <p>The linked websites had been checked for possible violations of law at the time of the establishment of the link. Illegal contents were not detected at the time of the linking. A permanent monitoring of the contents of linked websites cannot be imposed without reasonable indications that there has been a violation of law. Illegal links will be removed immediately at the time we get knowledge of them.</p> <h3>Copyright</h3> <p>Contents and compilations published on these websites by the providers are subject to German copyright laws. Reproduction, editing, distribution as well as the use of any kind outside the scope of the copyright law require a written permission of the author or originator. Downloads and copies of these websites are permitted for private use only.<br /> The commercial use of our contents without permission of the originator is prohibited.</p> <p>Copyright laws of third parties are respected as long as the contents on these websites do not originate from the provider. Contributions of third parties on this site are indicated as such. However, if you notice any violations of copyright law, please inform us. Such contents will be removed immediately.</p>
--- a/src/html/partials/mixins.html
+++ b/src/html/partials/mixins.html
@ -1,94 +1,55 @@
 <!-- mixins / triangle -->
 <h3 class="h4 margin-top-1">
    Triangle
 </h3>
 <h4 class="h6 margin-top-1">Sass:</h4>
 <pre class="code"><code>.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
 display: block;
 }
 <!-- mixins / crispy__clearfix -->
 <h2 class="h3 margin-bottom-1">
    crispy__clearfix()
 </h2>
 <hr class="marginless margin-bottom-2" />
 <p>Clear Floats.</p>

 .triangle-left {
@include triangle('left', $crispy__color-primary);
 }

 .triangle-right {
@include triangle('right', $crispy__color-primary);
 }
 <!-- mixins / crispy__clearlist -->
 <h2 class="h3 margin-top-3 margin-bottom-1">
    crispy__clearlist()
 </h2>
 <hr class="marginless margin-bottom-2" />
 <p>Resets Style for a List-Element</p>


 <!-- mixins / crispy__media -->
 <h2 class="h3 margin-top-3 margin-bottom-1">
    crispy__media-*, crispy__media-*-only
 </h2>
 <hr class="marginless margin-bottom-2" />
 <p>For each Breakpoint there is a Mixin as an Media Query.</p>

 <pre class="code"><code>@include crispy__media-xs() {

 .triangle-top {
@include triangle('top', $crispy__color-primary);
 }

 .triangle-bottom {
@include triangle('bottom', $crispy__color-primary);
@include crispy__media-xs-only() {

 }
 </code></pre>
 <p>
    <span class="triangle-right"></span>
    <span class="triangle-left"></span>
    <span class="triangle-top"></span>
    <span class="triangle-bottom"></span>
 </p>

 <!-- mixins / media-queries -->
 <h3 class="h4 margin-top-1">
    Media Queries
 </h3>
 <p>
    These <strong>@mixins</strong> were used with the Breakpoints from <a target="_blank" href="http://reflexgrid.com/docs/">http://reflexgrid.com/docs/</a>.
    Reflex-Grid is also used as grid for this Site.
 </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-1">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-1">Sass:</h4>
 <pre class="code"><code>.sm, .md, .md-only, .lg-only {
 display: none;
 }

 .sm {
@include crispy__media-sm() {
 display: block;
 }
 }
 <!-- mixins / crispy__media-breakpoints -->
 <h2 class="h3 margin-top-3 margin-bottom-1">
    crispy__media-breakpoints($property, $breakpoints, $important: false)
 </h2>
 <hr class="marginless margin-bottom-2" />
 <p>Set property and his value for each Breakpoint.</p>

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

 .md-only {
@include crispy__media-md-only() {
 display: block;
 }
 }
 <!-- mixins / crispy__media-breakpoints-calculate -->
 <h2 class="h3 margin-top-3 margin-bottom-1">
    crispy__media-breakpoints-calculate($property, $factor, $breakpoints, $important: false)
 </h2>
 <hr class="marginless margin-bottom-2" />
 <p>Set property and his value with an factor for each Breakpoint.</p>

 .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>

 <!-- mixins / crispy__media-breakpoints-font-size -->
 <h2 class="h3 margin-top-3 margin-bottom-1">
    crispy__media-breakpoints-font-size($breakpoints, $font-size, $default, $important: false)
 </h2>
 <hr class="marginless margin-bottom-2" />
 <p>Set font-size from Breakpoints, use for calculating difference from font-size and default font-size</p>
--- a/src/html/partials/privacy-policy.html
+++ b/src/html/partials/privacy-policy.html
@ -0,0 +1,25 @@
 <h2 class="h3">1. An overview of data protection</h2>
 <h3 class="h4">General information</h3> <p>The following information will provide you with an easy to navigate overview of what will happen with your personal data when you visit this website. The term “personal data” comprises all data that can be used to personally identify you. For detailed information about the subject matter of data protection, please consult our Data Protection Declaration, which we have included beneath this copy.</p>
 <h3 class="h4">Data recording on this website</h3> <p><strong>Who is the responsible party for the recording of data on this website (i.e. the “controller”)?</strong></p> <p>The data on this website is processed by the operator of the website, whose contact information is available under section “Information Required by Law” on this website.</p> <p><strong>How do we record your data?</strong></p> <p>We collect your data as a result of your sharing of your data with us. This may, for instance be information you enter into our contact form.</p> <p>Other data shall be recorded by our IT systems automatically or after you consent to its recording during your website visit. This data comprises primarily technical information (e.g. web browser, operating system or time the site was accessed). This information is recorded automatically when you access this website.</p> <p><strong>What are the purposes we use your data for?</strong></p> <p>A portion of the information is generated to guarantee the error free provision of the website. Other data may be used to analyze your user patterns.</p> <p><strong>What rights do you have as far as your information is concerned?</strong></p> <p>You have the right to receive information about the source, recipients and purposes of your archived personal data at any time without having to pay a fee for such disclosures. You also have the right to demand that your data are rectified or eradicated. If you have consented to data processing, you have the option to revoke this consent at any time, which shall affect all future data processing. Moreover, you have the right to demand that the processing of your data be restricted under certain circumstances. Furthermore, you have the right to log a complaint with the competent supervising agency.</p> <p>Please do not hesitate to contact us at any time under the address disclosed in section “Information Required by Law” on this website if you have questions about this or any other data protection related issues.</p>
 <h2 class="h3">2. Hosting and Content Delivery Networks (CDN)</h2>
 <h3 class="h4">External Hosting</h3> <p>This website is hosted by an external service provider (host). Personal data collected on this website are stored on the servers of the host. These may include, but are not limited to, IP addresses, contact requests, metadata and communications, contract information, contact information, names, web page access, and other data generated through a web site.</p> <p>The host is used for the purpose of fulfilling the contract with our potential and existing customers (Art. 6 para. 1 lit. b GDPR) and in the interest of secure, fast and efficient provision of our online services by a professional provider (Art. 6 para. 1 lit. f GDPR).</p> <p>Our host will only process your data to the extent necessary to fulfil its performance obligations and to follow our instructions with respect to such data.</p>
 <h2 class="h3">3. General information and mandatory information</h2>
 <h3 class="h4">Data protection</h3> <p>The operators of this website and its pages take the protection of your personal data very seriously. Hence, we handle your personal data as confidential information and in compliance with the statutory data protection regulations and this Data Protection Declaration.</p> <p>Whenever you use this website, a variety of personal information will be collected. Personal data comprises data that can be used to personally identify you. This Data Protection Declaration explains which data we collect as well as the purposes we use this data for. It also explains how, and for which purpose the information is collected.</p> <p>We herewith advise you that the transmission of data via the Internet (i.e. through e-mail communications) may be prone to security gaps. It is not possible to completely protect data against third party access.</p>
 <h3 class="h4">Information about the responsible party (referred to as the “controller” in the GDPR)</h3> <p>The data processing controller on this website is:</p> <p>Björn Hase<br />
 Tentakelfabrik<br />
 Obermarktstr. 18<br />
 32423 Minden</p>

 <p>Phone: +49 (0)176 6335 6920<br />
 E-mail: <a href="mailto:me@tentakelfabrik.de">me@tentakelfabrik.de</a></p>
 <p>The controller is the natural person or legal entity that single-handedly or jointly with others makes decisions as to the purposes of and resources for the processing of personal data (e.g. names, e-mail addresses, etc.).</p>
 <h3 class="h4">Revocation of your consent to the processing of data</h3> <p>A wide range of data processing transactions are possible only subject to your express consent. You can also revoke at any time any consent you have already given us. This shall be without prejudice to the lawfulness of any data collection that occurred prior to your revocation.</p>
 <h3 class="h4">Right to object to the collection of data in special cases; right to object to direct advertising (Art. 21 GDPR)</h3> <p>IN THE EVENT THAT DATA ARE PROCESSED ON THE BASIS OF ART. 6 SECT. 1 LIT. E OR F GDPR, YOU HAVE THE RIGHT TO AT ANY TIME OBJECT TO THE PROCESSING OF YOUR PERSONAL DATA BASED ON GROUNDS ARISING FROM YOUR UNIQUE SITUATION. THIS ALSO APPLIES TO ANY PROFILING BASED ON THESE PROVISIONS. TO DETERMINE THE LEGAL BASIS, ON WHICH ANY PROCESSING OF DATA IS BASED, PLEASE CONSULT THIS DATA PROTECTION DECLARATION. IF YOU LOG AN OBJECTION, WE WILL NO LONGER PROCESS YOUR AFFECTED PERSONAL DATA, UNLESS WE ARE IN A POSITION TO PRESENT COMPELLING PROTECTION WORTHY GROUNDS FOR THE PROCESSING OF YOUR DATA, THAT OUTWEIGH YOUR INTERESTS, RIGHTS AND FREEDOMS OR IF THE PURPOSE OF THE PROCESSING IS THE CLAIMING, EXERCISING OR DEFENCE OF LEGAL ENTITLEMENTS (OBJECTION PURSUANT TO ART. 21 SECT. 1 GDPR).</p> <p>IF YOUR PERSONAL DATA IS BEING PROCESSED IN ORDER TO ENGAGE IN DIRECT ADVERTISING, YOU HAVE THE RIGHT TO AT ANY TIME OBJECT TO THE PROCESSING OF YOUR AFFECTED PERSONAL DATA FOR THE PURPOSES OF SUCH ADVERTISING. THIS ALSO APPLIES TO PROFILING TO THE EXTENT THAT IT IS AFFILIATED WITH SUCH DIRECT ADVERTISING. IF YOU OBJECT, YOUR PERSONAL DATA WILL SUBSEQUENTLY NO LONGER BE USED FOR DIRECT ADVERTISING PURPOSES (OBJECTION PURSUANT TO ART. 21 SECT. 2 GDPR).</p>
 <h3 class="h4">Right to log a complaint with the competent supervisory agency</h3> <p>In the event of violations of the GDPR, data subjects are entitled to log a complaint with a supervisory agency, in particular in the member state where they usually maintain their domicile, place of work or at the place where the alleged violation occurred. The right to log a complaint is in effect regardless of any other administrative or court proceedings available as legal recourses.</p>
 <h3 class="h4">Right to data portability</h3> <p>You have the right to demand that we hand over any data we automatically process on the basis of your consent or in order to fulfil a contract be handed over to you or a third party in a commonly used, machine readable format. If you should demand the direct transfer of the data to another controller, this will be done only if it is technically feasible.</p>
 <h3 class="h4">SSL and/or TLS encryption</h3> <p>For security reasons and to protect the transmission of confidential content, such as purchase orders or inquiries you submit to us as the website operator, this website uses either an SSL or a TLS encryption program. You can recognize an encrypted connection by checking whether the address line of the browser switches from “http://” to “https://” and also by the appearance of the lock icon in the browser line.</p> <p>If the SSL or TLS encryption is activated, data you transmit to us cannot be read by third parties.</p>
 <h3 class="h4">Information about, rectification and eradication of data</h3> <p>Within the scope of the applicable statutory provisions, you have the right to at any time demand information about your archived personal data, their source and recipients as well as the purpose of the processing of your data. You may also have a right to have your data rectified or eradicated. If you have questions about this subject matter or any other questions about personal data, please do not hesitate to contact us at any time at the address provided in section “Information Required by Law.”</p>
 <h3 class="h4">Right to demand processing restrictions</h3> <p>You have the right to demand the imposition of restrictions as far as the processing of your personal data is concerned. To do so, you may contact us at any time at the address provided in section “Information Required by Law.” The right to demand restriction of processing applies in the following cases:</p> <ul> <li>In the event that you should dispute the correctness of your data archived by us, we will usually need some time to verify this claim. During the time that this investigation is ongoing, you have the right to demand that we restrict the processing of your personal data.</li> <li>If the processing of your personal data was/is conducted in an unlawful manner, you have the option to demand the restriction of the processing of your data in lieu of demanding the eradication of this data.</li> <li>If we do not need your personal data any longer and you need it to exercise, defend or claim legal entitlements, you have the right to demand the restriction of the processing of your personal data instead of its eradication.</li> <li>If you have raised an objection pursuant to Art. 21 Sect. 1 GDPR, your rights and our rights will have to be weighed against each other. As long as it has not been determined whose interests prevail, you have the right to demand a restriction of the processing of your personal data.</li> </ul> <p>If you have restricted the processing of your personal data, these data – with the exception of their archiving – may be processed only subject to your consent or to claim, exercise or defend legal entitlements or to protect the rights of other natural persons or legal entities or for important public interest reasons cited by the European Union or a member state of the EU.</p>
 <h2 class="h3">4. Recording of data on this website</h2>
 <h3 class="h4">Server log files</h3> <p>The provider of this website and its pages automatically collects and stores information in so-called server log files, which your browser communicates to us automatically. The information comprises:</p> <ul> <li>The type and version of browser used</li> <li>The used operating system</li> <li>Referrer URL</li> <li>The hostname of the accessing computer</li> <li>The time of the server inquiry</li> <li>The IP address</li> </ul> <p>This data is not merged with other data sources.</p> <p>This data is recorded on the basis of Art. 6 Sect. 1 lit. f GDPR. The operator of the website has a legitimate interest in the technically error free depiction and the optimization of the operator’s website. In order to achieve this, server log files must be recorded.</p>
 <h3 class="h4">Request by e-mail, telephone or fax</h3> <p>If you contact us by e-mail, telephone or fax, your request, including all resulting personal data (name, request) will be stored and processed by us for the purpose of processing your request. We do not pass these data on without your consent.</p> <p>These data are processed on the basis of Art. 6 Sect. 1 lit. b GDPR if your inquiry is related to the fulfillment of a contract or is required for the performance of pre-contractual measures. In all other cases, the data are processed on the basis of our legitimate interest in the effective handling of inquiries submitted to us (Art. 6 Sect. 1 lit. f GDPR) or on the basis of your consent (Art. 6 Sect. 1 lit. a GDPR) if it has been obtained.</p> <p>The data sent by you to us via contact requests remain with us until you request us to delete, revoke your consent to the storage or the purpose for the data storage lapses (e.g. after completion of your request). Mandatory statutory provisions - in particular statutory retention periods - remain unaffected.</p>