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.
338 lines
14 KiB
338 lines
14 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></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--secondary">Default</button>
|
|
<button class="button button--success">Success</button>
|
|
<button class="button button--warning">Warning</button>
|
|
<button class="button button--danger">Danger</button>
|
|
<button class="button button--info">Info</button>
|
|
<button class="button button--info button--wide margin-top-1x">Info</button>
|
|
<pre class="code"><code class="margin-top-1x margin-bottom-1x"><button class="button button--danger"></button>
|
|
<button class="button button--success"></button>
|
|
<button class="button button--warning"></button>
|
|
<button class="button button--danger"></button>
|
|
<button class="button button--up"></button>
|
|
<button class="button button--down"></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" />
|
|
<img class="img-fit-cover" style="width: 100%; height: 200px;" src="https://picsum.photos/400"/>
|
|
<img class="img-fit-contain" style="width: 100%; height: 200px;" src="https://picsum.photos/400"/></code></pre>
|
|
<div class="grid">
|
|
<div class="col-6">
|
|
<img class="img-responsive" src="https://picsum.photos/400" />
|
|
</div>
|
|
<div class="col-6">
|
|
<img class="img-fit-cover" style="width: 100%; height: 200px;" src="https://picsum.photos/400" />
|
|
</div>
|
|
<div class="col-6">
|
|
<img class="img-fit-contain" style="width: 100%; height: 200px;" src="https://picsum.photos/400" />
|
|
</div>
|
|
</div>
|
|
<pre class="code"><code><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">
|
|
<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>
|