adding

4 years ago · 48b375bc4d
--- a/dist/crispy-all.css
+++ b/dist/crispy-all.css
--- a/dist/crispy-minimal.css
+++ b/dist/crispy-minimal.css
--- a/dist/examples/components.html
+++ b/dist/examples/components.html
@ -1,21 +1,30 @@
 <!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><header id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid"><div class="col-12 col-md-4"><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-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 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 id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-12 col-md-4"><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-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 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;
 $crispy__button__font-weight: $crispy__font-weight;
 $crispy__button__font-size: $crispy__font-size;
 $crispy__button__font-size-breakpoints: $crispy__font-size__breakpoints;
 $crispy__button__font-size-breakpoints: $crispy__font-size-breakpoints;

 $crispy__button__padding: 0.3em 0.8em;
 $crispy__button__padding: 0.4em 0.8em;
 $crispy__button__padding-breakpoints: (
    $crispy__md: 0.4em 1.2em
    $crispy__md: 0.6em 1.2em
 );

 $crispy__button__margin: $crispy__margin;
 $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__padding: $crispy__padding;
 &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;
 $crispy__code__background-color: $crispy__color-grey-light;

 $crispy__code__padding: $crispy__padding;
 $crispy__code__padding-breakpoints: $crispy__padding-breakpoints;

 $crispy__code__margin: $crispy__margin;
 $crispy__code__border: $crispy__border;
 $crispy__code__background-color: $crispy__color-grey-light;
 </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;
 $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;
 $crispy__field__border: $crispy__border;

 $crispy__field__color--valid: $crispy__color-success;
@ -150,7 +159,7 @@ $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.3em !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="margin-top-3">Group</h2><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__group__margin: 0.3em !default;
 $crispy__group__character: '/' !default;
 $crispy__group__character-margin: 0 $crispy__group__margin 0 !default;</code></pre><h3 class="h4">Html:</h3><pre class="code"><code>&lt;nav&gt;
    &lt;ul class=&quot;group group--hr&quot;&gt;
@ -158,7 +167,7 @@ $crispy__group__character-margin: 0 $crispy__group__margin 0 !default;</code></p
        &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="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;
 </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;
@ -181,21 +190,21 @@ $crispy__group__character-margin: 0 $crispy__group__margin 0 !default;</code></p
    &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="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="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="margin-top-3">Modal</h2><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__modal__max-width-breakpoints: (
    $crispy__md: 50%
 );

@ -209,7 +218,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 !default;
 &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 !default;
 $crispy__table__padding-breakpoints: $crispy__padding-breakpoints !default;

 $crispy__table__td__border: 1px solid $crispy__color-border !default;
--- a/dist/example/core.html
+++ b/dist/example/core.html
@ -0,0 +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 id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-12 col-md-4"><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-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 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></body></html>
--- a/dist/example/functions.html
+++ b/dist/example/functions.html
@ -0,0 +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 id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-12 col-md-4"><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-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 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: (
    '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></body></html>
--- a/dist/example/getting-started.html
+++ b/dist/example/getting-started.html
@ -0,0 +1,126 @@
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Getting started! | 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 id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-12 col-md-4"><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-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Getting started!</h1></header><h2 class="margin-bottom-1">Installation</h2><hr class="marginless margin-bottom-2"/><pre class="code"><code>npm install crispy-css
 </code></pre><h3 class="h4">SCSS</h3><pre class="code"><code>@import
    "node_modules/crispy-css/src/crispy";
 </code></pre><p>Now include Components and Helpers you need.</p><pre class="code"><code>@include crispy__helpers();
@include crispy__button();
@include crispy__code();
@include crispy__field();
@include crispy__group();
@include crispy__hero();
@include crispy__icon();
@include crispy__media();
@include crispy__modal();
@include crispy__overlay();
@include crispy__panel();
@include crispy__progress();
@include crispy__table();
 </code></pre><p>There are two additionals Versions of <span class="text-bold">Crispy</span>. There is <span class="text-bold">crispy-minimal</span>, that only includes Helpers and <span class="text-bold">crispy-all</span> that includes Helpers and all Components.</p><pre class="code"><code>@import
    "node_modules/crispy-css/src/crispy-all";
 </code></pre><pre class="code"><code>@import
    "node_modules/crispy-css/src/crispy-minimal";
 </code></pre><h4 class="h5">Configuration</h4><h5 class="h6">Breakpoints</h5><pre class="code"><code>$crispy__xs : 576px;
 $crispy__sm : 768px;
 $crispy__md : 992px;
 $crispy__lg : 1200px;
 $crispy__xlg: 1600px;
 </code></pre><h5 class="h6">Fonts</h5><pre class="code"><code>$crispy__direction: ltr;

 $crispy__font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 $crispy__font-weight: normal;
 $crispy__font-size: 0.9rem;
 $crispy__font-size-breakpoints: (
    $crispy__md: 1.1rem
 );

 $crispy__font-family-monospace: "Lucida Console", Monaco, monospace;
 $crispy__font-weight-monospace: normal ;
 $crispy__font-size-monospace: 1rem ;
 $crispy__font-size-monospace__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,
 );

 $crispy__line-height: 1.4;
 $crispy__line-height__breakpoints: (
    $crispy__md: $crispy__golden-ratio
 );
 </code></pre><h5 class="h6">Colors</h5><pre class="code"><code>$crispy__color-primary: #f18f01;
 $crispy__color-secondary: #b3b2af;
 $crispy__color-success: #5cb85c;
 $crispy__color-warning: #f0ad4e;
 $crispy__color-danger: #d9534f;
 $crispy__color-info: #0090d4;

 $crispy__color-grey-light: hsl(0, 0%, 97%);
 $crispy__color-grey: hsl(0, 0%, 48%);
 $crispy__color-grey-dark: hsl(0, 0%, 29%);
 $crispy__color-white: white;

 $crispy__color-text: #363636;
 $crispy__color-border: #dfdfdf;
 $crispy__color-background: #ffffff;

 $crispy__color-panel: #f9f9f9;

 $crispy__color-link: $crispy__color-primary;
 $crispy__color-link-hover: $crispy__color-secondary;
 $crispy__color-link-visited: $crispy__color-primary;
 $crispy__color-link-focus: $crispy__color-primary;
 $crispy__color-link-active: $crispy__color-primary;

 $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><h5 class="h6">Padding & Magin</h5><pre class="code"><code>$crispy__margin: 0 0 15px;
 $crispy__margin-breakpoints: (
    $crispy__md: 0 0 20px
 );

 $crispy__padding: 0.4em 0.6em;
 $crispy__padding-breakpoints: (
    $crispy__md: 0.8em 1.1em
 );
 </code></pre><h5 class="h6">Heading</h5><pre class="code"><code>$crispy__heading__font-sizes: (
    'h1': $crispy__font-size * 2.5,
    'h2': $crispy__font-size * 2,
    'h3': $crispy__font-size * 1.75,
    'h4': $crispy__font-size * 1.5,
    'h5': $crispy__font-size * 1.25,
    'h6': $crispy__font-size
 ) ;

 $crispy__heading__font-sizes__breakpoints: (
    $crispy__md: 1.2rem
 );

 $crispy__heading__font-weight: bold;
 $crispy__heading__font-family: $crispy__font-family;
 $crispy__heading__margin: $crispy__margin;
 $crispy__heading__margin-breakpoints: $crispy__margin-breakpoints;
 </code></pre><h5 class="h6">Borders</h5><pre class="code"><code>$crispy__border-radius: 3px !default;
 $crispy__border: 1px solid $crispy__color-border !default;
 </code></pre><h5 class="h6">Z-Index</h5><pre class="code"><code>$crispy__z-index: (
    'overlay': 90,
    'modal'  : 100
 ) !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></body></html>
--- a/dist/example/helpers.html
+++ b/dist/example/helpers.html
--- a/dist/examples/img/gaming-circus.jpg
+++ b/dist/examples/img/gaming-circus.jpg
--- a/dist/examples/img/tentakelfabrik.jpg
+++ b/dist/examples/img/tentakelfabrik.jpg
--- a/dist/examples/img/trinkkofi.jpg
+++ b/dist/examples/img/trinkkofi.jpg
--- a/dist/example/imprint.html
+++ b/dist/example/imprint.html
@ -0,0 +1 @@
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Imprint | 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 id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-12 col-md-4"><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-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Imprint</h1></header></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></body></html>
--- a/dist/example/index.html
+++ b/dist/example/index.html
@ -0,0 +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>
--- a/dist/examples/mixins.html
+++ b/dist/examples/mixins.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>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><header id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid"><div class="col-12 col-md-4"><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-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 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 {
 <!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 id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-12 col-md-4"><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-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 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;
 }

--- a/dist/example/privacy-policy.html
+++ b/dist/example/privacy-policy.html
@ -0,0 +1 @@
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Privacy Policy | 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 id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-12 col-md-4"><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-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Privacy Policy</h1></header></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></body></html>
--- a/dist/example/styles.css
+++ b/dist/example/styles.css
--- a/dist/examples/symbol-defs.svg
+++ b/dist/examples/symbol-defs.svg
--- a/dist/examples/core.html
+++ b/dist/examples/core.html
@ -1 +0,0 @@
 <!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><header id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid"><div class="col-12 col-md-4"><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-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 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><div class="grid"><div class="col-12"><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></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></body></html>
--- a/dist/examples/functions.html
+++ b/dist/examples/functions.html
@ -1,4 +0,0 @@
 <!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><header id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid"><div class="col-12 col-md-4"><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-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 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: (
    '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></body></html>
--- a/dist/examples/getstarted.html
+++ b/dist/examples/getstarted.html
@ -1,16 +0,0 @@
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Get Started | 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><header id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid"><div class="col-12 col-md-4"><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-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getstarted.html" class="text-color-white">Get Started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Get Started</h1></header><h2>Installation</h2><pre class="code"><code>npm install crispy-css</code></pre><h3 class="h4">SCSS</h3><pre class="code"><code>@import "crispy";</code></pre><p>Now include Mixins you need. Components and Modifiziers only works if you include them,</p><pre class="code"><code>@include crispy__button();
@include crispy__code();
@include crispy__field();
@include crispy__group();
@include crispy__hero();
@include crispy__icon();
@include crispy__media();
@include crispy__modal();
@include crispy__overlay();
@include crispy__panel();
@include crispy__progress();
@include crispy__table();</code></pre><p>For Custom Variables add a File before importing Crispy,</p><pre class="code"><code>@import
    "config",
    "crispy";</code></pre><p>If you need all, mixins will be included,</p><pre class="code"><code>@import
    "crispy-all";</code></pre><p>Only need Core and Modifiziers?</p><pre class="code"><code>@import
    "crispy-minimal";</code></pre><h3 class="h4">CSS</h3><p>For using CSS you can use <span class="text-bold">crispy-all.css</span> for all Styles or <span class="text-bold">crispy-mininmal.css</span> without Components.</p><h2>Example</h2><p>You find an example in "/src/example", this is this Documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.</p><h3 class="h4">Site</h3><p>Contains header, footer, partials that are used on a site or webapp. Header and Footer are not classical components, there often more complex and have a special brand.</p><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></body></html>
--- a/dist/examples/getting-started.html
+++ b/dist/examples/getting-started.html
@ -1,16 +0,0 @@
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Getting started! | 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><header id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid"><div class="col-12 col-md-4"><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-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Getting started!</h1></header><h2 class="margin-bottom-1">Installation</h2><hr class="marginless margin-bottom-2"/><pre class="code"><code>npm install crispy-css</code></pre><h3 class="h4">Scss</h3><pre class="code"><code>@import "crispy";</code></pre><p>Now include Mixins you need. Components and Modifiziers only works if you include them,</p><pre class="code"><code>@include crispy__button();
@include crispy__code();
@include crispy__field();
@include crispy__group();
@include crispy__hero();
@include crispy__icon();
@include crispy__media();
@include crispy__modal();
@include crispy__overlay();
@include crispy__panel();
@include crispy__progress();
@include crispy__table();</code></pre><p>For Custom Variables add a File before importing Crispy,</p><pre class="code"><code>@import
    "config",
    "crispy";</code></pre><p>If you need all, mixins will be included,</p><pre class="code"><code>@import
    "crispy-all";</code></pre><p>Only need Core and Modifiziers?</p><pre class="code"><code>@import
    "crispy-minimal";</code></pre><h3 class="h4">CSS</h3><p>For using CSS you can use <span class="text-bold">crispy-all.css</span> for all Styles or <span class="text-bold">crispy-mininmal.css</span> without Components.</p><h2>Example</h2><p>You find an example in "/src/example", this is this Documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.</p><h3 class="h4">Site</h3><p>Contains header, footer, partials that are used on a site or webapp. Header and Footer are not classical components, there often more complex and have a special brand.</p><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></body></html>
--- a/dist/examples/helpers.html
+++ b/dist/examples/helpers.html
--- a/dist/examples/imprint.html
+++ b/dist/examples/imprint.html
@ -1 +0,0 @@
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Imprint | 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><header id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid"><div class="col-12 col-md-4"><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-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Imprint</h1></header></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></body></html>
--- a/dist/examples/index.html
+++ b/dist/examples/index.html
@ -1 +0,0 @@
 <!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><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" href="/getstarted.html">Get 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" 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>
--- a/dist/examples/privacy-policy.html
+++ b/dist/examples/privacy-policy.html
@ -1 +0,0 @@
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Privacy Policy | 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><header id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid"><div class="col-12 col-md-4"><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-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Privacy Policy</h1></header></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></body></html>
--- a/dist/examples/styles.css
+++ b/dist/examples/styles.css
--- a/mix-manifest.json
+++ b/mix-manifest.json
@ -1,7 +1,7 @@
 {
    "/dist/crispy-all.css": "/dist/crispy-all.css",
    "/dist/crispy-minimal.css": "/dist/crispy-minimal.css",
    "/dist/examples/styles.css": "/dist/examples/styles.css",
    "/dist/example/styles.css": "/dist/example/styles.css",
    "/spritemap.js": "/spritemap.js",
    "/dist/examples/symbol-defs.svg": "/dist/examples/symbol-defs.svg"
    "/dist/example/symbol-defs.svg": "/dist/example/symbol-defs.svg"
 }
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "crispy-css",
  "version": "3.0.0-pre",
  "version": "3.0.0",
  "description": "Lightweight Framework for building Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements and Helpers.",
  "repository": {
    "type": "git",
--- a/src/_core.scss
+++ b/src/_core.scss
@ -53,6 +53,6 @@
        @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/_helpers.scss
+++ b/src/_helpers.scss
@ -94,7 +94,7 @@ $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__diff($crispy__font-size-breakpoints, $font-size, $defaultFontSize);
        }
    }

--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@ -1,21 +1,21 @@
 /**
 * mixins
 *  mixins
 *
 *
 *
 * @author Björn Hase
 * @license http://opensource.org/licenses/MIT The MIT License
 * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */


 /**
 * clearfix to end floating
 *  clearfix to end floating
 *
 *
 *
 */

@mixin crispy__clearfix() {
    &::before,
    &::after {
@ -30,10 +30,11 @@


 /**
 * clear styles from list
 *  clear styles from list
 *
 *
 */

@mixin crispy__clear_list() {
    list-style: none;
    margin: 0;
@ -47,11 +48,12 @@


 /**
 * media-queries
 *  media-queries
 *
 *
 *
 */

@mixin crispy__media-xs() {
    @media only screen and (min-width:$crispy__xs) {
        @content;
@ -124,6 +126,7 @@
    }
 }


 /**
 *
 *  @param  {[type]} $property    [description]
@ -132,6 +135,7 @@
 *  @return {[type]}              [description]
 *
 */

@mixin crispy__media__breakpoints($property, $breakpoints) {
    @each $breakpoint, $value in $breakpoints {
        @media only screen and (min-width: $breakpoint) {
@ -140,6 +144,7 @@
    }
 }


 /**
 *
 *  @param  {[type]} $property    [description]
@ -148,6 +153,7 @@
 *
 *  @return {[type]}              [description]
 */

@mixin crispy__media__breakpoints_calculate($property, $factor, $breakpoints) {
    @each $breakpoint, $value in $breakpoints {
        @media only screen and (min-width: $breakpoint) {
@ -156,6 +162,7 @@
    }
 }


 /**
 *
 *
@ -166,6 +173,7 @@
 *  @return {[type]}              [description]
 *
 */

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

    @each $breakpoint, $value in $breakpoints {
@ -176,7 +184,7 @@
        // ignore if factor is zero
        @if $factor > 0 {
            @media only screen and (min-width: $breakpoint) {
                font-size: $value * $factor;
                font-size: ($value * $factor) !important;
            }
        }
    }
@ -192,6 +200,7 @@
 *  @param {Length} $size [1em] - Triangle size
 *
 */

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

    @if not index(top right bottom left, $direction) {
--- a/src/_variables.scss
+++ b/src/_variables.scss
@ -1,14 +1,11 @@
@import
    'functions';

 /**
 * Variables
 *  variables
 *
 *
 *
 * @author Björn Hase
 * @license http://opensource.org/licenses/MIT The MIT License
 * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */

@ -16,7 +13,7 @@ $crispy__golden-ratio: 1.618 !default;


 /**
 *  Breakpoints
 *  breakpoints
 *
 */

@ -28,7 +25,7 @@ $crispy__xlg: 1600px !default;


 /**
 *  Font Size
 *  fonts
 *
 */

@ -37,8 +34,8 @@ $crispy__direction: ltr !default;
 $crispy__font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
 $crispy__font-weight: normal !default;
 $crispy__font-size: 0.9rem !default;
 $crispy__font-size__breakpoints: (
    $crispy__md: 1rem
 $crispy__font-size-breakpoints: (
    $crispy__md: 1.1rem
 ) !default;

 $crispy__font-family-monospace: "Lucida Console", Monaco, monospace !default;
@ -109,19 +106,23 @@ $crispy__colors: (


 /**
 *  Padding & Margin
 *  padding & nargin
 *
 */

 $crispy__margin: 0 0 1rem !default;
 $crispy__padding: 0.3em 0.45em !default;
 $crispy__margin: 0 0 15px !default;
 $crispy__margin-breakpoints: (
    $crispy__md: 0 0 20px
 ) !default;

 $crispy__padding: 0.4em 0.6em !default;
 $crispy__padding-breakpoints: (
    $crispy__md: .6em 0.9em
    $crispy__md: 0.8em 1.1em
 ) !default;


 /**
 *  Heading
 *  heading
 *
 */

@ -139,12 +140,13 @@ $crispy__heading__font-sizes__breakpoints: (
 ) !default;

 $crispy__heading__font-weight: bold !default;
 $crispy__heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
 $crispy__heading__margin: 0 0 0.3em !default;
 $crispy__heading__font-family: $crispy__font-family !default;
 $crispy__heading__margin: $crispy__margin !default;
 $crispy__heading__margin-breakpoints: $crispy__margin-breakpoints !default;


 /**
 *  Borders
 *  borders
 *
 */

@ -153,7 +155,7 @@ $crispy__border: 1px solid $crispy__color-border !default;


 /**
 *
 *  z-index
 *
 */

--- a/src/components/_button.scss
+++ b/src/components/_button.scss
@ -14,14 +14,15 @@
 $crispy__button__font-family: $crispy__font-family !default;
 $crispy__button__font-weight: $crispy__font-weight !default;
 $crispy__button__font-size: $crispy__font-size !default;
 $crispy__button__font-size-breakpoints: $crispy__font-size__breakpoints !default;
 $crispy__button__font-size-breakpoints: $crispy__font-size-breakpoints !default;

 $crispy__button__padding: 0.3em 0.8em !default;
 $crispy__button__padding: 0.4em 0.8em !default;
 $crispy__button__padding-breakpoints: (
    $crispy__md: 0.4em 1.2em
    $crispy__md: 0.6em 1.2em
 ) !default;

 $crispy__button__margin: $crispy__margin !default;
 $crispy__button__margin-breakpoints: $crispy__margin-breakpoints !default;

@mixin crispy__button() {
    .button {
@ -37,6 +38,7 @@ $crispy__button__margin: $crispy__margin !default;
        @include crispy__media__breakpoints('font-size', $crispy__button__font-size-breakpoints);

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

        padding: $crispy__button__padding;
        @include crispy__media__breakpoints('padding', $crispy__button__padding-breakpoints);
--- a/src/components/_code.scss
+++ b/src/components/_code.scss
@ -13,11 +13,14 @@
 *
 */

 $crispy__code__border: $crispy__border !default;
 $crispy__code__background-color: $crispy__color-grey-light !default;

 $crispy__code__padding: $crispy__padding !default;
 $crispy__code__padding-breakpoints: $crispy__padding-breakpoints !default;

 $crispy__code__margin: $crispy__margin !default;
 $crispy__code__border: $crispy__border !default;
 $crispy__code__background-color: $crispy__color-grey-light !default;
 $crispy__code__margin-breakpoints: $crispy__margin-breakpoints !default;

@mixin crispy__code() {
    .code {
@ -30,6 +33,7 @@ $crispy__code__background-color: $crispy__color-grey-light !default;
        background-color: $crispy__code__background-color;

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

        padding: $crispy__code__padding;
        @include crispy__media__breakpoints('padding', $crispy__code__padding-breakpoints);
--- a/src/components/_field.scss
+++ b/src/components/_field.scss
@ -1,19 +1,25 @@
 /**
 * component: field
 *  components: field
 *
 * <div class="field">
 *     <label class="field__label">
 *         text
 *         <input type="text" class="field__text" />
 *     <label>
 * </div>
 *  <div class="field">
 *      <label class="field__label">
 *          text
 *          <input type="text" class="field__text" />
 *      <label>
 *  </div>
 *
 *
 * @author Björn Hase
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */

 $crispy__field__margin: $crispy__margin !default;
 $crispy__field__font-family: $crispy__font-family !default;
 $crispy__field__font-weight: $crispy__font-weight !default;
 $crispy__field__font-size: $crispy__font-size !default;
 $crispy__field__font-size-breakpoints: $crispy__font-size-breakpoints !default;

 $crispy__field__border: $crispy__border !default;

 $crispy__field__color--valid: $crispy__color-success !default;
@ -26,11 +32,20 @@ $crispy__field__border-color--error: $crispy__color-danger !default;
 $crispy__field__choice__checked__color: $crispy__color-success !default;
 $crispy__field__choice__unchecked__color: $crispy__color-danger !default;

 $crispy__field__input__padding: 0.4em 0.6em !default;
 $crispy__field__input__color: $crispy__color-text !default;
 $crispy__field__padding: 0.5em 0.6em !default;
 $crispy__field__padding-breakpoints: (
    $crispy__md: 0.7em 0.8em
 ) !default;

 $crispy__field__select__padding: 0.5em 0.3em !default;
 $crispy__field__select__padding-breakpoints: (
    $crispy__md: 0.7em 0.6em
 ) !default;

 $crispy__field__margin: $crispy__margin !default;
 $crispy__field__margin-breakpoints: $crispy__margin-breakpoints !default;

 $crispy__field__select__padding: 0.3em 0.5em !default;
 $crispy__field__panel__padding: 0.3em 0.6em !default;
 $crispy__field__input__color: $crispy__color-text !default;

 $crispy__field__select__background-color: white !default;
 $crispy__field__select__border: $crispy__border !default;
@ -38,14 +53,15 @@ $crispy__field__select__border: $crispy__border !default;
@mixin crispy__field() {
    .field {
        margin: $crispy__field__margin;
        @include crispy__media__breakpoints('margin', $crispy__field__margin-breakpoints);
    }

    .field__text, .field__select, .field__select, .field__label {
        font-family: $crispy__font-family;
        font-weight: $crispy__font-weight;
        font-family: $crispy__field__font-family;
        font-weight: $crispy__field__font-weight;

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

    // basic style for input elements, will be used to @extend
@ -53,9 +69,11 @@ $crispy__field__select__border: $crispy__border !default;
        display: block;
        width: 100%;

        padding: $crispy__field__input__padding;
        color: $crispy__field__input__color;
        appearance: none;

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

    /**
@ -119,6 +137,9 @@ $crispy__field__select__border: $crispy__border !default;
        border: $crispy__field__select__border;
        background-color: $crispy__field__select__background-color;

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

        &:focus {
            outline: 0;
            border-color: $crispy__field__border-color--focus;
@ -197,7 +218,8 @@ $crispy__field__select__border: $crispy__border !default;
     */

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

    .field--valid {
--- a/src/components/_group.scss
+++ b/src/components/_group.scss
@ -24,7 +24,7 @@ $crispy__group__character-margin: 0 $crispy__group__margin 0 !default;

        .group__item {
            display: inline-block;
            margin: 0 $crispy__group__margin 0 0;
            margin: 0 $crispy__group__margin 0;

            &:last-child {
                &:after {
--- a/src/components/_hero.scss
+++ b/src/components/_hero.scss
@ -1,5 +1,5 @@
 /**
 *  component: hero
 *  components: hero
 *
 *  background-size is as default: cover - Resize the background image to cover the entire container
 *
--- a/src/components/_panel.scss
+++ b/src/components/_panel.scss
@ -7,9 +7,9 @@
 *      </div>
 *  </div>
 *
 *  @author Björn Hase
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */

--- a/src/core/_heading.scss
+++ b/src/core/_heading.scss
@ -2,6 +2,10 @@
 *  Heading
 *
 *
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */

@mixin crispy__core__heading()
@ -15,7 +19,9 @@
        font-family: $crispy__heading__font-family;
        font-weight: $crispy__heading__font-weight;
        line-height: 1.2;
        
        margin: $crispy__heading__margin;
        @include crispy__media__breakpoints('margin', $crispy__heading__margin-breakpoints);
    }

    h5 {
--- a/src/core/_normalize.scss
+++ b/src/core/_normalize.scss
@ -45,10 +45,11 @@

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

    figcaption {
        margin: 0.3em 0 0;
        margin: 10px 0;
    }


@ -67,22 +68,6 @@
        margin: 0;
    }

    button,
    label,
    input,
    optgroup,
    select,
    textarea {
        font-family: $crispy__font-family;
        font-weight: $crispy__font-weight;

        font-size: $crispy__font-size;
        @include crispy__media__breakpoints('font-size', $crispy__font-size__breakpoints);

        line-height: $crispy__line-height;
        @include crispy__media__breakpoints('line-height', $crispy__line-height__breakpoints);
    }

    fieldset {
        padding: $crispy__padding;
    }
--- a/src/core/_typography.scss
+++ b/src/core/_typography.scss
@ -12,6 +12,7 @@
    // paragraphs
    p {
        margin: $crispy__margin;
        @include crispy__media__breakpoints('margin', $crispy__margin-breakpoints);
    }

    // Semantic text elements
@ -90,7 +91,9 @@
    ol,
    ul {
        padding: 0;
        
        margin: $crispy__margin;
        @include crispy__media__breakpoints('margin', $crispy__margin-breakpoints);
    }

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

@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/examples/site/_header.scss
+++ b/src/examples/site/_header.scss
--- a/src/example/styles.scss
+++ b/src/example/styles.scss
@ -0,0 +1,15 @@
@import

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

@include component__triangle();
@include site__header();
@include template__home();

 .container {
    max-width: $crispy__lg;
 }
--- a/src/examples/templates/_home.scss
+++ b/src/examples/templates/_home.scss
--- a/src/examples/components/_nav.scss
+++ b/src/examples/components/_nav.scss
@ -1,16 +0,0 @@
 /**
 * component: nav
 *
 *
 * @author Björn Hase
 * @license http://opensource.org/licenses/MIT The MIT License
 * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
 *
 */

@mixin components__nav()
 {
    .nav {

    }
 }
--- a/src/examples/styles.scss
+++ b/src/examples/styles.scss
@ -1,63 +0,0 @@
@import

    'reflex',
    '../crispy-all',
    'site/header',
    'components/nav',
    'templates/home';

@include site__header();
@include template__home();

 .container {
    max-width: $crispy__lg;
 }

 .sm, .md, .md-only, .lg-only {
    display: none;
 }

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

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

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

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

 .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/html/index.html.ejs
+++ b/src/html/index.html.ejs
@ -10,7 +10,7 @@
    <link rel="stylesheet" href="styles.css">
 </head>

 <body>
 <body class="home">
    <header id="header" class="header">
 		<div class="container">
 			<div class="grid">
@ -84,13 +84,13 @@
        </div>

        <div class="margin-bottom-2 text-center text-size-medium">
            <a class="button background-color-success text-color-white" href="/getstarted.html">
                Get started!
            <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" target="_blank" href="https://github.com/tentakelfabrik/crispy-css">
            <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" />
--- a/src/html/page.html.ejs
+++ b/src/html/page.html.ejs
@ -10,10 +10,10 @@
    <link rel="stylesheet" href="styles.css">
 </head>

 <body>
 <body class="page">
    <header id="header" class="header header--fixed background-color-info">
 		<div class="container">
 			<div class="grid">
 			<div class="grid align-center">
 				<div class="col-12 col-md-4">
                    <a href="/" class="text-color-white text-bold">
                        <svg class="icon text-size-mega" alt="Crispy CSS">
--- a/src/html/partials/components.html
+++ b/src/html/partials/components.html
@ -4,16 +4,19 @@
 </h2>
 <hr class="marginless margin-bottom-2" />

 <h3 class="h4">Scss:</h3>
 <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;
 $crispy__button__font-size-breakpoints: $crispy__font-size-breakpoints;

 $crispy__button__padding: 0.3em 0.8em;
 $crispy__button__padding: 0.4em 0.8em;
 $crispy__button__padding-breakpoints: (
    $crispy__md: 0.4em 1.2em
    $crispy__md: 0.6em 1.2em
 );

 $crispy__button__margin: $crispy__margin;
 $crispy__button__margin-breakpoints: $crispy__margin-breakpoints;
 </code></pre>

 <h3 class="h4">Html:</h3>
@ -45,22 +48,28 @@ $crispy__button__padding-breakpoints: (
 </h2>
 <hr class="marginless margin-bottom-2" />

 <h3 class="h4">Scss:</h3>
 <pre class="code margin-top-1"><code>$crispy__code__padding: $crispy__padding;
 <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;
 $crispy__code__padding-breakpoints: $crispy__padding-breakpoints;

 $crispy__code__margin: $crispy__margin;
 $crispy__code__border: $crispy__border;
 $crispy__code__background-color: $crispy__color-grey-light;
 $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>
 <pre class="code margin-top-1"><code>&lt;pre class=&quot;code&quot;&gt;
    &lt;code&gt;&lt;/code&gt;
 &lt;/pre&gt;
 </code></pre>


 <!-- components / fields -->
 <h2 class="margin-top-3">
    Fields
 </h2>
 <h3 class="h4 magin-top-2">Scss:</h3>
 <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;

@ -364,7 +373,7 @@ $crispy__field__select__border: $crispy__border;</code></pre>
    Group
 </h2>

 <h3 class="h4">Scss:</h3>
 <h3 class="h4">SCSS:</h3>
 <pre class="code"><code>$crispy__group__margin: 0.3em !default;
 $crispy__group__character: '/' !default;
 $crispy__group__character-margin: 0 $crispy__group__margin 0 !default;</code></pre>
@ -422,7 +431,7 @@ $crispy__group__character-margin: 0 $crispy__group__margin 0 !default;</code></p
    Icon
 </h2>

 <h3 class="h4">Scss:</h3>
 <h3 class="h4">SCSS:</h3>
 <pre class="code"><code>$crispy__icon__size: 1.15em;
 </code></pre>

@ -498,7 +507,7 @@ $crispy__group__character-margin: 0 $crispy__group__margin 0 !default;</code></p
    Panel
 </h2>

 <h3 class="h4">Scss:</h3>
 <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;
@ -522,7 +531,7 @@ $crispy__panel__background-color: $crispy__color-grey-light;
    Progress
 </h2>

 <h3 class="h4">Scss:</h3>
 <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;
@ -545,7 +554,7 @@ $crispy__progress__border-color: $crispy__color-border;
    Modal
 </h2>

 <h3 class="h4">Scss:</h3>
 <h3 class="h4">SCSS:</h3>
 <pre class="code"><code>$crispy__modal__max-width-breakpoints: (
    $crispy__md: 50%
 );
@ -608,7 +617,7 @@ $crispy__modal__z-index: zIndex('modal');</code></pre>
    Table
 </h2>

 <h3 class="h4">Scss:</h3>
 <h3 class="h4">SCSS:</h3>
 <pre class="code"><code>$crispy__table__padding: $crispy__padding !default;
 $crispy__table__padding-breakpoints: $crispy__padding-breakpoints !default;

--- a/src/html/partials/core.html
+++ b/src/html/partials/core.html
@ -4,66 +4,62 @@
 <h3 class="h4 margin-top-2">a</h3>
 <a href="#">Link</a>

 <div class="grid">
    <div class="col-12">
        <h2 class="marginless margin-top-2 margin-bottom-1">Typography</h2>
        <hr class="marginless margin-bottom-2" />
 <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">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>

        <!-- abbr -->
        <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>
 <!-- abbr -->
 <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>

        <!-- blockquote -->
        <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>
 <!-- blockquote -->
 <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>

        <!-- hr -->
        <h3 class="h4 margin-top-2">hr</h3>
        <hr>
 <!-- hr -->
 <h3 class="h4 margin-top-2">hr</h3>
 <hr>

        <!-- paragraph -->
        <h3 class="h4 margin-top-2">paragraph</h3>
        <p>
            Glossier viral occupy mixtape pok pok.
        </p>
 <!-- paragraph -->
 <h3 class="h4 margin-top-2">paragraph</h3>
 <p>
    Glossier viral occupy mixtape pok pok.
 </p>

        <!-- mark -->
        <h3 class="h4 margin-top-2">mark</h3>
        <p>
            Pug before they <mark>four loko</mark> Deep v bespoke
        </p>
 <!-- mark -->
 <h3 class="h4 margin-top-2">mark</h3>
 <p>
    Pug before they <mark>four loko</mark> Deep v bespoke
 </p>

        <!-- list -->
        <h3 class="h4 margin-top-2">list</h3>
 <!-- list -->
 <h3 class="h4 margin-top-2">list</h3>
 <ul>
    <li>item 1</li>
    <li>
        item 2
        <ul>
            <li>item 1</li>
            <li>
                item 2
                <ul>
                    <li>child item 1</li>
                    <li>child item 2</li>
                </ul>
            </li>
            <li>child item 1</li>
            <li>child item 2</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>
    </li>
 </ul>
 <ol>
    <li>item 1</li>
    <li>item 2</li>
 </ol>
 <dl>
    <dt>defined title 1</dt>
    <dd>defined item 1</dd>
 </dl>
--- a/src/html/partials/getting-started.html
+++ b/src/html/partials/getting-started.html
@ -2,14 +2,18 @@
    Installation
 </h2>
 <hr class="marginless margin-bottom-2" />
 <pre class="code"><code>npm install crispy-css
 </code></pre>

 <pre class="code"><code>npm install crispy-css</code></pre>

 <h3 class="h4">Scss</h3>
 <pre class="code"><code>@import "crispy";</code></pre>

 <p>Now include Mixins you need. Components and Modifiziers only works if you include them,</p>
 <pre class="code"><code>@include crispy__button();
 <h3 class="h4">SCSS</h3>
 <pre class="code"><code>@import
    "node_modules/crispy-css/src/crispy";
 </code></pre>
 <p>
    Now include Components and Helpers you need.
 </p>
 <pre class="code"><code>@include crispy__helpers();
@include crispy__button();
@include crispy__code();
@include crispy__field();
@include crispy__group();
@ -20,31 +24,166 @@
@include crispy__overlay();
@include crispy__panel();
@include crispy__progress();
@include crispy__table();</code></pre>
 <p>For Custom Variables add a File before importing Crispy,</p>
 <pre class="code"><code>@import
    "config",
    "crispy";</code></pre>
@include crispy__table();
 </code></pre>

 <p>If you need all, mixins will be included,</p>
 <p>
    There are two additionals Versions of <span class="text-bold">Crispy</span>.
    There is <span class="text-bold">crispy-minimal</span>, that only includes Helpers and
    <span class="text-bold">crispy-all</span> that includes Helpers and all Components.
 </p>
 <pre class="code"><code>@import
    "crispy-all";</code></pre>
    "node_modules/crispy-css/src/crispy-all";
 </code></pre>
 <pre class="code"><code>@import
    "node_modules/crispy-css/src/crispy-minimal";
 </code></pre>

 <h4 class="h5">Configuration</h4>
 <h5 class="h6">Breakpoints</h5>
 <pre class="code"><code>$crispy__xs : 576px;
 $crispy__sm : 768px;
 $crispy__md : 992px;
 $crispy__lg : 1200px;
 $crispy__xlg: 1600px;
 </code></pre>

 <h5 class="h6">Fonts</h5>
 <pre class="code"><code>$crispy__direction: ltr;

 $crispy__font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 $crispy__font-weight: normal;
 $crispy__font-size: 0.9rem;
 $crispy__font-size-breakpoints: (
    $crispy__md: 1.1rem
 );

 $crispy__font-family-monospace: "Lucida Console", Monaco, monospace;
 $crispy__font-weight-monospace: normal ;
 $crispy__font-size-monospace: 1rem ;
 $crispy__font-size-monospace__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,
 );

 $crispy__line-height: 1.4;
 $crispy__line-height__breakpoints: (
    $crispy__md: $crispy__golden-ratio
 );
 </code></pre>

 <h5 class="h6">Colors</h5>
 <pre class="code"><code>$crispy__color-primary: #f18f01;
 $crispy__color-secondary: #b3b2af;
 $crispy__color-success: #5cb85c;
 $crispy__color-warning: #f0ad4e;
 $crispy__color-danger: #d9534f;
 $crispy__color-info: #0090d4;

 <p>Only need Core and Modifiziers?</p>
 $crispy__color-grey-light: hsl(0, 0%, 97%);
 $crispy__color-grey: hsl(0, 0%, 48%);
 $crispy__color-grey-dark: hsl(0, 0%, 29%);
 $crispy__color-white: white;

 $crispy__color-text: #363636;
 $crispy__color-border: #dfdfdf;
 $crispy__color-background: #ffffff;

 $crispy__color-panel: #f9f9f9;

 $crispy__color-link: $crispy__color-primary;
 $crispy__color-link-hover: $crispy__color-secondary;
 $crispy__color-link-visited: $crispy__color-primary;
 $crispy__color-link-focus: $crispy__color-primary;
 $crispy__color-link-active: $crispy__color-primary;

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

 <h5 class="h6">Padding & Magin</h5>
 <pre class="code"><code>$crispy__margin: 0 0 15px;
 $crispy__margin-breakpoints: (
    $crispy__md: 0 0 20px
 );

 $crispy__padding: 0.4em 0.6em;
 $crispy__padding-breakpoints: (
    $crispy__md: 0.8em 1.1em
 );
 </code></pre>

 <h5 class="h6">Heading</h5>
 <pre class="code"><code>$crispy__heading__font-sizes: (
    'h1': $crispy__font-size * 2.5,
    'h2': $crispy__font-size * 2,
    'h3': $crispy__font-size * 1.75,
    'h4': $crispy__font-size * 1.5,
    'h5': $crispy__font-size * 1.25,
    'h6': $crispy__font-size
 ) ;

 $crispy__heading__font-sizes__breakpoints: (
    $crispy__md: 1.2rem
 );

 $crispy__heading__font-weight: bold;
 $crispy__heading__font-family: $crispy__font-family;
 $crispy__heading__margin: $crispy__margin;
 $crispy__heading__margin-breakpoints: $crispy__margin-breakpoints;
 </code></pre>

 <h5 class="h6">Borders</h5>
 <pre class="code"><code>$crispy__border-radius: 3px !default;
 $crispy__border: 1px solid $crispy__color-border !default;
 </code></pre>

 <h5 class="h6">Z-Index</h5>
 <pre class="code"><code>$crispy__z-index: (
    'overlay': 90,
    'modal'  : 100
 ) !default;
 </code></pre>

 <p>
    For Custom Variables add a File before importing Crispy.
 </p>
 <pre class="code"><code>@import
    "crispy-minimal";</code></pre>
    "config",
    "node_modules/crispy-css/src/crispy";
 </code></pre>

 <h3 class="h4">CSS</h3>
 <p>For using CSS you can use <span class="text-bold">crispy-all.css</span> for all Styles or <span class="text-bold">crispy-mininmal.css</span> without Components.</p>

 <h2>Example</h2>
 <!-- examples -->
 <h2 class="margin-top-3 margin-bottom-1">
 Example
 </h2>
 <hr class="marginless margin-bottom-2" />
 <p>
    You find an example in "/src/example", this is this Documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.
    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, partials that are used on a site or webapp. Header and Footer are not classical components, there often more complex and have a special brand.
    Contains header, footer and some partials that are used on a Site or Webapp.
 </p>

 <h3 class="h4">Templates</h3>
--- a/webpack.mix.js
+++ b/webpack.mix.js
@ -19,14 +19,14 @@ mix.webpackConfig({
    plugins: [
        new SvgSpritemapPlugin('assets/svg/*.svg', {
            output: {
                filename: 'dist/examples/symbol-defs.svg'
                filename: 'dist/example/symbol-defs.svg'
            },
            sprite: {
                prefix: 'icon-'
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'dist/examples/index.html',
            filename: 'dist/example/index.html',
            template: 'src/html/index.html.ejs',
            title: 'Crispy CSS | Lightweight CSS Framework for Building Apps and Websites',
            description: 'Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers',
@ -34,7 +34,7 @@ mix.webpackConfig({
            inject: false
        }),
        new HtmlWebpackPlugin({
            filename: 'dist/examples/getting-started.html',
            filename: 'dist/example/getting-started.html',
            template: 'src/html/page.html.ejs',
            title: 'Getting started!',
            body: fs.readFileSync(__dirname + '/src/html/partials/getting-started.html'),
@ -42,7 +42,7 @@ mix.webpackConfig({
            inject: false
        }),
        new HtmlWebpackPlugin({
            filename: 'dist/examples/core.html',
            filename: 'dist/example/core.html',
            template: 'src/html/page.html.ejs',
            title: 'Core',
            body: fs.readFileSync(__dirname + '/src/html/partials/core.html'),
@ -50,7 +50,7 @@ mix.webpackConfig({
            inject: false
        }),
        new HtmlWebpackPlugin({
            filename: 'dist/examples/components.html',
            filename: 'dist/example/components.html',
            template: 'src/html/page.html.ejs',
            title: 'Components',
            body: fs.readFileSync(__dirname + '/src/html/partials/components.html'),
@ -58,7 +58,7 @@ mix.webpackConfig({
            inject: false
        }),
        new HtmlWebpackPlugin({
            filename: 'dist/examples/helpers.html',
            filename: 'dist/example/helpers.html',
            template: 'src/html/page.html.ejs',
            title: 'Helpers',
            body: fs.readFileSync(__dirname + '/src/html/partials/helpers.html'),
@ -66,7 +66,7 @@ mix.webpackConfig({
            inject: false
        }),
        new HtmlWebpackPlugin({
            filename: 'dist/examples/mixins.html',
            filename: 'dist/example/mixins.html',
            template: 'src/html/page.html.ejs',
            title: 'Mixins',
            body: fs.readFileSync(__dirname + '/src/html/partials/mixins.html'),
@ -74,7 +74,7 @@ mix.webpackConfig({
            inject: false
        }),
        new HtmlWebpackPlugin({
            filename: 'dist/examples/functions.html',
            filename: 'dist/example/functions.html',
            template: 'src/html/page.html.ejs',
            title: 'Functions',
            body: fs.readFileSync(__dirname + '/src/html/partials/functions.html'),
@ -82,7 +82,7 @@ mix.webpackConfig({
            inject: false
        }),
        new HtmlWebpackPlugin({
            filename: 'dist/examples/imprint.html',
            filename: 'dist/example/imprint.html',
            template: 'src/html/page.html.ejs',
            title: 'Imprint',
            body: fs.readFileSync(__dirname + '/src/html/partials/imprint.html'),
@ -90,7 +90,7 @@ mix.webpackConfig({
            inject: false
        }),
        new HtmlWebpackPlugin({
            filename: 'dist/examples/privacy-policy.html',
            filename: 'dist/example/privacy-policy.html',
            template: 'src/html/page.html.ejs',
            title: 'Privacy Policy',
            body: fs.readFileSync(__dirname + '/src/html/partials/privacy-policy.html'),
@ -102,7 +102,7 @@ mix.webpackConfig({

 mix.sass('src/crispy-all.scss', 'dist/crispy-all.css')
    .sass('src/crispy-minimal.scss', 'dist/crispy-minimal.css')
    .sass('src/examples/styles.scss', 'dist/examples/styles.css', {
    .sass('src/example/styles.scss', 'dist/example/styles.css', {
            sassOptions: {
                includePaths: [
                    'node_modules/reflex-grid/scss'