tentakelfabrik
/
crispy-css

<!doctype html><html class="no-js" lang="en_EN">
<head>	<meta charset="utf-8">	<meta http-equiv="x-ua-compatible" content="ie=edge">	<title>Crispy | Lightweight SASS / CSS Framework</title>	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">	<link rel="stylesheet" href="styles.css"></head>
<body>	<header id="header" class="header">		<div class="container">			<div class="grid">				<div class="col-12">					<div class="text-center">                        <hgroup>							<a href="/">                                <h1 class="h3 margin-top-4 margin-bottom-2">                                    <svg class="icon header__logo" alt="Crisp">                                        <use xlink:href="symbol-defs.svg#icon-logo" />                                    </svg>								    Crispy 2.1.0                                </h1>                            </a>                            <h2 class="h6">                                Lightweight CSS / SCSS Framework                            </h2>						</hgroup>					</div>				</div>			</div>		</div>	</header>	<div class="container">        <div class="grid margin-top-5 margin-bottom-5">		    <div class="col-12 col-md-6">                <h3 class="h6">                    <svg class="icon icon-color-primary" alt="Lightweight">                        <use xlink:href="symbol-defs.svg#icon-paperplane" />                    </svg>                    Lightweight                </h3>                <p class="text-size-medium">                    Only what you need! Basic Styles to create UI-Elements,                    but without endless overwritting. Less Code, less Size and that means Crispy is <span class="text-weight-bold">simple</span> and <span class="text-weight-bold">fast</span>!                </p>            </div>            <div class="col-12 col-md-6">                <h3 class="h6">                    <svg class="icon icon-color-primary" alt="Usefull modifiers">                        <use xlink:href="symbol-defs.svg#icon-shipping" />                    </svg>                    Modifiziers, Mixins and Functions                </h3>                <p class="text-size-medium">                    A small amount of Usefull modifiers to support your Work. That make it easer to create new Styles.                    Modifiziers are helping to reduce code.                </p>            </div>            <div class="col-12 col-md-6">                <h3 class="h6">                    <svg class="icon icon-color-primary" alt="Customizeable">                        <use xlink:href="symbol-defs.svg#icon-transformers" />                    </svg>                    Customizable                </h3>                <p class="text-size-medium">                    There are many Frameworks that really great, but if you want customize them,                    that can be a lot of work. Crispy is great to build Styles for Layouts that are unusual.                </p>            </div>            <div class="col-12 col-md-6">                <h3 class="h6">                    <svg class="icon icon-color-primary" alt="Coding Style">                        <use xlink:href="symbol-defs.svg#icon-ruler" />                    </svg>                    Coding Style                </h3>                <p class="text-size-medium">                    Crispy uses <a href="http://getbem.com/" target="_blank">BEM</a> for naming, but                    a simpler approach of it. BEM is good to show other Developers what classes                    are belong to a Component.                </p>            </div>        </div>
        <div class="grid">            <div class="col-12">
                <!-- getting started -->			    <hr class="margin-top-3">                <h2 class="h3">Installation</h2>                <pre class="code"><code>npm install crispy</code></pre>
                <h2 class="h3">How it works</h2>
                <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__core();@include crispy__modifiers();
// components@include crispy__button();@include crispy__code();@include crispy__field();@include crispy__group();@include crispy__heading();@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    "variables",    "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-weight-bold">crispy.css</span> for all Styles or <span class="text-weight-bold">crispy_mininmal.css</span> without Components.</p>
                <h2 class="h3">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>                <h4>Site</h4>                <p>                    Contains header, footer, partials that are used on a site or webapp. Header and Footer are not classical components, there often more complex and have a special brand.                </p>                <h4>Templates</h4>                <p>                    Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components.                </p>
				<!-- typography -->				<hr class="margin-top-3">				<h2 id="typography" class="margin-top-1">                    Typography                </h2>
                <!-- abbr -->				<h3 class="h4 margin-top-2 margin-bottom-0">a</h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;a href=&quot;&quot;&gt;&lt;/a&gt;</code></pre>				<p>					Color of Text is set by <strong>$crispy__color-primary</strong>. <strong>Hover</strong> is set by                    <strong>$crispy__color-text</strong>				</p>
				<!-- abbr -->				<h3 class="h4 margin-top-2 margin-bottom-0">abbr</h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;abbr title=&quot;&quot;&gt;&lt;/abbr&gt;</code></pre>				<p>					Glossier viral occupy mixtape pok pok cornhole, <abbr title="vape affogato hella">vape affogato hella</abbr> knausgaard thundercats				</p>
				<!-- blockquote -->				<h3 class="h4 margin-top-2 margin-bottom-0">blockquote</h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;blockquote&gt;&lt;/blockquote&gt;</code></pre>				<blockquote>					Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.				</blockquote>
                <!-- hr -->				<h3 class="h4 margin-top-2 margin-bottom-0">hr</h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;hr&gt;</code></pre>                <p>                    <hr>                </p>
				<!-- paragraph -->				<h3 class="h4 margin-top-2 margin-bottom-0">paragraph</h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;p&gt;&lt;/p&gt;</code></pre>				<p>					Glossier viral occupy mixtape pok pok.				</p>
                <!-- mark -->				<h3 class="h4 margin-top-2 margin-bottom-0">mark</h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;mark&gt;&lt;/mark&gt;</code></pre>                <p>                    Pug before they <mark>four loko</mark> Deep v bespoke                </p>
				<!-- list -->				<h3 class="h4 margin-top-2 margin-bottom-0">list</h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;ul&gt;    &lt;li&gt;item 1&lt;/li&gt;    &lt;li&gt;item 2        &lt;ul&gt;            &lt;li&gt;child item 1&lt;/li&gt;            &lt;li&gt;child item 2&lt;/li&gt;        &lt;/ul&gt;    &lt;/li&gt;&lt;/ul&gt;&lt;ol&gt;    &lt;li&gt;item 1&lt;/li&gt;    &lt;li&gt;item 2&lt;/li&gt;&lt;/ol&gt;&lt;dl&gt;    &lt;dt&gt;defined title 1&lt;/dt&gt;    &lt;dd&gt;defined item 1&lt;/dd&gt;&lt;/dl&gt;</code></pre>				<ul>					<li>item 1</li>					<li>						item 2						<ul>							<li>child item 1</li>							<li>child item 2</li>						</ul>					</li>				</ul>				<ol>					<li>item 1</li>					<li>item 2</li>				</ol>				<dl>					<dt>defined title 1</dt>					<dd>defined item 1</dd>				</dl>
				<!-- components -->				<hr class="margin-top-3">				<h2 id="components" class="margin-top-1">                    Components                </h2>
				<!-- components / button -->				<h3 class="h4 margin-top-2 margin-bottom-0">                    Button                </h3>				<h4 class="h6">Html:</h4>				<pre class="code margin-top-1"><code>&lt;button class=&quot;button&quot;&gt;&lt;/button&gt;&lt;button class=&quot;button button--wide&quot;&gt;&lt;/button&gt;</code></pre>				<button class="button">Default</button>				<button class="button button--wide margin-top-1">Info</button>
                <!-- components / code -->				<h3 class="h4 margin-top-2 margin-bottom-0">                    Code                </h3>				<h4 class="h6">Html:</h4>				<pre class="code margin-top-1"><code>&lt;pre class=&quot;code&quot;&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;</code></pre>
				<!-- components / group -->				<h3 class="h4 margin-top-2 margin-bottom-0">                    Group                </h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;nav&gt;    &lt;ul class=&quot;group&quot;&gt;        &lt;li class=&quot;group__item&quot;&gt;first item&lt;/li&gt;        &lt;li class=&quot;group__item&quot;&gt;second item&lt;/li&gt;        &lt;li class=&quot;group__item&quot;&gt;third item&lt;/li&gt;    &lt;/ul&gt;&lt;/nav&gt;</code></pre>				<div class="panel panel__inner margin-bottom-1">					<nav>						<ul class="group">							<li class="group__item">first item</li>							<li class="group__item">second item</li>							<li class="group__item">third item</li>						</ul>					</nav>				</div>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;nav&gt;    &lt;ul class=&quot;group group--horizontal group--separate&quot;&gt;        &lt;li class=&quot;group__item&quot;&gt;first item&lt;/li&gt;        &lt;li class=&quot;group__item&quot;&gt;second item&lt;/li&gt;        &lt;li class=&quot;group__item&quot;&gt;third item&lt;/li&gt;    &lt;/ul&gt;&lt;/nav&gt;</code></pre>				<div class="panel panel__inner">					<nav>						<ul class="group group--horizontal group--separate">							<li class="group__item">first item</li><li class="group__item">second item</li><li class="group__item">third item</li>						</ul>					</nav>				</div>
				<!-- components / heading -->				<h3 class="h4 margin-top-2 margin-bottom-0">                    Heading                </h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;h2&gt;&lt;/h2&gt;&lt;h2 class="h3"&gt;&lt;/h2&gt;</code></pre>				<h4 class="h6">Sass:</h4>				<pre class="code"><code>$crispy__heading__font-sizes: (    'h1': 40px,    'h2': 36px,    'h3': 32px,    'h4': 28px,    'h5': 24px,    'h6': 20px) !default;</code></pre>
				<h1>Heading h1</h1>				<h2>Heading h2</h2>				<h3>Heading h3</h3>				<h4>Heading h4</h4>				<h5>Heading h5</h5>				<h6>Heading h6</h6>
				<!-- components / hero -->				<h3 class="h4 margin-top-2 margin-bottom-0">                    Hero                </h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;div class=&quot;hero&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>
                <!-- icons -->                <h3 class="h4 margin-top-2 margin-bottom-0">                    Icon                </h3>                <p>                    To change Size you can use "text-size-*" that you find in the <span class="text-weight-bold">modifiers</span>.                </p>                <h4 class="h6">Html:</h4>                <pre class="code"><code>&lt;svg class=&quot;icon text-size-small&quot;&gt;    &lt;use xlink:href=&quot;symbol-defs.svg#icon-minus&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>                <div class="panel">                    <div class="panel__inner">                        <svg class="icon text-size-small" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>                        </svg>                        <svg class="icon" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>                        </svg>                        <svg class="icon text-size-large" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>                        </svg>                        <svg class="icon text-size-big" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>                        </svg>                        <svg class="icon text-size-mega" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>                        </svg>                    </div>                </div>                <p class="margin-top-2">                    To change Color you can use "icon-color-*".                </p>                <h4 class="h6">Html:</h4>                <pre class="code"><code>&lt;svg class=&quot;icon icon-color-danger&quot;&gt;    &lt;use xlink:href=&quot;symbol-defs.svg#icon-minus&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>                <div class="panel">                    <div class="panel__inner">                        <svg class="icon icon-color-danger" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>                        </svg>                    </div>                </div>
                <!-- components / panel -->                <h3 class="h4 margin-top-2 margin-bottom-0">                    Panel                </h3>                <h4 class="h6">Html:</h4>                <pre class="code"><code>&lt;div class=&quot;panel&quot;&gt;    &lt;div class=&quot;panel__inner&quot;&gt;        Lorem Ipsum    &lt;/div&gt;&lt;/div&gt;</code></pre>                <div class="panel">                    <div class="panel__inner">                        Lorem Ipsum                    </div>                </div>
                <!-- components / progress -->                <h3 class="h4 margin-top-2 margin-bottom-0">                    Progress                </h3>                <h4 class="h6">Html:</h4>                <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>
				<!-- components / modal -->				<h3 class="h4 margin-top-3 margin-bottom-0">                    Modal                </h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;div class=&quot;modal modal--bottom width-100&quot;&gt;     &lt;div class=&quot;panel&quot;&gt;        &lt;div class=&quot;panel__inner&quot;&gt;            Lorem Ipsum        &lt;/div&gt;    &lt;/div&gt;&lt;/div&gt;</code></pre>				<div style="position: relative; width: 100%; height: 200px; border: 1px dotted black;">                    <div class="modal modal--top-left">						<div class="panel">							<div class="panel__inner">								.modal--top-left							</div>						</div>					</div>                    <div class="modal modal--top-right">						<div class="panel">							<div class="panel__inner">								.modal--top-right							</div>						</div>					</div>					<div class="modal">						<div class="panel">							<div class="panel__inner">								.modal							</div>						</div>					</div>                    <div class="modal modal--bottom-left">						<div class="panel">							<div class="panel__inner">								.modal--bottom-left							</div>						</div>					</div>                    <div class="modal modal--bottom-right">						<div class="panel">							<div class="panel__inner">								.modal--bottom-right							</div>						</div>					</div>				</div>
				<!-- components / table -->				<h3 class="h4 margin-top-2 margin-bottom-0">                    Table                </h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;table class=&quot;table table--striped&quot;&gt;    &lt;thead&gt;        &lt;tr&gt;            &lt;th&gt;&lt;/th&gt;        &lt;/tr&gt;    &lt;/thead&gt;    &lt;tbody&gt;        &lt;tr&gt;            &lt;td&gt;&lt;/td&gt;        &lt;/tr&gt;    &lt;/tbody&gt;&lt;/table&gt;</code></pre>
				<table class="table table--striped margin-bottom-2">					<thead>						<tr>							<th>name</th>							<th>age</th>						</tr>					</thead>					<tbody>						<tr>							<td>Mr. Brown</td>							<td>43</td>						</tr>						<tr>							<td>Mr. Magenta</td>							<td>32</td>						</tr>						<tr>							<td>Mr. White</td>							<td>45</td>						</tr>					</tbody>				</table>
                <!-- components / field / checkbox -->				<h3 class="h4 margin-top-0 margin-bottom-0">                    Checkbox                </h3>                <div class="field">                    <input id="field__checkbox__1" class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />                    <label for="field__checkbox__1" class="field__label">                        <svg class="icon field__choice__unchecked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-minus"></use>                        </svg>                        <svg class="icon field__choice__checked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-checked"></use>                        </svg>                        checkbox 1                    </label>                    <input id="field__checkbox__2" class="field__choice" type="checkbox" name="field__checkbox__2" value="true" />                    <label for="field__checkbox__2" class="field__label">                        <svg class="icon field__choice__unchecked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-minus"></use>                        </svg>                        <svg class="icon field__choice__checked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-checked"></use>                        </svg>                        checkbox 2                    </label>                </div>                <div class="field field--error">                    <input id="field__checkbox__3" class="field__choice" type="checkbox" name="field__checkbox__3" value="true" />                    <label for="field__checkbox__3" class="field__label">                        <svg class="icon field__choice__unchecked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-minus"></use>                        </svg>                        <svg class="icon field__choice__checked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-checked"></use>                        </svg>                        checkbox 1                    </label>                    <div class="field__panel">                        error item 1                    </div>                </div>
                <!-- components / field / radio -->				<h3 class="h4 margin-top-0x margin-bottom-0x">                    Radio                </h3>                <div class="field">                    <input id="field__radio__1" class="field__choice" type="radio" name="field__radio__1[]" value="true" />                    <label for="field__radio__1" class="field__label">                        <svg class="icon field__choice__unchecked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-minus"></use>                        </svg>                        <svg class="icon field__choice__checked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-checked" />                        </svg>                        radio item 1                    </label><br />                    <input id="field__radio__2" class="field__choice" type="radio" name="field__radio__1[]" value="true" />                    <label for="field__radio__2" class="field__label">                        <svg class="icon field__choice__unchecked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-minus"></use>                        </svg>                        <svg class="icon field__choice__checked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-checked" />                        </svg>                        radio item 2                    </label>                </div>
                <!-- radio / error -->                <div class="field field--error">                    <input id="field__radio__3" class="field__choice" type="radio" name="field__radio__2[]" value="true" />                    <label for="field__radio__3" class="field__label">                        <svg class="icon field__choice__unchecked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-minus"></use>                        </svg>                        <svg class="icon field__choice__checked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-checked" />                        </svg>                        radio item 1                    </label><br />                    <input id="field__radio__4" class="field__choice" type="radio" name="field__radio__2[]" value="true" />                    <label for="field__radio__4" class="field__label">                        <svg class="icon field__choice__unchecked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-minus"></use>                        </svg>                        <svg class="icon field__choice__checked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-checked" />                        </svg>                        radio item 2                    </label>                    <div class="field__panel">                        error item 1                    </div>                </div>
                <!-- components / field / select -->				<h3 class="h4 margin-top-0x margin-bottom-0x">                    Select                </h3>                <div class="field">                    <label class="field__label">                        Select Item                        <select class="field__select">                            <option>select item 1</option>                            <option>select item 2</option>                            <option>select item 3</option>                        </select>                    </label>                </div>                <div class="field field--error">                    <label class="field__label">                        Select Item                        <select class="field__select">                            <option>select item 1</option>                            <option>select item 2</option>                            <option>select item 3</option>                        </select>                        <div class="field__panel">                            error item 1                        </div>                    </label>                </div>
                <!-- components / field / input textarea -->				<h3 class="h4 margin-top-0x margin-bottom-0x">                    Input / Textarea                </h3>                <div class="field">                    <input class="field__text" type="text" />                </div>                <div class="field field--valid">                    <label class="field__label">                        Text                        <input type="text" class="field__text" />                    </label>                    <div class="field__panel">                        error item 1                    </div>                </div>                <div class="field field--error">                    <label class="field__label">                        Text                        <input type="text" class="field__text" />                    </label>                    <div class="field__panel">                        error item 1                    </div>                </div>                <div class="field">                    <label class="field__label">                        Textarea                        <textarea class="field__text"></textarea>                    </label>                </div>                <div class="field field--error">                    <label class="field__label">                        Textarea                        <textarea class="field__text"></textarea>                    </label>                    <div class="field__panel">                        error item 1                    </div>                </div>
				<!-- functions -->				<hr class="margin-top-3x">				<h2 id="functions" class="margin-top-1x">                    Functions                </h2>
				<!-- functions / toEm / toRem -->				<h3 class="h4 margin-top-0x margin-bottom-0x">                    toEm()<br>                    toRem()                </h3>				<h4 class="h6 margin-top-1x">Sass:</h4>				<pre class="code"><code>toEm(5px);toEm(10px 10px 0 0);toRem(10px 10px 0 0);</code></pre>				<p>					Returns <strong>em</strong> and <strong>rem</strong>, accepts px and unitless values.				</p>
				<!-- functions / stripUnit -->				<h3 class="h4 margin-top-0x margin-bottom-0x">                    stripUnit()                </h3>				<h4 class="h6 margin-top-1x">Sass:</h4>				<pre class="code"><code>stripUnit(10px);</code></pre>				<p>					Returns value without unit.				</p>
                <!-- functions / stripUnit -->				<h3 class="h4 margin-top-0x margin-bottom-0x">                    zIndex(name)                </h3>				<h4 class="h6 margin-top-1x">Sass:</h4>				<pre class="code"><code>zIndex('modal');</code></pre>				<p>					Returns value from $crispy__z-index.				</p>                <h4 class="h6 margin-top-1x">Sass:</h4>				<pre class="code"><code>$crispy__z-index: (    'overlay': 90,    'modal'  : 100);</code></pre>
				<!-- modifiers -->				<hr class="margin-top-3x">				<h2 id="modifiers" class="margin-top-1x">                    Modifiziers                </h2>
				<!-- modifiers / margin & padding -->				<h3 class="h4 margin-top-1x">                    Margin & Padding                </h3>				<p>					Adding margin-top, -left, -bottom and -right and the same for padding.				</p>                <h4 class="h6 margin-top-1x">Sass:</h4>                <pre class="code">$crispy__spacing: 15px;$crispy__spacing__steps: 7;</pre></code>
                <h4 class="h6 margin-top-1x">Html:</h4>				<pre class="code">&lt;div class=&quot;panel margin-bottom-0&quot;&gt;margin-bottom-0&lt;/div&gt;&lt;div class=&quot;margin-bottom-1&quot;&gt;margin-bottom-1&lt;/div&gt;&lt;div class=&quot;margin-bottom-2&quot;&gt;margin-bottom-2&lt;/div&gt;&lt;div class=&quot;margin-bottom-3&quot;&gt;margin-bottom-3&lt;/div&gt;&lt;div class=&quot;margin-bottom-4&quot;&gt;margin-bottom-4&lt;/div&gt;&lt;div class=&quot;margin-bottom-5&quot;&gt;margin-bottom-5&lt;/div&gt;</code></pre>				<div class="panel panel__inner margin-bottom-0">margin-bottom-0</div>				<div class="panel panel__inner margin-bottom-1">margin-bottom-1</div>				<div class="panel panel__inner margin-bottom-2">margin-bottom-2</div>				<div class="panel panel__inner margin-bottom-3">margin-bottom-3</div>                <div class="panel panel__inner margin-bottom-4">margin-bottom-4</div>                <div class="panel panel__inner margin-bottom-5">margin-bottom-5</div>
                <p>                    Also set padding and margin to 0,                </p>
                <pre class="code">&lt;div class=&quot;marginless&quot;&lt;/div&gt;&lt;div class=&quot;paddingless&quot;&lt;/div&gt;</code></pre>
				<!-- modifiers / media -->				<h3 class="h4 margin-top-1">                    Media                </h3>				<pre class="code"><code>&lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;&lt;figure&gt;    &lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;    &lt;figcaption class=&quot;text-center&quot;&gt;Lorem Ipsum&lt;/figcaption&gt;&lt;/figure&gt;&lt;div class=&quot;video-responsive&quot; style=&quot;height: 280px;&quot;&gt;    &lt;iframe src=&quot;https://giphy.com/embed/13XW2MJE0XCoM0&quot; width=&quot;480&quot; height=&quot;361&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;</code></pre>				<div class="grid">					<div class="col-6">						<img class="img-responsive img-wide" src="https://picsum.photos/400" />					</div>					<div class="col-6">						<figure>							<img class="img-responsive img-wide" src="https://picsum.photos/400" />							<figcaption class="text-center">Lorem Ipsum</figcaption>						</figure>					</div>				</div>
                <!-- modifiers / Typography -->                <h3 class="h4 margin-top-1x">                    Typography                </h3>                <pre class="code">&lt;div class=&quot;text-left&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-center&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-right&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-justify&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-italic&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-weight-light&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-weight-normal&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-weight-medium&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-weight-bold&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-capitalize&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-uppercase&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-lowercase&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-smaller&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-crossed&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-underline&quot;&gt;&lt;/div&gt;</code></pre>
                <p>                    Also there are classes for,                </p>                <ul>                    <li>text-size-* with $crispy__font-sizes for "font-size"</li>                    <li>text-color-* with $crispy__colors for "color"</li>                    <li>background-color-* with $crispy__font-sizes for "background-color"</li>                </ul>
                <!-- modifiers / float -->                <h3 class="h4 margin-top-1x">                    Float                </h3>                <pre class="code">&lt;div class=&quot;float-left&quot;&gt;&lt;/div&gt;&lt;div class=&quot;float-right&quot;&gt;&lt;/div&gt;&lt;div class=&quot;float-none&quot;&gt;&lt;/div&gt;&lt;div class=&quot;centered&quot;&gt;&lt;/div&gt;&lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;</code></pre>
                <!-- modifiers / typography -->                <h3 class="h4 margin-top-1x">                    Position                </h3>                <pre class="code">&lt;div class=&quot;relative&quot;&gt;&lt;/div&gt;&lt;div class=&quot;absolute&quot;&gt;&lt;/div&gt;&lt;div class=&quot;fixed&quot;&gt;&lt;/div&gt;</code></pre>
                <!-- modifiers / border -->                <h3 class="h4 margin-top-1x">                    Border                </h3>                <pre class="code">&lt;div class=&quot;bordered&quot;&gt;&lt;/div&gt;&lt;div class=&quot;rounded&quot;&gt;&lt;/div&gt;&lt;div class=&quot;borderless&quot;&gt;&lt;/div&gt;&lt;div class=&quot;radiusless&quot;&gt;&lt;/div&gt;</code></pre>
                <!-- modifiers / visibility -->                <h3 class="h4 margin-top-1x">                    Visibility                </h3>                <pre class="code">&lt;div class=&quot;hidden&quot;&gt;&lt;/div&gt;&lt;div class=&quot;visible&quot;&gt;&lt;/div&gt;&lt;div class=&quot;visible visible--inline&quot;&gt;&lt;/div&gt;&lt;div class=&quot;visible visible--inline-block&quot;&gt;&lt;/div&gt;</code></pre>
				<!-- modifiers / width -->				<h3 class="h4 margin-top-1x">                    Width                </h3>                <h4 class="h6 margin-top-1x">Sass:</h4>                <pre class="code"><code>$crispy__width: (    '25' : 25%,    '50' : 50%,    '75' : 75%,    '100': 100%)</code></pre>
                <h4 class="h6 margin-top-1x">Html:</h4>				<pre class="code"><code>&lt;div class=&quot;panel width-25&quot;&gt;width-25&lt;/div&gt;&lt;div class=&quot;width-50&quot;&gt;width-50&lt;/div&gt;&lt;div class=&quot;width-75&quot;&gt;width-75&lt;/div&gt;&lt;div class=&quot;width-100&quot;&gt;width-100&lt;/div&gt;</code></pre>				<div class="panel panel__inner width-25 margin-bottom-1">width-25</div>				<div class="panel panel__inner width-50 margin-bottom-1">width-50</div>				<div class="panel panel__inner width-75 margin-bottom-1">width-75</div>				<div class="panel panel__inner width-100 margin-bottom-1">width-100</div>
				<!-- mixins -->				<hr class="margin-top-3x">				<h2 id="mixins" class="margin-top-1x">                    Mixins                </h2>
                <!-- mixins / triangle -->                <h3 class="h4 margin-top-1x">                    Triangle                </h3>                <h4 class="h6 margin-top-1x">Sass:</h4>                <pre class="code"><code>.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {    display: block;}
.triangle-left {    @include triangle('left', $crispy__color-primary);}
.triangle-right {    @include triangle('right', $crispy__color-primary);}
.triangle-top {    @include triangle('top', $crispy__color-primary);}
.triangle-bottom {    @include triangle('bottom', $crispy__color-primary);}</code></pre>                <p>                    <span class="triangle-right"></span>                    <span class="triangle-left"></span>                    <span class="triangle-top"></span>                    <span class="triangle-bottom"></span>                </p>
				<!-- mixins / media-queries -->				<h3 class="h4 margin-top-1x">                    Media Queries                </h3>				<p>					These <strong>@mixins</strong> were used with the Breakpoints from <a target="_blank" href="http://reflexgrid.com/docs/">http://reflexgrid.com/docs/</a>.                    Reflex-Grid is also used as grid for this Site.				</p>				<ul>					<li><strong>xs</strong> 576px</li>					<li><strong>sm</strong> 768px</li>					<li><strong>md</strong> 992px</li>					<li><strong>lg</strong> 1200px</li>					<li><strong>xlg</strong> 1600px</li>				</ul>				<h4 class="h6 margin-top-1x">Html:</h4>				<pre class="code"><code>&lt;div class=&quot;sm&quot;&gt;sm&lt;/div&gt;&lt;div class=&quot;md&quot;&gt;md&lt;/div&gt;&lt;div class=&quot;md-only&quot;&gt;md-only&lt;/div&gt;&lt;div class=&quot;lg-only&quot;&gt;lg-only&lt;/div&gt;</pre></code>				<h4 class="h6 margin-top-1x">Sass:</h4>				<pre class="code"><code>.sm, .md, .md-only, .lg-only {    display: none;}
.sm {    @include crispy__media-sm() {        display: block;    }}
.md {    @include crispy__media-md() {        display: block;    }}
.md-only {    @include crispy__media-md-only() {        display: block;    }}
.lg-only {    @include crispy__media-lg-only() {        display: block;    }}</code></pre>				<div class="grid">					<div class="col-3">						<div class="panel panel__inner sm margin-bottom-1">sm</div>					</div>					<div class="col-3">						<div class="panel panel__inner md margin-bottom-1">md</div>					</div>					<div class="col-3">						<div class="panel panel__inner md-only margin-bottom-1">md-only</div>					</div>					<div class="col-3">						<div class="panel panel__inner lg-only margin-bottom-1">lg-only</div>					</div>				</div>			</div>		</div>	</div>
    <footer class="footer">		<div class="container">			<div class="grid">				<div class="col-12">					<div class="text-center">                        <ul class="group group--horizontal group--separate">                            <li class="group__item"><a href="/imprint.html">Imprint</a></li><li class="group__item"><a href="/privacy-policy.html">Privacy Policy</a></li>                        </ul>					</div>				</div>			</div>		</div>	</footer>
</body></html>