tentakelfabrik
/
crispy-css
1
0
Fork 0
Code Issues 1 Pull Requests 0 Releases 1 Wiki Activity
Lightweight CSS Framework for Building Apps and Websites https://crispy-css.com
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 Commits
2 Branches
1.9 MiB
 
 
 
Tree: 6e78323777
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '6e78323777'
${ noResults }
crispy-css/dist/example/index.html

987 lines
38 KiB
Raw Blame History

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