<!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/crispy.css">
<style>
.container {
max-width: 992px;
width: 100%;
margin: 0 auto;
}
.panel {
padding: 10px;
background-color: #efefef;
border: 1px dotted #cecece;
}
.header {
padding: 8px 0 0;
background-color: #e9e9e9;
border-bottom: 1px dotted #959595;
margin: 0 0 50px;
}
.header__logo {
width: 45px;
}
.footer {
padding: 8px 0 0;
background-color: #e9e9e9;
border-top: 1px dotted #959595;
margin: 50px 0 0 0;
}
</style>
</head>
<body>
<header id="header" class="header">
<div class="container">
<div class="grid">
<div class="col-12">
<div class="text-center">
<h1 class="header__title">
<svg class="icon header__logo" alt="chip" viewBox="0 0 100 100">
<use xlink:href="/svg/icons.svg#chip" />
</svg>
Crispy Boilerplate - small, simple, pure CSS
</h1>
</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-2">
<nav>
<ul class="margin-top-0x">
<li><a href="#typography">Typography</a></li>
<li><a href="#icon">Icon</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#table">Table</a></li>
<li><a href="#helpers">Helpers</a></li>
<li><a href="#functions">Functions</a></li>
<li><a href="#reflex-grid">Reflex Grid</a></li>
</ul>
</nav>
</div>
<div class="col-10">
<p>
A few Years a have always created Styles to use in other Frameworks, crispy boilerplate is a
a small toolkit from this helpers, styles that can be used to create. This is not beatiful or fancy
it is a simple and basic toolkit to get a default style.
</p>
<p>
For me it was important to use no js, not that i hate js, no, the Problem of bigger Frameworks was
but for the most webapps, it was always diffult to build a few things and not getting a conflict. So i desided
it is simpler to get a good stable basis and build smaller parts
</p>
<p>
So this is a smaller approch, most projects i have then that
big Frameworks were used, but i often felt that there
was a Problem, often the fight against the framework, that
result often in bigger and longer code.
This is also a try to code get a smaller base to create more effecit
No, it is a try, i can not promise you it will be done,
</p>
<h2 id="typography">Typography</h2>
<!-- blockquote -->
<h3 class="h4 margin-top-1x">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>
<strong>Strong</strong>
<!-- blockquote -->
<h3 class="h4 margin-top-1x">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>
<!-- abbr -->
<h3 class="h4 margin-top-1x">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>
<!-- list -->
<h3 class="h4 margin-top-1x">Lists</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>
<hr>
<h2 id="buttons" class="margin-top-1x">Buttons</h2>
<button class="button">Default</button>
<button class="button button--wide margin-top-1x">Info</button>
<pre class="code margin-top-1x"><code><button class="button"></button>
<button class="button button--wide"></button></code></pre>
<hr>
<h2 id="table" class="margin-top-1x">Table</h2>
<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>
<hr />
<!-- helpers -->
<h2 id="helpers" class="margin-top-1x">
Helpers
</h2>
<!-- -->
<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></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>
<!-- Reflex Grid -->
<hr />
<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>
<!-- Reflex Grid / media queries -->
<h3 class="h4 margin-top-1x">
Media Queries
</h3>
<p>
For Media Queries uses the Breakpoints from the <strong>Reflex Grid</strong>.
</p>
<ul>
<li>xs: 576px</li>
<li>sm: 768px</li>
<li>md: 992px</li>
<li>lg: 1200px</li>
<li>xlg: 1600px</li>
</ul>
<p>
You can uses a Mixin to add styles to an Breakpoint.If you want
that a style only belong to one Breakpoints "-only", otherwise it is
Mobile First.
</p>
<h4 class="h6">
Sass:
</h4>
<pre class="code"><code class="margin-bottom-1x">@include crispy__media-md() {
<!-- your code -->
}
@include crispy__media-md-only() {
<!-- your code -->
}</code></pre>
</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>
</body>
</html>