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.
973 lines
40 KiB
973 lines
40 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>Get Started | Crispy CSS</title>
|
|
<meta name="description" content="Documentation for Crispy CSS, a lightweight CSS Framework for building Apps and Websites">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<header id="header" class="header header--fixed background-color-info">
|
|
<div class="container">
|
|
<div class="grid">
|
|
<div class="col-12">
|
|
<nav class="group">
|
|
<ul class="group group--horizontal text-left">
|
|
<li class="group__item">
|
|
<a href="/" class="text-color-white text-bold">
|
|
<svg class="icon text-size-mega" alt="Crispy CSS">
|
|
<use xlink:href="symbol-defs.svg#icon-logo" />
|
|
</svg>
|
|
Crispy CSS
|
|
</a>
|
|
</li>
|
|
<li class="group__item">
|
|
<a href="#installation" class="text-color-white margin-left-3">
|
|
Installation
|
|
</a>
|
|
</li>
|
|
<li class="group__item">
|
|
<a href="#typography" class="text-color-white">
|
|
Typography
|
|
</a>
|
|
</li>
|
|
<li class="group__item">
|
|
<a href="#components" class="text-color-white">
|
|
Components
|
|
</a>
|
|
</li>
|
|
<li class="group__item">
|
|
<a href="#modifiers" class="text-color-white">
|
|
Modifiers
|
|
</a>
|
|
</li>
|
|
<li class="group__item">
|
|
<a href="#mixins" class="text-color-white">
|
|
Mixins
|
|
</a>
|
|
</li>
|
|
<li class="group__item">
|
|
<a href="#functions" class="text-color-white">
|
|
Functions
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="container">
|
|
<div class="grid">
|
|
<div class="col-12">
|
|
|
|
<h1 class="h2 margin-top-6 margin-bottom-2 text-center">
|
|
Get started!
|
|
</h1>
|
|
|
|
<h2 id="installation" class="marginless padding-top-6">
|
|
Installation
|
|
</h2>
|
|
<hr class="margin-bottom-2">
|
|
|
|
<pre class="code"><code>npm install crispy-css</code></pre>
|
|
|
|
<h3 class="h4">SCSS</h3>
|
|
<pre class="code"><code>@import
|
|
"crispy";</code></pre>
|
|
<p>Now include Mixins you need. Components and Modifiziers only works if you include them,</p>
|
|
<pre class="code"><code>@include crispy__core();
|
|
@include crispy__modifiers();
|
|
|
|
// components
|
|
@include crispy__button();
|
|
@include crispy__code();
|
|
@include crispy__field();
|
|
@include crispy__group();
|
|
@include crispy__hero();
|
|
@include crispy__icon();
|
|
@include crispy__media();
|
|
@include crispy__modal();
|
|
@include crispy__overlay();
|
|
@include crispy__panel();
|
|
@include crispy__progress();
|
|
@include crispy__table();</code></pre>
|
|
<p>For Custom Variables add a File before importing Crispy,</p>
|
|
<pre class="code"><code>@import
|
|
"config",
|
|
"crispy";</code></pre>
|
|
|
|
<p>If you need all, mixins will be included,</p>
|
|
<pre class="code"><code>@import
|
|
"crispy-all";</code></pre>
|
|
|
|
<p>Only need Core and Modifiziers?</p>
|
|
<pre class="code"><code>@import
|
|
"crispy-minimal";</code></pre>
|
|
|
|
<h3 class="h4">CSS</h3>
|
|
<p>For using CSS you can use <span class="text-bold">crispy-all.css</span> for all Styles or <span class="text-bold">crispy-mininmal.css</span> without Components.</p>
|
|
|
|
<h3 class="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>
|
|
|
|
<h3>Site</h3>
|
|
<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>
|
|
|
|
<h3>Templates</h3>
|
|
<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 -->
|
|
<h2 id="typography" class="marginless padding-top-6">
|
|
Typography
|
|
</h2>
|
|
<hr class="margin-bottom-2">
|
|
|
|
<!-- abbr -->
|
|
<h3 class="h4 margin-top-2">a</h3>
|
|
<h4 class="h6">Html:</h4>
|
|
<pre class="code"><code><a href=""></a></code></pre>
|
|
<p>
|
|
Color of Text is set by <strong>$crispy__color-primary</strong>. <strong>Hover</strong> is set by
|
|
<strong>$crispy__color-text</strong>
|
|
</p>
|
|
|
|
<!-- abbr -->
|
|
<h3 class="h4 margin-top-2">abbr</h3>
|
|
<h4 class="h6">Html:</h4>
|
|
<pre class="code"><code><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-2">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-2">hr</h3>
|
|
<h4 class="h6">Html:</h4>
|
|
<pre class="code"><code><hr></code></pre>
|
|
<p>
|
|
<hr>
|
|
</p>
|
|
|
|
<!-- paragraph -->
|
|
<h3 class="h4 margin-top-2">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-2">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-2">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>
|
|
|
|
<!-- typography / heading -->
|
|
<h3 class="h4 margin-top-2">
|
|
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 h2</h2>
|
|
<h3>Heading h3</h3>
|
|
<h4>Heading h4</h4>
|
|
<h5>Heading h5</h5>
|
|
<h6>Heading h6</h6>
|
|
|
|
<!-- components -->
|
|
<h2 id="components" class="marginless padding-top-6">
|
|
Components
|
|
</h2>
|
|
<hr class="margin-bottom-1">
|
|
|
|
<!-- components / button -->
|
|
<h3 class="h4 margin-top-2">
|
|
Button
|
|
</h3>
|
|
<h4 class="h6">Html:</h4>
|
|
<pre class="code margin-top-1"><code><button class="button"></button>
|
|
<button class="button text-size-large"></button>
|
|
<button class="button width-100"></button></code></pre>
|
|
<button class="button">Default</button>
|
|
|
|
<p>
|
|
With <a href="#modifiers">Modifiers</a> you can also change Size and width.
|
|
</p>
|
|
|
|
<button class="button text-size-large">Default</button>
|
|
<button class="button width-100">Info</button>
|
|
|
|
<p>
|
|
Also with the Component Icon you can use SVG.
|
|
</p>
|
|
|
|
<button class="button">
|
|
<svg class="icon icon-color-danger" aria-hidden="true">
|
|
<use xlink:href="symbol-defs.svg#icon-flask"></use>
|
|
</svg>
|
|
</button>
|
|
<button class="button">
|
|
<svg class="icon icon-color-danger" aria-hidden="true">
|
|
<use xlink:href="symbol-defs.svg#icon-flask"></use>
|
|
</svg>
|
|
Button
|
|
</button>
|
|
|
|
<!-- components / code -->
|
|
<h3 class="h4 margin-top-2">
|
|
Code
|
|
</h3>
|
|
<h4 class="h6">Html:</h4>
|
|
<pre class="code margin-top-1"><code><pre class="code"><code></code></pre></code></pre>
|
|
|
|
<!-- components / group -->
|
|
<h3 class="h4 margin-top-2">
|
|
Group
|
|
</h3>
|
|
<h4 class="h6">Html:</h4>
|
|
<pre class="code"><code><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></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><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></code></pre>
|
|
<div class="panel panel__inner">
|
|
<nav>
|
|
<ul class="group group--horizontal group--separate">
|
|
<li class="group__item">first item</li><li class="group__item">second item</li><li class="group__item">third item</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- components / hero -->
|
|
<h3 class="h4 margin-top-2">
|
|
Hero
|
|
</h3>
|
|
<h4 class="h6">Html:</h4>
|
|
<pre class="code"><code><div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div></code></pre>
|
|
<div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
|
|
<pre class="code margin-top-3"><code><div class="hero hero--top" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div></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><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>
|
|
|
|
<!-- icons -->
|
|
<h3 class="h4 margin-top-2">
|
|
Icon
|
|
</h3>
|
|
<p>
|
|
Change Size of Icons with "text-size-*", you find them in the <a href="#modifiers">modifiers</a>.
|
|
</p>
|
|
<h4 class="h6">Html:</h4>
|
|
<pre class="code"><code><svg class="icon text-size-small">
|
|
<use xlink:href="symbol-defs.svg#icon-minus"></use>
|
|
</svg></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-flask"></use>
|
|
</svg>
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="symbol-defs.svg#icon-flask"></use>
|
|
</svg>
|
|
<svg class="icon text-size-large" aria-hidden="true">
|
|
<use xlink:href="symbol-defs.svg#icon-flask"></use>
|
|
</svg>
|
|
<svg class="icon text-size-big" aria-hidden="true">
|
|
<use xlink:href="symbol-defs.svg#icon-flask"></use>
|
|
</svg>
|
|
<svg class="icon text-size-mega" aria-hidden="true">
|
|
<use xlink:href="symbol-defs.svg#icon-flask"></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><svg class="icon icon-color-danger">
|
|
<use xlink:href="symbol-defs.svg#icon-flask"></use>
|
|
</svg></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-flask"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- components / panel -->
|
|
<h3 class="h4 margin-top-2">
|
|
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 / progress -->
|
|
<h3 class="h4 margin-top-2">
|
|
Progress
|
|
</h3>
|
|
<h4 class="h6">Html:</h4>
|
|
<pre class="code"><code><div class="progress">
|
|
<div class="progress__inner" style="width: 80%">
|
|
</div>
|
|
</div></code></pre>
|
|
<div class="progress">
|
|
<div class="progress__inner" style="width: 80%">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- components / modal -->
|
|
<h3 class="h4 margin-top-3">
|
|
Modal
|
|
</h3>
|
|
<h4 class="h6">Html:</h4>
|
|
<pre class="code"><code><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--top-left">
|
|
<div class="panel">
|
|
<div class="panel__inner">
|
|
.modal--top-left
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal--top-right">
|
|
<div class="panel">
|
|
<div class="panel__inner">
|
|
.modal--top-right
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal">
|
|
<div class="panel">
|
|
<div class="panel__inner">
|
|
.modal
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal--bottom-left">
|
|
<div class="panel">
|
|
<div class="panel__inner">
|
|
.modal--bottom-left
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal--bottom-right">
|
|
<div class="panel">
|
|
<div class="panel__inner">
|
|
.modal--bottom-right
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- components / table -->
|
|
<h3 class="h4 margin-top-2">
|
|
Table
|
|
</h3>
|
|
<h4 class="h6">Html:</h4>
|
|
<pre class="code"><code><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-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 / media -->
|
|
<h3 class="h4 margin-top-1">
|
|
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 width-100" src="https://picsum.photos/400" />
|
|
</div>
|
|
<div class="col-6">
|
|
<figure>
|
|
<img class="img-responsive width-100" src="https://picsum.photos/400" />
|
|
<figcaption class="text-center">Lorem Ipsum</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="h4 margin-top-0">
|
|
Fields
|
|
</h3>
|
|
|
|
<p>
|
|
Fields are Form-Elements.
|
|
</p>
|
|
|
|
<!-- components / field / checkbox -->
|
|
<h4 class="h5">
|
|
Checkbox
|
|
</h4>
|
|
<p>
|
|
Checkboxes
|
|
</p>
|
|
<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-toggle-left"></use>
|
|
</svg>
|
|
<svg class="icon field__choice__checked" aria-hidden="true">
|
|
<use xlink:href="symbol-defs.svg#icon-toggle-right"></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-toggle-left"></use>
|
|
</svg>
|
|
<svg class="icon field__choice__checked" aria-hidden="true">
|
|
<use xlink:href="symbol-defs.svg#icon-toggle-right"></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-toggle-left"></use>
|
|
</svg>
|
|
<svg class="icon field__choice__checked" aria-hidden="true">
|
|
<use xlink:href="symbol-defs.svg#icon-toggle-right"></use>
|
|
</svg>
|
|
checkbox 1
|
|
</label>
|
|
<div class="field__panel">
|
|
error item 1
|
|
</div>
|
|
</div>
|
|
|
|
<!-- components / field / radio -->
|
|
<h3 class="h4 margin-top-0">
|
|
Radio
|
|
</h3>
|
|
<div class="field">
|
|
<input id="field__radio__1" class="field__choice" type="radio" name="field__radio__1[]" value="true" />
|
|
<label for="field__radio__1" class="field__label">
|
|
<svg class="icon field__choice__unchecked" aria-hidden="true">
|
|
<use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
|
|
</svg>
|
|
<svg class="icon field__choice__checked" aria-hidden="true">
|
|
<use xlink:href="symbol-defs.svg#icon-toggle-right" />
|
|
</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-toggle-left"></use>
|
|
</svg>
|
|
<svg class="icon field__choice__checked" aria-hidden="true">
|
|
<use xlink:href="symbol-defs.svg#icon-toggle-right" />
|
|
</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-toggle-left"></use>
|
|
</svg>
|
|
<svg class="icon field__choice__checked" aria-hidden="true">
|
|
<use xlink:href="symbol-defs.svg#icon-toggle-right" />
|
|
</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-toggle-left"></use>
|
|
</svg>
|
|
<svg class="icon field__choice__checked" aria-hidden="true">
|
|
<use xlink:href="symbol-defs.svg#icon-toggle-right" />
|
|
</svg>
|
|
radio item 2
|
|
</label>
|
|
<div class="field__panel">
|
|
error item 1
|
|
</div>
|
|
</div>
|
|
|
|
<!-- components / field / select -->
|
|
<h3 class="h4 margin-top-0xx">
|
|
Select
|
|
</h3>
|
|
<div class="field">
|
|
<label class="field__label">
|
|
Select Item
|
|
<select class="field__select">
|
|
<option>select item 1</option>
|
|
<option>select item 2</option>
|
|
<option>select item 3</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="field field--error">
|
|
<label class="field__label">
|
|
Select Item
|
|
<select class="field__select">
|
|
<option>select item 1</option>
|
|
<option>select item 2</option>
|
|
<option>select item 3</option>
|
|
</select>
|
|
<div class="field__panel">
|
|
error item 1
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- components / field / input textarea -->
|
|
<h3 class="h4 margin-top-0xx">
|
|
Input / Textarea
|
|
</h3>
|
|
<div class="field">
|
|
<input class="field__text" type="text" />
|
|
</div>
|
|
<div class="field field--valid">
|
|
<label class="field__label">
|
|
Text
|
|
<input type="text" class="field__text" />
|
|
</label>
|
|
<div class="field__panel">
|
|
error item 1
|
|
</div>
|
|
</div>
|
|
<div class="field field--error">
|
|
<label class="field__label">
|
|
Text
|
|
<input type="text" class="field__text" />
|
|
</label>
|
|
<div class="field__panel">
|
|
error item 1
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="field__label">
|
|
Textarea
|
|
<textarea class="field__text"></textarea>
|
|
</label>
|
|
</div>
|
|
<div class="field field--error">
|
|
<label class="field__label">
|
|
Textarea
|
|
<textarea class="field__text"></textarea>
|
|
</label>
|
|
<div class="field__panel">
|
|
error item 1
|
|
</div>
|
|
</div>
|
|
|
|
<!-- modifiers -->
|
|
<h2 id="modifiers" class="padding-top-6">
|
|
Modifiers
|
|
</h2>
|
|
<hr class="margin-bottom-1">
|
|
|
|
<!-- modifiers / margin & padding -->
|
|
<h3 class="h4 margin-top-1">
|
|
Margin & Padding
|
|
</h3>
|
|
<p>
|
|
Adding margin and padding-top, -left, -bottom and -right. For left and right steps and values
|
|
are halved.
|
|
</p>
|
|
<h4 class="h6 margin-top-1">Sass:</h4>
|
|
<pre class="code">
|
|
$crispy__modifiers__spacing__value: 0.75em;
|
|
$crispy__modifiers__spacing__steps: 6;
|
|
</pre></code>
|
|
|
|
<h4 class="h6 margin-top-1">Html:</h4>
|
|
<pre class="code"><div class="margin-bottom-1">margin-bottom-1</div></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>
|
|
<div class="panel panel__inner margin-bottom-6">margin-bottom-6</div>
|
|
|
|
<div class="panel panel__inner margin-left-0 margin-bottom-1">margin-left-0</div>
|
|
<div class="panel panel__inner margin-left-1 margin-bottom-1">margin-left-1</div>
|
|
<div class="panel panel__inner margin-left-2 margin-bottom-1">margin-left-2</div>
|
|
<div class="panel panel__inner margin-left-3 margin-bottom-1">margin-left-3</div>
|
|
|
|
<p>
|
|
Also set padding and margin to 0,
|
|
</p>
|
|
|
|
<pre class="code"><div class="marginless"</div>
|
|
<div class="paddingless"</div></code></pre>
|
|
|
|
<!-- modifiers / Typography -->
|
|
<h3 class="h4 margin-top-1">
|
|
Typography
|
|
</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-light"></div>
|
|
<div class="text-normal"></div>
|
|
<div class="text-medium"></div>
|
|
<div class="text-bold"></div>
|
|
<div class="text-capitalize"></div>
|
|
<div class="text-uppercase"></div>
|
|
<div class="text-lowercase"></div>
|
|
<div class="text-smaller"></div>
|
|
<div class="text-crossed"></div>
|
|
<div class="text-underline"></div></code></pre>
|
|
|
|
<p>
|
|
Also there are classes for,
|
|
</p>
|
|
<ul>
|
|
<li>text-size-* with $crispy__font-sizes for "font-size"</li>
|
|
<li>text-color-* with $crispy__colors for "color"</li>
|
|
<li>background-color-* with $crispy__font-sizes for "background-color"</li>
|
|
</ul>
|
|
|
|
<!-- modifiers / float -->
|
|
<h3 class="h4 margin-top-1">
|
|
Float
|
|
</h3>
|
|
<pre class="code"><div class="float-left"></div>
|
|
<div class="float-right"></div>
|
|
<div class="float-none"></div>
|
|
<div class="centered"></div>
|
|
<div class="clearfix"></div></code></pre>
|
|
|
|
<!-- modifiers / typography -->
|
|
<h3 class="h4 margin-top-1">
|
|
Position
|
|
</h3>
|
|
<pre class="code"><div class="relative"></div>
|
|
<div class="absolute"></div>
|
|
<div class="fixed"></div></code></pre>
|
|
|
|
<!-- modifiers / border -->
|
|
<h3 class="h4 margin-top-1">
|
|
Border
|
|
</h3>
|
|
<pre class="code"><div class="bordered"></div>
|
|
<div class="rounded"></div>
|
|
<div class="borderless"></div>
|
|
<div class="radiusless"></div></code></pre>
|
|
|
|
<!-- modifiers / visibility -->
|
|
<h3 class="h4 margin-top-1">
|
|
Visibility
|
|
</h3>
|
|
<pre class="code"><div class="hidden"></div>
|
|
<div class="visible"></div>
|
|
<div class="visible visible--inline"></div>
|
|
<div class="visible visible--inline-block"></div></code></pre>
|
|
|
|
<!-- modifiers / width -->
|
|
<h3 class="h4 margin-top-1">
|
|
Width
|
|
</h3>
|
|
<h4 class="h6 margin-top-1">Sass:</h4>
|
|
<pre class="code"><code>$crispy__width: (
|
|
'25' : 25%,
|
|
'50' : 50%,
|
|
'75' : 75%,
|
|
'100': 100%
|
|
)</code></pre>
|
|
|
|
<h4 class="h6 margin-top-1">Html:</h4>
|
|
<pre class="code"><code><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-1">width-25</div>
|
|
<div class="panel panel__inner width-50 margin-bottom-1">width-50</div>
|
|
<div class="panel panel__inner width-75 margin-bottom-1">width-75</div>
|
|
<div class="panel panel__inner width-100 margin-bottom-1">width-100</div>
|
|
|
|
<!-- mixins -->
|
|
<hr class="margin-top-3">
|
|
<h2 id="mixins" class="margin-top-1">
|
|
Mixins
|
|
</h2>
|
|
|
|
<!-- mixins / triangle -->
|
|
<h3 class="h4 margin-top-1">
|
|
Triangle
|
|
</h3>
|
|
<h4 class="h6 margin-top-1">Sass:</h4>
|
|
<pre class="code"><code>.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
|
|
display: block;
|
|
}
|
|
|
|
.triangle-left {
|
|
@include triangle('left', $crispy__color-primary);
|
|
}
|
|
|
|
.triangle-right {
|
|
@include triangle('right', $crispy__color-primary);
|
|
}
|
|
|
|
.triangle-top {
|
|
@include triangle('top', $crispy__color-primary);
|
|
}
|
|
|
|
.triangle-bottom {
|
|
@include triangle('bottom', $crispy__color-primary);
|
|
}
|
|
</code></pre>
|
|
<p>
|
|
<span class="triangle-right"></span>
|
|
<span class="triangle-left"></span>
|
|
<span class="triangle-top"></span>
|
|
<span class="triangle-bottom"></span>
|
|
</p>
|
|
|
|
<!-- mixins / media-queries -->
|
|
<h3 class="h4 margin-top-1">
|
|
Media Queries
|
|
</h3>
|
|
<p>
|
|
These <strong>@mixins</strong> were used with the Breakpoints from <a target="_blank" href="http://reflexgrid.com/docs/">http://reflexgrid.com/docs/</a>.
|
|
Reflex-Grid is also used as grid for this Site.
|
|
</p>
|
|
<ul>
|
|
<li><strong>xs</strong> 576px</li>
|
|
<li><strong>sm</strong> 768px</li>
|
|
<li><strong>md</strong> 992px</li>
|
|
<li><strong>lg</strong> 1200px</li>
|
|
<li><strong>xlg</strong> 1600px</li>
|
|
</ul>
|
|
<h4 class="h6 margin-top-1">Html:</h4>
|
|
<pre class="code"><code><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-1">Sass:</h4>
|
|
<pre class="code"><code>.sm, .md, .md-only, .lg-only {
|
|
display: none;
|
|
}
|
|
|
|
.sm {
|
|
@include crispy__media-sm() {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.md {
|
|
@include crispy__media-md() {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.md-only {
|
|
@include crispy__media-md-only() {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.lg-only {
|
|
@include crispy__media-lg-only() {
|
|
display: block;
|
|
}
|
|
}</code></pre>
|
|
<div class="grid">
|
|
<div class="col-3">
|
|
<div class="panel panel__inner sm margin-bottom-1">sm</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<div class="panel panel__inner md margin-bottom-1">md</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<div class="panel panel__inner md-only margin-bottom-1">md-only</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<div class="panel panel__inner lg-only margin-bottom-1">lg-only</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- functions -->
|
|
<h2 id="functions" class="margin-top-6">
|
|
Functions
|
|
</h2>
|
|
<hr class="margin-bottom-1">
|
|
|
|
<!-- functions / stripUnit -->
|
|
<h3 class="h4 margin-top-0">
|
|
stripUnit()
|
|
</h3>
|
|
<h4 class="h6 margin-top-1">Sass:</h4>
|
|
<pre class="code"><code>stripUnit(10px);</code></pre>
|
|
<p>
|
|
Returns value without unit.
|
|
</p>
|
|
|
|
<!-- functions / zIndex -->
|
|
<h3 class="h4 margin-top-0">
|
|
zIndex(name)
|
|
</h3>
|
|
<h4 class="h6 margin-top-1">Sass:</h4>
|
|
<pre class="code"><code>zIndex('modal');</code></pre>
|
|
<p>
|
|
Returns value from $crispy__z-index.
|
|
</p>
|
|
<h4 class="h6 margin-top-1">Sass:</h4>
|
|
<pre class="code"><code>$crispy__z-index: (
|
|
'overlay': 90,
|
|
'modal' : 100
|
|
);</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body
|