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>Get Started | Crispy CSS</title>	<meta name="description" content="Lightweight Framework for building 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 header--fixed background-color-info">		<div class="container">			<div class="grid">				<div class="col-12">                    <nav class="group">                        <ul class="group group--horizontal text-left">                            <li class="group__item">                                <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>                            </li>                            <li class="group__item">                                <a href="#typography" class="text-color-white margin-left-3">                                    Typography                                </a>                            </li>                            <li class="group__item">                                <a href="#components" class="text-color-white">                                    Components                                </a>                            </li>                            <li class="group__item">                                <a href="#components" class="text-color-white">                                    Functions                                </a>                            </li>                            <li class="group__item">                                <a href="#components" class="text-color-white">                                    Modifiziers                                </a>                            </li>                        </ul>                    </nav>				</div>			</div>		</div>	</header>    <div class="container">        <div class="grid">            <div class="col-12">
                <h1 class="h2 margin-top-4 margin-bottom-2 text-center">                    Get started!                </h1>
                <h2 class="h3">Installation</h2>                <pre class="code"><code>npm install crispy-css</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__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 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">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">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">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">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">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">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">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 / heading -->    				<h3 class="h4 margin-top-2">                        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 -->    				<hr class="margin-top-3">    				<h2 id="components" class="margin-top-1">                        Components                    </h2>
    				<!-- components / button -->    				<h3 class="h4 margin-top-2">                        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 width-100&quot;&gt;&lt;/button&gt;</code></pre>    				<button class="button">Default</button>    				<button class="button width-100 margin-top-1">Info</button>
                    <!-- components / code -->    				<h3 class="h4 margin-top-2">                        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">                        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 / hero -->    				<h3 class="h4 margin-top-2">                        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">                        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>                    <div class="panel">                        <div class="panel__inner">                            <button class="button">                                <svg class="icon" aria-hidden="true">                                    <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>                                </svg>                            </button>                            <button class="button">                                <svg class="icon" aria-hidden="true">                                    <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>                                </svg>                                Button                            </button>                        </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">                        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">                        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">                        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">                        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">                        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-0">                        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-0xx">                        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-0xx">                        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-3">    				<h2 id="functions" class="margin-top-1">                        Functions                    </h2>
    				<!-- functions / stripUnit -->    				<h3 class="h4 margin-top-0">                        stripUnit()                    </h3>    				<h4 class="h6 margin-top-1">Sass:</h4>    				<pre class="code"><code>stripUnit(10px);</code></pre>    				<p>    					Returns value without unit.    				</p>
                    <!-- functions / zIndex -->    				<h3 class="h4 margin-top-0">                        zIndex(name)                    </h3>    				<h4 class="h6 margin-top-1">Sass:</h4>    				<pre class="code"><code>zIndex('modal');</code></pre>    				<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>
    				<!-- modifiers -->    				<hr class="margin-top-3">    				<h2 id="modifiers" class="margin-top-1">                        Modifiziers                    </h2>
    				<!-- modifiers / margin & padding -->    				<h3 class="h4 margin-top-1">                        Margin & Padding                    </h3>    				<p>    					Adding margin-top, -left, -bottom and -right and the same for padding.    				</p>                    <h4 class="h6 margin-top-1">Sass:</h4>                    <pre class="code">$crispy__modifiers__spacing: 0.75em;$crispy__modifiers__spacing__steps: 6;</pre></code>
                    <h4 class="h6 margin-top-1">Html:</h4>    				<pre class="code">&lt;div class=&quot;panel&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</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 width-100" src="https://picsum.photos/400" />    					</div>    					<div class="col-6">    						<figure>    							<img class="img-responsive width-100" src="https://picsum.photos/400" />    							<figcaption class="text-center">Lorem Ipsum</figcaption>    						</figure>    					</div>    				</div>
                    <!-- modifiers / Typography -->                    <h3 class="h4 margin-top-1">                        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-light&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-normal&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-medium&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-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-1">                        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-1">                        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-1">                        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-1">                        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-1">                        Width                    </h3>                    <h4 class="h6 margin-top-1">Sass:</h4>                    <pre class="code"><code>$crispy__width: (    '25' : 25%,    '50' : 50%,    '75' : 75%,    '100': 100%)</code></pre>
                    <h4 class="h6 margin-top-1">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-3">    				<h2 id="mixins" class="margin-top-1">                        Mixins                    </h2>
                    <!-- mixins / triangle -->                    <h3 class="h4 margin-top-1">                        Triangle                    </h3>                    <h4 class="h6 margin-top-1">Sass:</h4>                    <pre class="code"><code>.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {    display: block;}
.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-1">                        Media Queries                    </h3>    				<p>    					These <strong>@mixins</strong> were used with the Breakpoints from <a target="_blank" href="http://reflexgrid.com/docs/">http://reflexgrid.com/docs/</a>.                        Reflex-Grid is also used as grid for this Site.    				</p>    				<ul>    					<li><strong>xs</strong> 576px</li>    					<li><strong>sm</strong> 768px</li>    					<li><strong>md</strong> 992px</li>    					<li><strong>lg</strong> 1200px</li>    					<li><strong>xlg</strong> 1600px</li>    				</ul>    				<h4 class="h6 margin-top-1">Html:</h4>    				<pre class="code"><code>&lt;div class=&quot;sm&quot;&gt;sm&lt;/div&gt;&lt;div class=&quot;md&quot;&gt;md&lt;/div&gt;&lt;div class=&quot;md-only&quot;&gt;md-only&lt;/div&gt;&lt;div class=&quot;lg-only&quot;&gt;lg-only&lt;/div&gt;</pre></code>    				<h4 class="h6 margin-top-1">Sass:</h4>    				<pre class="code"><code>.sm, .md, .md-only, .lg-only {    display: none;}
.sm {    @include crispy__media-sm() {        display: block;    }}
.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>
</body