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.
50 Commits
2 Branches
1.9 MiB
 
 
 
Tree: ddedb047b6
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'ddedb047b6'
${ noResults }
crispy-css/dest/index.html

600 lines
20 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></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/styles.min.css">
</head>
<body>
<header id="header" class="header">
<div class="container">
<div class="grid">
<div class="col-12">
<div class="text-center">
<hgroup>
<h1 class="header__title">
<svg class="icon header__logo" alt="Crisp" viewBox="0 0 100 100">
<use xlink:href="/svg/icons.svg#chip" />
</svg>
Crispy Boilerplate
</h1>
</hgroup>
</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="#npm">npm</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="#form">Form</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">
<p>
Why? There are so many! Yes, of Course, but this is not a Framework, it is a Boilerplate, more simple. I have tried to build a minimalistic sass.
</p>
<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>
<!-- npm -->
<hr class="margin-top-3x">
<h2 id="npm" class="margin-top-1x">
npm
</h2>
<p>
</p>
<!-- how to use -->
<hr class="margin-top-3x">
<h2 id="get-started" class="margin-top-1x">
Get Started
</h2>
<p>
</p>
<!-- 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">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-2x margin-bottom-0x">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>
<!-- paragraph -->
<h3 class="h4 margin-top-2x margin-bottom-0x">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>
<!-- list -->
<h3 class="h4 margin-top-2x margin-bottom-0x">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-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>&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-1x">Info</button>
<!-- components / group -->
<h3 class="h4 margin-top-2x margin-bottom-0x">
Group
</h3>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;nav class=&quot;group&quot;&gt;
&lt;ul class=&quot;group__section&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-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>&lt;nav class=&quot;group group--horizontal&quot;&gt;
&lt;ul class=&quot;group__section group__section--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 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>&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 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>&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>
<!-- components / icon -->
<h3 class="h4 margin-top-2x margin-bottom-0x">
Icon
</h3>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;svg class=&quot;icon icon--small&quot; alt=&quot;beaker&quot; viewBox=&quot;0 0 100 100&quot;&gt;
&lt;use xlink:href=&quot;/svg/icons.svg#beaker&quot; /&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon&quot; alt=&quot;beaker&quot; viewBox=&quot;0 0 100 100&quot;&gt;
&lt;use xlink:href=&quot;/svg/icons.svg#beaker&quot; /&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon icon--large&quot; alt=&quot;beaker&quot; viewBox=&quot;0 0 100 100&quot;&gt;
&lt;use xlink:href=&quot;/svg/icons.svg#beaker&quot; /&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon icon--danger&quot; alt=&quot;alert&quot; viewBox=&quot;0 0 100 100&quot;&gt;
&lt;use xlink:href=&quot;/svg/icons.svg#alert&quot; /&gt;
&lt;/svg&gt;
</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>&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--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>&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 / table -->
<h3 id="table" class="h4 margin-top-2x margin-bottom-0x">
Table
</h3>
<h4 class="h6 margin-top-1x">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-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>
<!-- form -->
<hr class="margin-top-3x">
<h2 id="functions" class="margin-top-1x">
Form
</h2>
<!-- form / input -->
<h3 class="h4 margin-top-0x margin-bottom-0x">
Input
</h3>
<input type="text" />
<!-- form / textarea -->
<h3 class="h4 margin-top-0x margin-bottom-0x">
Textarea
</h3>
<textarea></textarea>
<!-- form / textarea -->
<h3 class="h4 margin-top-0x margin-bottom-0x">
Field
</h3>
<div class="field field--valid">
<input type="text" />
<span class="field__panel">
Error!
</span>
</div>
<div class="field field--error">
<input type="text" />
<span class="field__panel">
Error!
</span>
</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>
<span class="background-warning">/functions</span>
<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">
Align
</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;float-left&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;float-center&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;float-none&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;center&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;</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">&lt;div class=&quot;panel margin-bottom-0x&quot;&gt;margin-bottom-0x&lt;/div&gt;
&lt;div class=&quot;margin-bottom-1x&quot;&gt;margin-bottom-1x&lt;/div&gt;
&lt;div class=&quot;margin-bottom-2x&quot;&gt;margin-bottom-2x&lt;/div&gt;
&lt;div class=&quot;margin-bottom-3x&quot;&gt;margin-bottom-3x&lt;/div&gt;</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>
<!-- helpers / media -->
<h3 class="h4 margin-top-1x">
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" 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 / media -->
<h3 class="h4 margin-top-1x">
Width
</h3>
<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-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>&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-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">
<p>
<a target="_blank" href="https://thenounproject.com/wxchee/">W. X. Chee</a>
</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>