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></title>	<meta name="description" content="">	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="/css/styles.css"></head>
<body>	<header id="header" class="header">		<div class="container">			<div class="grid">				<div class="col-12">					<div class="text-center">						<hgroup>							<h1 class="header__title">                                <svg class="icon header__logo" alt="Crisp" viewBox="0 0 100 100">                                    <use xlink:href="/svg/icons.svg#chip" />                                </svg>								Crispy Boilerplate							</h1>						</hgroup>					</div>				</div>			</div>            <div class="grid">				<div class="col-sm-4">                    <div class="header__feature">                        <h2 class="header__feature-title">Less is more</h2>                        <p class="header__feature-text">                            Simple basic Components to extends in your own art                        </p>                    </div>                </div>                <div class="col-sm-4">                    <div class="header__feature">                        <h2 class="header__feature-title">Structure</h2>                        <p class="header__feature-text">                            Crispy gives you a Structure to orientate                        </p>                    </div>                </div>                <div class="col-sm-4">                    <div class="header__feature header__feature--last">                        <h2 class="header__feature-title">Helper</h2>                        <p class="header__feature-text">                            Use helper to save up time and coding less                        </p>                    </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="margin-top-0x">                        <li><a href="#introduction">Introduction</a></li>                        <li><a href="#example">Example</a></li>						<li><a href="#get-started">Get 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">                <h2 id="introduction" class="lead">                    Introduction                </h2>				<p>                    This Boilerplate has more simpler approach, it can be used                    as a base for Websites, Webapps and also Frameworks. Of Course there a                    so many Framework and Boilerplates.                </p>                <p>                    But the most are trying to hard adding styles                    that are most time will be overwritten to make it work for you. This causes a loss                    in Performance and more Fighting with the Framework and the Documentation.                </p>                <p>                    The <strong>Components</strong> are quite simple and not fancy, the have all                    fundamental styles to so the can be used.                </p>                <p>                    The <strong>Helpers</strong> have Styles for single Elements and spend it saving                    for each element to invent a single class.                </p>                <p>                    The Coding Style of this Framework is <strong>BEM</strong>, but                    also here a more simpler idea of it. <strong>BEM</strong> is a good and helpfull Coding Style,                    if you not overthinking it. It helps to create smaller compontents that you can reuse.                    Important for that, make them really small. More Information about <a href="http://getbem.com/" target="_blank">BEM</a>.                </p>
                <!-- example -->				<hr class="margin-top-3x">                <h2 id="example" class="margin-top-1x">                    Example                </h2>                <p>                    This Site is also a Example to use the Boilerplate. You can find all                    Styles for this site in "/src/scss/example". You see also that there                    is a <strong>"templates" Directory</strong>. The Idea in <strong>BEM</strong> was always                    create all in Components. That is not always Practical.                </p>                <p>                    Sometimes, the more Bigger Picture, on a Single Site or in App the                    Stylings that are so special that the belong only there and are to complex                    for a component. For this use the <strong>"templates" Directory</strong>.                </p>                <p>                    Sites also have partials like header and footer, they can put into the <strong>directory "site"</strong>.                </p>
				<!-- how to use -->				<hr class="margin-top-3x">				<h2 id="get-started" class="margin-top-1x">                    Get Started                </h2>                <pre class="code"><code>npm install crispy-boilerplate</code></pre>
				<!-- typography -->				<hr class="margin-top-3x">				<h2 id="typography" class="margin-top-1x">                    Typography                </h2>
                <!-- abbr -->				<h3 class="h4 margin-top-2x margin-bottom-0x">a</h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;a href=&quot;&quot;&gt;&lt;/a&gt;</code></pre>				<p>					a-tag color is set by <strong>$crispy__color-primary</strong>. :hover is set by                    <strong>$crispy__color-text</strong>				</p>

				<!-- abbr -->				<h3 class="h4 margin-top-2x margin-bottom-0x">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-2x margin-bottom-0x">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-2x margin-bottom-0x">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-2x margin-bottom-0x">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-2x margin-bottom-0x">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-2x margin-bottom-0x">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-3x">				<h2 id="components" class="margin-top-1x">                    Components                </h2>
				<!-- components / button -->				<h3 class="h4 margin-top-2x margin-bottom-0x">                    button                </h3>				<h4 class="h6">Html:</h4>				<pre class="code margin-top-1x"><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-1x">Info</button>
                <!-- components / code -->				<h3 class="h4 margin-top-2x margin-bottom-0x">                    code                </h3>				<h4 class="h6">Html:</h4>				<pre class="code margin-top-1x"><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-2x margin-bottom-0x">                    group                </h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;nav class=&quot;group&quot;&gt;    &lt;ul class=&quot;group__section&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-1x">					<nav class="group">						<ul class="group__section">							<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 class=&quot;group group--horizontal&quot;&gt;    &lt;ul class=&quot;group__section group__section--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 class="group group--horizontal">						<ul class="group__section group__section--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-2x margin-bottom-0x">                    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-2x margin-bottom-0x">                    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 / icon -->				<h3 class="h4 margin-top-2x margin-bottom-0x">                    icon                </h3>				<h4 class="h6">Html:</h4>				<pre class="code"><code>&lt;svg class=&quot;icon icon--small&quot; alt=&quot;beaker&quot; viewBox=&quot;0 0 100 100&quot;&gt;    &lt;use xlink:href=&quot;/svg/icons.svg#beaker&quot; /&gt;&lt;/svg&gt;&lt;svg class=&quot;icon&quot; alt=&quot;beaker&quot; viewBox=&quot;0 0 100 100&quot;&gt;    &lt;use xlink:href=&quot;/svg/icons.svg#beaker&quot; /&gt;&lt;/svg&gt;&lt;svg class=&quot;icon icon--large&quot; alt=&quot;beaker&quot; viewBox=&quot;0 0 100 100&quot;&gt;    &lt;use xlink:href=&quot;/svg/icons.svg#beaker&quot; /&gt;&lt;/svg&gt;&lt;svg class=&quot;icon icon--danger&quot; alt=&quot;alert&quot; viewBox=&quot;0 0 100 100&quot;&gt;    &lt;use xlink:href=&quot;/svg/icons.svg#alert&quot; /&gt;&lt;/svg&gt;</code></pre>				<svg class="icon icon--small" alt="beaker" viewBox="0 0 100 100">                    <use xlink:href="/svg/icons.svg#beaker" />                </svg>				<svg class="icon" alt="beaker" viewBox="0 0 100 100">                    <use xlink:href="/svg/icons.svg#beaker" />                </svg>				<svg class="icon icon--large" alt="beaker" viewBox="0 0 100 100">                    <use xlink:href="/svg/icons.svg#beaker" />                </svg>				<svg class="icon icon--danger" alt="alert" viewBox="0 0 100 100">                    <use xlink:href="/svg/icons.svg#alert" />                </svg>
				<!-- components / modal -->				<h3 class="h4 margin-top-2x margin-bottom-0x">                    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--bottom width-100">						<div class="panel">							<div class="panel__inner">								Lorem Ipsum							</div>						</div>					</div>				</div>
				<!-- components / panel -->				<h3 class="h4 margin-top-2x margin-bottom-0x">                    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 / table -->				<h3 class="h4 margin-top-2x margin-bottom-0x">                    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-2x">					<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-0x margin-bottom-0x">                    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" alt="beaker" viewBox="0 0 100 100">                            <use xlink:href="/svg/icons.svg#x" />                        </svg>                        <svg class="icon field__checkbox__checked" alt="beaker" viewBox="0 0 100 100">                            <use xlink:href="/svg/icons.svg#check" />                        </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" alt="beaker" viewBox="0 0 100 100">                            <use xlink:href="/svg/icons.svg#x" />                        </svg>                        <svg class="icon field__checkbox__checked" alt="beaker" viewBox="0 0 100 100">                            <use xlink:href="/svg/icons.svg#check" />                        </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" alt="beaker" viewBox="0 0 100 100">                            <use xlink:href="/svg/icons.svg#x" />                        </svg>                        <svg class="icon field__radio__checked" alt="beaker" viewBox="0 0 100 100">                            <use xlink:href="/svg/icons.svg#check" />                        </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" alt="beaker" viewBox="0 0 100 100">                            <use xlink:href="/svg/icons.svg#x" />                        </svg>                        <svg class="icon field__radio__checked" alt="beaker" viewBox="0 0 100 100">                            <use xlink:href="/svg/icons.svg#check" />                        </svg>                        radio item 2                    </label>                </div>
                <!-- radio / error -->                <div class="field field--error">                    <input id="field__radio__3" class="field__radio" type="radio" name="field__radio__2[]" value="true" />                    <label for="field__radio__3" class="field__label">                        <svg class="icon field__radio__unchecked" alt="beaker" viewBox="0 0 100 100">                            <use xlink:href="/svg/icons.svg#x" />                        </svg>                        <svg class="icon field__radio__checked" alt="beaker" viewBox="0 0 100 100">                            <use xlink:href="/svg/icons.svg#check" />                        </svg>                        radio item 1                    </label><br />                    <input id="field__radio__4" class="field__radio" type="radio" name="field__radio__2[]" value="true" />                    <label for="field__radio__4" class="field__label">                        <svg class="icon field__radio__unchecked" alt="beaker" viewBox="0 0 100 100">                            <use xlink:href="/svg/icons.svg#x" />                        </svg>                        <svg class="icon field__radio__checked" alt="beaker" viewBox="0 0 100 100">                            <use xlink:href="/svg/icons.svg#check" />                        </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-0x&quot;&gt;margin-bottom-0x&lt;/div&gt;&lt;div class=&quot;margin-bottom-1x&quot;&gt;margin-bottom-1x&lt;/div&gt;&lt;div class=&quot;margin-bottom-2x&quot;&gt;margin-bottom-2x&lt;/div&gt;&lt;div class=&quot;margin-bottom-3x&quot;&gt;margin-bottom-3x&lt;/div&gt;&lt;div class=&quot;margin-bottom-4x&quot;&gt;margin-bottom-4x&lt;/div&gt;&lt;div class=&quot;margin-bottom-5x&quot;&gt;margin-bottom-5x&lt;/div&gt;</code></pre>				<div class="panel panel__inner margin-bottom-0x">margin-bottom-0x</div>				<div class="panel panel__inner margin-bottom-1x">margin-bottom-1x</div>				<div class="panel panel__inner margin-bottom-2x">margin-bottom-2x</div>				<div class="panel panel__inner margin-bottom-3x">margin-bottom-3x</div>                <div class="panel panel__inner margin-bottom-4x">margin-bottom-4x</div>                <div class="panel panel__inner margin-bottom-5x">margin-bottom-5x</div>
				<!-- helpers / media -->				<h3 class="h4 margin-top-1x">                    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 it will be create 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-1x">width-25</div>				<div class="panel panel__inner width-50 margin-bottom-1x">width-50</div>				<div class="panel panel__inner width-75 margin-bottom-1x">width-75</div>				<div class="panel panel__inner width-100 margin-bottom-1x">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-1x">sm</div>					</div>					<div class="col-3">						<div class="panel panel__inner md margin-bottom-1x">md</div>					</div>					<div class="col-3">						<div class="panel panel__inner md-only margin-bottom-1x">md-only</div>					</div>					<div class="col-3">						<div class="panel panel__inner lg-only margin-bottom-1x">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">						<p>							<a target="_blank" href="https://thenounproject.com/wxchee/">W. X. Chee</a>						</p>					</div>				</div>			</div>		</div>	</footer>
    <script type="text/javascript" src="/js/app.js"></script></body>
</html>