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</title>	<meta name="description" content="">	<meta name="viewport" content="width=device-width, initial-scale=1">


	<link rel="stylesheet" href="styles.css"></head>
<body>	<header id="header" class="header">		<div class="container">			<div class="grid">				<div class="col-12">					<div class="text-center">                        <hgroup>							<a href="/">                                <!--<svg class="icon header__logo" alt="Crisp" viewBox="0 0 100 100">
                                    <use xlink:href="/svg/icons.svg#chip" />                                </svg>-->                                <div class="header__title h1">								    Crispy Boilerplate<br />                                    <span class="text-small header__small">0.9.9</span>                                </div>                            </a>                            <div class="header__subtitle h5">                                Less is More                            </div>						</hgroup>					</div>				</div>			</div>		</div>	</header>	<a class="button button--up" href="#header">		<!--<svg class="icon" alt="up" viewBox="0 0 100 100">
			<use xlink:href="/svg/icons.svg#triangle-up" />		</svg>-->	</a>	<div class="container">		<div class="grid">			<div class="col-12 col-sm-3">				<nav class="nav">					<ul class="group margin-top-0">						<li><a href="#getting-started">Getting Started</a></li>						<li><a href="#typography">Typography</a></li>						<li><a href="#components">Components</a></li>						<li><a href="#functions">Functions</a></li>						<li><a href="#helpers">Helpers</a></li>						<li><a href="#mixins">Mixins</a></li>						<li><a href="#reflex-grid">Reflex Grid</a></li>					</ul>				</nav>			</div>			<div class="col-12 col-sm-9">				<p>                    Flat Sass Boilerplate gives you an amount of basic settings, components, helpers, mixins and functions.                </p>                <p>                    The problem of most frameworks is they trying to hard adding a lot of styles                    which has to be customized and documented if you used it for a Project.                    Often these changes cause a loss of performance and raise the propability of errors.                </p>                <p>                    Crispy Boilerplate uses also the following libraries:                </p>                <ul>                    <li><a href="https://necolas.github.io/normalize.css/" target="_blank">normalize.css</a></li>                    <li><a href="http://reflexgrid.com" target="_blank">reflex-grid</a></li>                </ul>
                <h3>Coding Style</h3>                <p>                    The boilerplate uses as coding style <a href="http://getbem.com/" target="_blank">BEM</a>,                    but as a more simpler idea of it. One of the benefits of BEM is that you create components and can reuse them.                    But one the other hand it can be really strange if you overthinking it.                </p>                <h3>Not Fancy but Small</h3>                <p>                    Components are created to give you a structure and a basic set of styles and not to look fancy.                    The idea is to extend each component and save time to write a bunch of extra CSS code and                    therefore get more performance while minimize the causes of errors. Of Course is really Fancy to get more Performance and less Errors.                </p>                <h3>Include</h3>                <p>                    Components and Helpers are organizes as Mixins, that makes it a little easier to                    to add Styles you need.                </p>
                <!-- getting started -->				<hr class="margin-top-3">                <h2 id="getting-started">Getting Started</h2>                <h3>Installation</h3>                <pre class="code"><code>npm install crispy-boilerplate</code></pre>                <p>Main SCSS-file:</p>                <pre class="code"><code>@import    "crispy";</code></pre>                <p>After this include mixins you need:</p>                <pre class="code"><code>@include crispy__*()</code></pre>                <p>To overwrite defaults simple add your own config-file before importing crispy:</p>                <pre class="code"><code>@import    "config",    "crispy";</code></pre>
                <h3>Example</h3>                <p>                    You find an example in "/src/example", this is this documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.                </p>                <h4>Site</h4>                <p>                    Contains header, footer, partials that are used on a site or webapp. Header and footer are not classical components, there often more complex and have a special brand.                </p>                <h4>Templates</h4>                <p>                    Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components.                </p>
				<!-- typography -->				<hr class="margin-top-3">				<h2 id="typography" class="margin-top-1">                    Typography                </h2>
                <!-- abbr -->				<h3 class="h4 margin-top-2 margin-bottom-0">a</h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;a href=&quot;&quot;&gt;&lt;/a&gt;</code></pre>				<p>					Color of Text is set by <strong>$crispy__color-primary</strong>. <strong>Hover</strong> is set by                    <strong>$crispy__color-text</strong>				</p>
				<!-- abbr -->				<h3 class="h4 margin-top-2 margin-bottom-0">abbr</h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;abbr title=&quot;&quot;&gt;&lt;/abbr&gt;</code></pre>				<p>					Glossier viral occupy mixtape pok pok cornhole, <abbr title="vape affogato hella">vape affogato hella</abbr> knausgaard thundercats				</p>
				<!-- blockquote -->				<h3 class="h4 margin-top-2 margin-bottom-0">blockquote</h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;blockquote&gt;&lt;/blockquote&gt;</code></pre>				<blockquote>					Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.				</blockquote>
                <!-- hr -->				<h3 class="h4 margin-top-2 margin-bottom-0">hr</h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;hr&gt;</code></pre>                <p>                    <hr>                </p>
				<!-- paragraph -->				<h3 class="h4 margin-top-2 margin-bottom-0">paragraph</h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;p&gt;&lt;/p&gt;</code></pre>				<p>					Glossier viral occupy mixtape pok pok.				</p>
                <!-- mark -->				<h3 class="h4 margin-top-2 margin-bottom-0">mark</h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;mark&gt;&lt;/mark&gt;</code></pre>                <p>                    Pug before they <mark>four loko</mark> Deep v bespoke                </p>
				<!-- list -->				<h3 class="h4 margin-top-2 margin-bottom-0">list</h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;ul&gt;    &lt;li&gt;item 1&lt;/li&gt;    &lt;li&gt;item 2        &lt;ul&gt;            &lt;li&gt;child item 1&lt;/li&gt;            &lt;li&gt;child item 2&lt;/li&gt;        &lt;/ul&gt;    &lt;/li&gt;&lt;/ul&gt;&lt;ol&gt;    &lt;li&gt;item 1&lt;/li&gt;    &lt;li&gt;item 2&lt;/li&gt;&lt;/ol&gt;&lt;dl&gt;    &lt;dt&gt;defined title 1&lt;/dt&gt;    &lt;dd&gt;defined item 1&lt;/dd&gt;&lt;/dl&gt;</code></pre>				<ul>					<li>item 1</li>					<li>						item 2						<ul>							<li>child item 1</li>							<li>child item 2</li>						</ul>					</li>				</ul>				<ol>					<li>item 1</li>					<li>item 2</li>				</ol>				<dl>					<dt>defined title 1</dt>					<dd>defined item 1</dd>				</dl>
				<!-- components -->				<hr class="margin-top-3">				<h2 id="components" class="margin-top-1">                    Components                </h2>
				<!-- components / button -->				<h3 class="h4 margin-top-2 margin-bottom-0">                    Button                </h3>				<h4 class="h6">Html:</h4>				<pre class="code margin-top-1"><code>&lt;button class=&quot;button&quot;&gt;&lt;/button&gt;&lt;button class=&quot;button button--wide&quot;&gt;&lt;/button&gt;</code></pre>				<button class="button">Default</button>				<button class="button button--wide margin-top-1">Info</button>
                <!-- components / code -->				<h3 class="h4 margin-top-2 margin-bottom-0">                    Code                </h3>				<h4 class="h6">Html:</h4>				<pre class="code margin-top-1"><code>&lt;pre class=&quot;code&quot;&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;</code></pre>
				<!-- components / group -->				<h3 class="h4 margin-top-2 margin-bottom-0">                    Group                </h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;nav&gt;    &lt;ul class=&quot;group&quot;&gt;        &lt;li class=&quot;group__item&quot;&gt;first item&lt;/li&gt;        &lt;li class=&quot;group__item&quot;&gt;second item&lt;/li&gt;        &lt;li class=&quot;group__item&quot;&gt;third item&lt;/li&gt;    &lt;/ul&gt;&lt;/nav&gt;</code></pre>				<div class="panel panel__inner margin-bottom-1">					<nav>						<ul class="group">							<li class="group__item">first item</li>							<li class="group__item">second item</li>							<li class="group__item">third item</li>						</ul>					</nav>				</div>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;nav&gt;    &lt;ul class=&quot;group group--horizontal group--separate&quot;&gt;        &lt;li class=&quot;group__item&quot;&gt;first item&lt;/li&gt;        &lt;li class=&quot;group__item&quot;&gt;second item&lt;/li&gt;        &lt;li class=&quot;group__item&quot;&gt;third item&lt;/li&gt;    &lt;/ul&gt;&lt;/nav&gt;</code></pre>				<div class="panel panel__inner">					<nav>						<ul class="group group--horizontal group--separate">							<li class="group__item">first item</li><li class="group__item">second item</li><li class="group__item">third item</li>						</ul>					</nav>				</div>
				<!-- components / heading -->				<h3 class="h4 margin-top-2 margin-bottom-0">                    Heading                </h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;h2&gt;&lt;/h2&gt;&lt;h2 class="h3"&gt;&lt;/h2&gt;</code></pre>				<h4 class="h6">Sass:</h4>				<pre class="code"><code>$crispy__heading__font-sizes: (    'h1': 40px,    'h2': 36px,    'h3': 32px,    'h4': 28px,    'h5': 24px,    'h6': 20px) !default;</code></pre>
				<h1>Heading h1</h1>				<h2>Heading h1</h2>				<h3>Heading h1</h3>				<h4>Heading h1</h4>				<h5>Heading h1</h5>				<h6>Heading h1</h6>
				<!-- components / hero -->				<h3 class="h4 margin-top-2 margin-bottom-0">                    Hero                </h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;div class=&quot;hero hero--bottom&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre>				<div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
                <!-- components / panel -->                <h3 class="h4 margin-top-2 margin-bottom-0">                    Panel                </h3>                <h4 class="h6">Html:</h4>                <pre class="code"><code>&lt;div class=&quot;panel&quot;&gt;    &lt;div class=&quot;panel__inner&quot;&gt;        Lorem Ipsum    &lt;/div&gt;&lt;/div&gt;</code></pre>                <div class="panel">                    <div class="panel__inner">                        Lorem Ipsum                    </div>                </div>
				<!-- components / modal -->				<h3 class="h4 margin-top-3 margin-bottom-0">                    Modal                </h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;div class=&quot;modal modal--bottom width-100&quot;&gt;     &lt;div class=&quot;panel&quot;&gt;        &lt;div class=&quot;panel__inner&quot;&gt;            Lorem Ipsum        &lt;/div&gt;    &lt;/div&gt;&lt;/div&gt;</code></pre>				<div style="position: relative; width: 100%; height: 200px; border: 1px dotted black;">                    <div class="modal modal--top-left">						<div class="panel">							<div class="panel__inner">								.modal--top-left							</div>						</div>					</div>                    <div class="modal modal--top-right">						<div class="panel">							<div class="panel__inner">								.modal--top-right							</div>						</div>					</div>					<div class="modal">						<div class="panel">							<div class="panel__inner">								.modal							</div>						</div>					</div>                    <div class="modal modal--bottom-left">						<div class="panel">							<div class="panel__inner">								.modal--bottom-left							</div>						</div>					</div>                    <div class="modal modal--bottom-right">						<div class="panel">							<div class="panel__inner">								.modal--bottom-right							</div>						</div>					</div>				</div>
				<!-- components / table -->				<h3 class="h4 margin-top-2 margin-bottom-0">                    Table                </h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;table class=&quot;table table--striped&quot;&gt;    &lt;thead&gt;        &lt;tr&gt;            &lt;th&gt;&lt;/th&gt;        &lt;/tr&gt;    &lt;/thead&gt;    &lt;tbody&gt;        &lt;tr&gt;            &lt;td&gt;&lt;/td&gt;        &lt;/tr&gt;    &lt;/tbody&gt;&lt;/table&gt;</code></pre>
				<table class="table table--striped margin-bottom-2">					<thead>						<tr>							<th>name</th>							<th>age</th>						</tr>					</thead>					<tbody>						<tr>							<td>Mr. Brown</td>							<td>43</td>						</tr>						<tr>							<td>Mr. Magenta</td>							<td>32</td>						</tr>						<tr>							<td>Mr. White</td>							<td>45</td>						</tr>					</tbody>				</table>
                <!-- components / field / checkbox -->				<h3 class="h4 margin-top-0 margin-bottom-0">                    Checkbox                </h3>                <div class="field">                    <input id="field__checkbox__1" class="field__checkbox" type="checkbox" name="field__checkbox__1" value="true" />                    <label for="field__checkbox__1" class="field__label">                        <svg class="icon field__checkbox__unchecked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-minus"></use>                        </svg>                        <svg class="icon field__checkbox__checked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-checked"></use>                        </svg>                        checkbox 1                    </label>                </div>                <div class="field field--error">                    <input id="field__checkbox__2" class="field__checkbox" type="checkbox" name="field__checkbox__2" value="true" />                    <label for="field__checkbox__2" class="field__label">                        <svg class="icon field__checkbox__unchecked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-minus"></use>                        </svg>                        <svg class="icon field__checkbox__checked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-checked"></use>                        </svg>                        checkbox 1                    </label>                    <div class="field__panel">                        error item 1                    </div>                </div>
                <!-- components / field / radio -->				<h3 class="h4 margin-top-0x margin-bottom-0x">                    Radio                </h3>                <div class="field">                    <input id="field__radio__1" class="field__radio" type="radio" name="field__radio__1[]" value="true" />                    <label for="field__radio__1" class="field__label">                        <svg class="icon field__radio__unchecked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-minus"></use>                        </svg>                        <svg class="icon field__radio__checked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-checked" />                        </svg>                        radio item 1                    </label><br />                    <input id="field__radio__2" class="field__radio" type="radio" name="field__radio__1[]" value="true" />                    <label for="field__radio__2" class="field__label">                        <svg class="icon field__radio__unchecked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-minus"></use>                        </svg>                        <svg class="icon field__radio__checked" aria-hidden="true">                            <use xlink:href="symbol-defs.svg#icon-checked" />                        </svg>                        radio item 2                    </label>                </div>
                <!-- radio / error -->                <div class="field field--error">                    <input id="field__radio__3" class="field__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>toEm(10px);</code></pre>				<p>					Returns value without unit.				</p>
				<!-- helpers -->				<hr class="margin-top-3x">				<h2 id="helpers" class="margin-top-1x">                    Helpers                </h2>
				<!-- helpers / align -->				<h3 class="h4 margin-top-1x">                    Float                </h3>				<pre class="code">&lt;div class=&quot;text-left&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-center&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-right&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-justify&quot;&gt;&lt;/div&gt;&lt;div class=&quot;float-left&quot;&gt;&lt;/div&gt;&lt;div class=&quot;float-center&quot;&gt;&lt;/div&gt;&lt;div class=&quot;float-none&quot;&gt;&lt;/div&gt;&lt;div class=&quot;center&quot;&gt;&lt;/div&gt;&lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;</code></pre>
				<!-- helpers / margin -->				<h3 class="h4 margin-top-1x">                    Margin                </h3>				<p>					margin-top and -bottom from <strong>$crispy__margin</strong> as px.				</p>				<pre class="code">&lt;div class=&quot;panel margin-bottom-0&quot;&gt;margin-bottom-0&lt;/div&gt;&lt;div class=&quot;margin-bottom-1&quot;&gt;margin-bottom-1&lt;/div&gt;&lt;div class=&quot;margin-bottom-2&quot;&gt;margin-bottom-2&lt;/div&gt;&lt;div class=&quot;margin-bottom-3&quot;&gt;margin-bottom-3&lt;/div&gt;&lt;div class=&quot;margin-bottom-4&quot;&gt;margin-bottom-4&lt;/div&gt;&lt;div class=&quot;margin-bottom-5&quot;&gt;margin-bottom-5&lt;/div&gt;</code></pre>				<div class="panel panel__inner margin-bottom-0">margin-bottom-0</div>				<div class="panel panel__inner margin-bottom-1">margin-bottom-1</div>				<div class="panel panel__inner margin-bottom-2">margin-bottom-2</div>				<div class="panel panel__inner margin-bottom-3">margin-bottom-3</div>                <div class="panel panel__inner margin-bottom-4">margin-bottom-4</div>                <div class="panel panel__inner margin-bottom-5">margin-bottom-5</div>
				<!-- helpers / media -->				<h3 class="h4 margin-top-1">                    Media                </h3>				<pre class="code"><code>&lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;&lt;figure&gt;    &lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;    &lt;figcaption class=&quot;text-center&quot;&gt;Lorem Ipsum&lt;/figcaption&gt;&lt;/figure&gt;&lt;div class=&quot;video-responsive&quot; style=&quot;height: 280px;&quot;&gt;    &lt;iframe src=&quot;https://giphy.com/embed/13XW2MJE0XCoM0&quot; width=&quot;480&quot; height=&quot;361&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;</code></pre>				<div class="grid">					<div class="col-6">						<img class="img-responsive" src="https://picsum.photos/400" />					</div>					<div class="col-6">						<figure>							<img class="img-responsive" src="https://picsum.photos/400" />							<figcaption class="text-center">Lorem Ipsum</figcaption>						</figure>					</div>				</div>				<div class="grid">					<div class="col-6">						<div class="video-responsive" style="height: 280px;">							<iframe src="https://giphy.com/embed/13XW2MJE0XCoM0" width="480" height="361" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>						</div>					</div>				</div>
                <!-- helpers / text -->                <h3 class="h4 margin-top-1x">                    Text                </h3>                <pre class="code">&lt;div class=&quot;text-left&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-center&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-right&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-justify&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-italic&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-normal&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-bold&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-uppercase&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-lowercase&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-small&quot;&gt;&lt;/div&gt;&lt;div class=&quot;text-crossed&quot;&gt;&lt;/div&gt;</code></pre>
                <p>                    Also there are classes for,                </p>                <ul>                    <li>text-* with $crispy__font-sizes for "font-size"</li>                    <li>text-* with $crispy__colors for "color"</li>                    <li>background-* with $crispy__font-sizes for "background-color"</li>                </ul>
				<!-- helpers / media -->				<h3 class="h4 margin-top-1x">                    Width                </h3>				<pre class="code"><code>&lt;div class=&quot;panel width-25&quot;&gt;width-25&lt;/div&gt;&lt;div class=&quot;width-50&quot;&gt;width-50&lt;/div&gt;&lt;div class=&quot;width-75&quot;&gt;width-75&lt;/div&gt;&lt;div class=&quot;width-100&quot;&gt;width-100&lt;/div&gt;</code></pre>				<div class="panel panel__inner width-25 margin-bottom-1">width-25</div>				<div class="panel panel__inner width-50 margin-bottom-1">width-50</div>				<div class="panel panel__inner width-75 margin-bottom-1">width-75</div>				<div class="panel panel__inner width-100 margin-bottom-1">width-100</div>
				<!-- mixins -->				<hr class="margin-top-3x">				<h2 id="mixins" class="margin-top-1x">                    Mixins                </h2>
				<!-- mixins / media-queries -->				<h3 class="h4 margin-top-1x">                    Media Queries                </h3>				<p>					These <strong>@mixins</strong> were used with the Breakpoints from the <a href="#reflex-grid">Reflex Grid</a>.				</p>				<ul>					<li><strong>xs</strong> 576px</li>					<li><strong>sm</strong> 768px</li>					<li><strong>md</strong> 992px</li>					<li><strong>lg</strong> 1200px</li>					<li><strong>xlg</strong> 1600px</li>				</ul>				<h4 class="h6 margin-top-1x">Html:</h4>				<pre class="code"><code>&lt;div class=&quot;sm&quot;&gt;sm&lt;/div&gt;&lt;div class=&quot;md&quot;&gt;md&lt;/div&gt;&lt;div class=&quot;md-only&quot;&gt;md-only&lt;/div&gt;&lt;div class=&quot;lg-only&quot;&gt;lg-only&lt;/div&gt;</pre></code>				<h4 class="h6 margin-top-1x">Sass:</h4>				<pre class="code"><code>.sm, .md, .md-only, .lg-only {    display: none;}
.sm {    @include crispy__media-sm() {        display: block;    }}
.md {    @include crispy__media-md() {        display: block;    }}
.md-only {    @include crispy__media-md-only() {        display: block;    }}
.lg-only {    @include crispy__media-lg-only() {        display: block;    }}</code></pre>				<div class="grid">					<div class="col-3">						<div class="panel panel__inner sm margin-bottom-1">sm</div>					</div>					<div class="col-3">						<div class="panel panel__inner md margin-bottom-1">md</div>					</div>					<div class="col-3">						<div class="panel panel__inner md-only margin-bottom-1">md-only</div>					</div>					<div class="col-3">						<div class="panel panel__inner lg-only margin-bottom-1">lg-only</div>					</div>				</div>
				<!-- Reflex Grid -->				<hr class="margin-top-3x">				<h2 id="reflex-grid" class="margin-top-1x">						Reflex Grid					</h2>				<p>					The <strong>Reflex Grid</strong> is from <a target="_blank" href="http://lendmeyourear.net">Lee Jordan</a>. I have build a few helper for media-queries. <strong>Reflex Grid </strong> is lightweight, simple and uses a flexbox grid with cross browser					support, an inline-block fallback.				</p>				<p>					Documentation: <a target="_blank" href="http://reflexgrid.com/docs/">http://reflexgrid.com/docs/</a><br /> Github: <a target="_blank" href="https://github.com/leejordan/reflex">https://github.com/leejordan/reflex</a>				</p>			</div>		</div>	</div>
    <footer class="footer">		<div class="container">			<div class="grid">				<div class="col-12">					<div class="text-center">						<div class="group group--horizontal">                            <ul class="group__section group__section--separate">                                <li class="group__item"><a href="/imprint.html">Imprint</a></li><li class="group__item"><a href="/privacy-policy.html">Privacy Policy</a></li>                            </ul>                        </div>					</div>				</div>			</div>		</div>	</footer>
</body></html>