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.
833 lines
32 KiB
833 lines
32 KiB
<!doctype html>
|
|
<html class="no-js" lang="en_EN">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>Cripsy Boilerplate</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>
|
|
<div class="header__title h1">
|
|
<a href="/">
|
|
<svg class="icon header__logo" alt="Crisp" viewBox="0 0 100 100">
|
|
<use xlink:href="/svg/icons.svg#chip" />
|
|
</svg>
|
|
Crispy Boilerplate <span class="text-small">0.9.7</span>
|
|
</a>
|
|
</div>
|
|
</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><a href=""></a></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><abbr title=""></abbr></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><blockquote></blockquote></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><hr></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><p></p></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><mark></mark></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><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></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><button class="button"></button>
|
|
<button class="button button--wide"></button></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><pre class="code"><code></code></pre></code></pre>
|
|
|
|
<!-- components / group -->
|
|
<h3 class="h4 margin-top-2x margin-bottom-0x">
|
|
group
|
|
</h3>
|
|
<h4 class="h6">Html:</h4>
|
|
<pre class="code"><code><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></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><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></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><h2></h2>
|
|
<h2 class="h3"></h2></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><div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div></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><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>
|
|
</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><div class="modal modal--bottom width-100">
|
|
<div class="panel">
|
|
<div class="panel__inner">
|
|
Lorem Ipsum
|
|
</div>
|
|
</div>
|
|
</div></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><div class="panel">
|
|
<div class="panel__inner">
|
|
Lorem Ipsum
|
|
</div>
|
|
</div></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><table class="table table--striped">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td></td>
|
|
</tr>
|
|
</tbody>
|
|
</table></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"><div class="text-left"></div>
|
|
<div class="text-center"></div>
|
|
<div class="text-right"></div>
|
|
<div class="text-justify"></div>
|
|
<div class="float-left"></div>
|
|
<div class="float-center"></div>
|
|
<div class="float-none"></div>
|
|
<div class="center"></div>
|
|
<div class="clearfix"></div></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"><div class="panel margin-bottom-0x">margin-bottom-0x</div>
|
|
<div class="margin-bottom-1x">margin-bottom-1x</div>
|
|
<div class="margin-bottom-2x">margin-bottom-2x</div>
|
|
<div class="margin-bottom-3x">margin-bottom-3x</div>
|
|
<div class="margin-bottom-4x">margin-bottom-4x</div>
|
|
<div class="margin-bottom-5x">margin-bottom-5x</div></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><img class="img-responsive" src="https://picsum.photos/400" />
|
|
<figure>
|
|
<img class="img-responsive" src="https://picsum.photos/400" />
|
|
<figcaption class="text-center">Lorem Ipsum</figcaption>
|
|
</figure>
|
|
<div class="video-responsive" style="height: 280px;">
|
|
<iframe src="https://giphy.com/embed/13XW2MJE0XCoM0" width="480" height="361"></iframe>
|
|
</div></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"><div class="text-left"></div>
|
|
<div class="text-center"></div>
|
|
<div class="text-right"></div>
|
|
<div class="text-justify"></div>
|
|
<div class="text-italic"></div>
|
|
<div class="text-normal"></div>
|
|
<div class="text-bold"></div>
|
|
<div class="text-uppercase"></div>
|
|
<div class="text-lowercase"></div>
|
|
<div class="text-small"></div>
|
|
<div class="text-crossed"></div></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><div class="panel width-25">width-25</div>
|
|
<div class="width-50">width-50</div>
|
|
<div class="width-75">width-75</div>
|
|
<div class="width-100">width-100</div></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><div class="sm">sm</div>
|
|
<div class="md">md</div>
|
|
<div class="md-only">md-only</div>
|
|
<div class="lg-only">lg-only</div></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">
|
|
<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>
|
|
|
|
<script type="text/javascript" src="/js/app.js"></script>
|
|
</body>
|
|
|
|
</html>
|