tentakelfabrik
/
crispy-css
1
0
Fork 0
Code Issues 1 Pull Requests 0 Releases 1 Wiki Activity
Browse Source

adding

master
Björn 4 years ago
parent
a350514374
commit
03f24b040c
61 changed files with 2513 additions and 1924 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      dist/crispy-all.css
  2. +1
    -1
      dist/crispy-minimal.css
  3. +0
    -973
      dist/example/getstarted.html
  4. +0
    -66
      dist/example/imprint.html
  5. +0
    -66
      dist/example/privacy-policy.html
  6. +0
    -1
      dist/example/styles.css
  7. +240
    -0
      dist/examples/components.html
  8. +1
    -0
      dist/examples/core.html
  9. +4
    -0
      dist/examples/functions.html
  10. +16
    -0
      dist/examples/getstarted.html
  11. +16
    -0
      dist/examples/getting-started.html
  12. +1
    -0
      dist/examples/helpers.html
  13. +0
    -0
      dist/examples/img/gaming-circus.jpg
  14. +0
    -0
      dist/examples/img/tentakelfabrik.jpg
  15. +0
    -0
      dist/examples/img/trinkkofi.jpg
  16. +1
    -0
      dist/examples/imprint.html
  17. +1
    -0
      dist/examples/index.html
  18. +49
    -0
      dist/examples/mixins.html
  19. +1
    -0
      dist/examples/privacy-policy.html
  20. +1
    -0
      dist/examples/styles.css
  21. +0
    -0
      dist/examples/symbol-defs.svg
  22. +2
    -2
      mix-manifest.json
  23. +351
    -0
      package-lock.json
  24. +1
    -0
      package.json
  25. +16
    -311
      src/_core.scss
  26. +42
    -9
      src/_functions.scss
  27. +77
    -46
      src/_helpers.scss
  28. +58
    -0
      src/_mixins.scss
  29. +0
    -341
      src/_normalize.scss
  30. +51
    -23
      src/_variables.scss
  31. +19
    -2
      src/components/_button.scss
  32. +5
    -2
      src/components/_code.scss
  33. +9
    -5
      src/components/_field.scss
  34. +16
    -7
      src/components/_group.scss
  35. +3
    -15
      src/components/_icon.scss
  36. +12
    -5
      src/components/_modal.scss
  37. +4
    -2
      src/components/_panel.scss
  38. +3
    -3
      src/components/_progress.scss
  39. +4
    -1
      src/components/_table.scss
  40. +35
    -0
      src/core/_heading.scss
  41. +190
    -0
      src/core/_normalize.scss
  42. +127
    -0
      src/core/_typography.scss
  43. +2
    -2
      src/crispy-all.scss
  44. +1
    -1
      src/crispy-minimal.scss
  45. +1
    -1
      src/crispy.scss
  46. +0
    -0
      src/examples/components/_nav.scss
  47. +1
    -2
      src/examples/site/_header.scss
  48. +0
    -0
      src/examples/styles.scss
  49. +0
    -0
      src/examples/templates/_home.scss
  50. +14
    -34
      src/html/index.html.ejs
  51. +81
    -0
      src/html/page.html.ejs
  52. +666
    -0
      src/html/partials/components.html
  53. +69
    -0
      src/html/partials/core.html
  54. +21
    -0
      src/html/partials/footer.html
  55. +24
    -0
      src/html/partials/functions.html
  56. +53
    -0
      src/html/partials/getting-started.html
  57. +52
    -0
      src/html/partials/helpers.html
  58. +0
    -0
      src/html/partials/imprint.html
  59. +94
    -0
      src/html/partials/mixins.html
  60. +0
    -0
      src/html/partials/privacy-policy.html
  61. +76
    -2
      webpack.mix.js

+ 1
- 1
dist/crispy-all.css
File diff suppressed because it is too large
View File


+ 1
- 1
dist/crispy-minimal.css
File diff suppressed because it is too large
View File


+ 0
- 973
dist/example/getstarted.html View File

@ -1,973 +0,0 @@
<!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>&lt;a href=&quot;&quot;&gt;&lt;/a&gt;</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>&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-2">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>
<!-- hr -->
<h3 class="h4 margin-top-2">hr</h3>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;hr&gt;</code></pre>
<p>
<hr>
</p>
<!-- paragraph -->
<h3 class="h4 margin-top-2">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>
<!-- mark -->
<h3 class="h4 margin-top-2">mark</h3>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;mark&gt;&lt;/mark&gt;</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>&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>
<!-- typography / heading -->
<h3 class="h4 margin-top-2">
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 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>&lt;button class=&quot;button&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;button text-size-large&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;button width-100&quot;&gt;&lt;/button&gt;</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>&lt;pre class=&quot;code&quot;&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;</code></pre>
<!-- components / group -->
<h3 class="h4 margin-top-2">
Group
</h3>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;nav&gt;
&lt;ul class=&quot;group&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-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>&lt;nav&gt;
&lt;ul class=&quot;group group--horizontal group--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>
<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>&lt;div class=&quot;hero&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre>
<div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
<pre class="code margin-top-3"><code>&lt;div class=&quot;hero hero--top&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</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>&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>
<!-- 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>&lt;svg class=&quot;icon text-size-small&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-minus&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;</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>&lt;svg class=&quot;icon icon-color-danger&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;</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>&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 / progress -->
<h3 class="h4 margin-top-2">
Progress
</h3>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress__inner&quot; style=&quot;width: 80%&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;</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>&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--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>&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-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>&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 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">&lt;div class=&quot;margin-bottom-1&quot;&gt;margin-bottom-1&lt;/div&gt;</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">&lt;div class=&quot;marginless&quot;&lt;/div&gt;
&lt;div class=&quot;paddingless&quot;&lt;/div&gt;</code></pre>
<!-- modifiers / Typography -->
<h3 class="h4 margin-top-1">
Typography
</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;text-italic&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-light&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-normal&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-medium&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-bold&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-capitalize&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-uppercase&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-lowercase&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-smaller&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-crossed&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-underline&quot;&gt;&lt;/div&gt;</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">&lt;div class=&quot;float-left&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;float-right&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;float-none&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;centered&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;</code></pre>
<!-- modifiers / typography -->
<h3 class="h4 margin-top-1">
Position
</h3>
<pre class="code">&lt;div class=&quot;relative&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;absolute&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;fixed&quot;&gt;&lt;/div&gt;</code></pre>
<!-- modifiers / border -->
<h3 class="h4 margin-top-1">
Border
</h3>
<pre class="code">&lt;div class=&quot;bordered&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;rounded&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;borderless&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;radiusless&quot;&gt;&lt;/div&gt;</code></pre>
<!-- modifiers / visibility -->
<h3 class="h4 margin-top-1">
Visibility
</h3>
<pre class="code">&lt;div class=&quot;hidden&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;visible&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;visible visible--inline&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;visible visible--inline-block&quot;&gt;&lt;/div&gt;</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>&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-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>&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-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

+ 0
- 66
dist/example/imprint.html View File

@ -1,66 +0,0 @@
<!doctype html>
<html class="no-js" lang="en_EN">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title>
<meta name="description" content="Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header" class="header">
<div class="container">
<div class="grid">
<div class="col-12">
<div class="text-center">
<hgroup>
<a href="/">
<h1 class="h2 margin-top-4 margin-bottom-0">
<svg class="icon icon--big margin-bottom-1" alt="Crispy CSS">
<use xlink:href="symbol-defs.svg#icon-logo" />
</svg><br />
Crispy CSS
</h1>
</a>
<small class="text-color-primary">v3.0.0</small>
<h2 class="h5 margin-top-1">
Lightweight CSS Framework for Building Apps and Websites
</h2>
</hgroup>
</div>
</div>
</div>
</div>
</header>
<div class="container">
</div>
<footer class="footer background-color-info margin-top-4 padding-top-5 padding-bottom-2">
<div class="container">
<div class="grid">
<div class="col-12">
<div class="text-center">
<ul class="group group--horizontal group--separate">
<li class="group__item">
<a class="text-color-white" href="/imprint.html">Imprint</a>
</li>
<li class="group__item">
<a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a>
</li>
</ul>
<p class="margin-top-1">
Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a>
</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>

+ 0
- 66
dist/example/privacy-policy.html View File

@ -1,66 +0,0 @@
<!doctype html>
<html class="no-js" lang="en_EN">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title>
<meta name="description" content="Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header" class="header">
<div class="container">
<div class="grid">
<div class="col-12">
<div class="text-center">
<hgroup>
<a href="/">
<h1 class="h2 margin-top-4 margin-bottom-0">
<svg class="icon icon--big margin-bottom-1" alt="Crispy CSS">
<use xlink:href="symbol-defs.svg#icon-logo" />
</svg><br />
Crispy CSS
</h1>
</a>
<small class="text-color-primary">v3.0.0</small>
<h2 class="h5 margin-top-1">
Lightweight CSS Framework for Building Apps and Websites
</h2>
</hgroup>
</div>
</div>
</div>
</div>
</header>
<div class="container">
</div>
<footer class="footer background-color-info margin-top-4 padding-top-5 padding-bottom-2">
<div class="container">
<div class="grid">
<div class="col-12">
<div class="text-center">
<ul class="group group--horizontal group--separate">
<li class="group__item">
<a class="text-color-white" href="/imprint.html">Imprint</a>
</li>
<li class="group__item">
<a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a>
</li>
</ul>
<p class="margin-top-1">
Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a>
</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>

+ 0
- 1
dist/example/styles.css
File diff suppressed because it is too large
View File


+ 240
- 0
dist/examples/components.html View File

@ -0,0 +1,240 @@
<!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Components | Crispy CSS</title><meta name="description" content=""><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 col-md-4"><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></div><div class="col-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Components</h1></header><h2 class="margin-bottom-1">Button</h2><hr class="marginless margin-bottom-2"/><h3 class="h4">Scss:</h3><pre class="code margin-top-1"><code>$crispy__button__font-family: $crispy__font-family;
$crispy__button__font-weight: $crispy__font-weight;
$crispy__button__font-size: $crispy__font-size;
$crispy__button__font-size-breakpoints: $crispy__font-size__breakpoints;
$crispy__button__padding: 0.3em 0.8em;
$crispy__button__padding-breakpoints: (
$crispy__md: 0.4em 1.2em
);
</code></pre><h3 class="h4">Html:</h3><pre class="code margin-top-1"><code>&lt;button class=&quot;button&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;button text-size-medium&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;button text-size-large&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;button width-100&quot;&gt;&lt;/button&gt;</code></pre><button class="button">Default</button> <button class="button text-size-medium">Default</button> <button class="button text-size-large">Default</button> <button class="button width-100">Info</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 class="button"><svg class="icon icon-color-danger" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg> Button</button><h2 class="margin-top-3 margin-bottom-1">Code</h2><hr class="marginless margin-bottom-2"/><h3 class="h4">Scss:</h3><pre class="code margin-top-1"><code>$crispy__code__padding: $crispy__padding;
$crispy__code__padding-breakpoints: $crispy__padding-breakpoints;
$crispy__code__margin: $crispy__margin;
$crispy__code__border: $crispy__border;
$crispy__code__background-color: $crispy__color-grey-light;
</code></pre><h3 class="h4">Html:</h3><pre class="code margin-top-1"><code>&lt;pre class=&quot;code&quot;&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;</code></pre><h2 class="margin-top-3">Fields</h2><h3 class="h4 magin-top-2">Scss:</h3><pre class="code margin-top-1"><code>$crispy__field__margin: $crispy__margin;
$crispy__field__border: $crispy__border;
$crispy__field__color--valid: $crispy__color-success;
$crispy__field__color--error: $crispy__color-danger;
$crispy__field__border-color--focus: $crispy__color-primary;
$crispy__field__border-color--valid: $crispy__color-success;
$crispy__field__border-color--error: $crispy__color-danger;
$crispy__field__choice__checked__color: $crispy__color-success;
$crispy__field__choice__unchecked__color: $crispy__color-danger;
$crispy__field__input__padding: 0.4em 0.6em;
$crispy__field__input__color: $crispy__color-text;
$crispy__field__select__padding: 0.3em 0.5em;
$crispy__field__panel__padding: 0.3em 0.6em;
$crispy__field__select__background-color: white;
$crispy__field__select__border: $crispy__border;</code></pre><h3 class="h4 margin-top-2">Input / Textarea</h3><pre class="code margin-top-1"><code>&lt;div class=&quot;field&quot;&gt;
&lt;input class=&quot;field__text&quot; type=&quot;text&quot; /&gt;
&lt;/div&gt;
&lt;div class=&quot;field field--valid&quot;&gt;
&lt;label class=&quot;field__label&quot;&gt;
Text
&lt;input type=&quot;text&quot; class=&quot;field__text&quot; /&gt;
&lt;/label&gt;
&lt;div class=&quot;field__panel&quot;&gt;
error item 1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;field field--error&quot;&gt;
&lt;label class=&quot;field__label&quot;&gt;
Text
&lt;input type=&quot;text&quot; class=&quot;field__text&quot; /&gt;
&lt;/label&gt;
&lt;div class=&quot;field__panel&quot;&gt;
error item 1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;field&quot;&gt;
&lt;label class=&quot;field__label&quot;&gt;
Textarea
&lt;textarea class=&quot;field__text&quot;&gt;&lt;/textarea&gt;
&lt;/label&gt;
&lt;/div&gt;</code></pre><div class="field"><input class="field__text"/></div><div class="field field--valid"><label class="field__label">Text <input class="field__text"/></label><div class="field__panel">error item 1</div></div><div class="field field--error"><label class="field__label">Text <input 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><h3 class="h4 margin-top-2">Checkbox</h3><pre class="code margin-top-1"><code>&lt;div class=&quot;field&quot;&gt;
&lt;input id=&quot;field__checkbox__1&quot; class=&quot;field__choice&quot; type=&quot;checkbox&quot; name=&quot;field__checkbox__1&quot; value=&quot;true&quot; /&gt;
&lt;label for=&quot;field__checkbox__1&quot; class=&quot;field__label&quot;&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
checkbox 1
&lt;/label&gt;
&lt;input id=&quot;field__checkbox__2&quot; class=&quot;field__choice&quot; type=&quot;checkbox&quot; name=&quot;field__checkbox__2&quot; value=&quot;true&quot; /&gt;
&lt;label for=&quot;field__checkbox__2&quot; class=&quot;field__label&quot;&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
checkbox 2
&lt;/label&gt;
&lt;/div&gt;</code></pre><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 text-size-medium field__choice__unchecked" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-toggle-left"></use></svg> <svg class="icon text-size-medium 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 text-size-medium field__choice__unchecked" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-toggle-left"></use></svg> <svg class="icon text-size-medium 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 text-size-medium field__choice__unchecked" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-toggle-left"></use></svg> <svg class="icon text-size-medium 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><h3 class="h4 margin-top-2">Radio</h3><pre class="code margin-top-1"><code>&lt;div class=&quot;field&quot;&gt;
&lt;input id=&quot;field__radio__1&quot; class=&quot;field__choice&quot; type=&quot;radio&quot; name=&quot;field__radio__1[]&quot; value=&quot;true&quot; /&gt;
&lt;label for=&quot;field__radio__1&quot; class=&quot;field__label&quot;&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot; /&gt;
&lt;/svg&gt;
radio item 1
&lt;/label&gt;&lt;br /&gt;
&lt;input id=&quot;field__radio__2&quot; class=&quot;field__choice&quot; type=&quot;radio&quot; name=&quot;field__radio__1[]&quot; value=&quot;true&quot; /&gt;
&lt;label for=&quot;field__radio__2&quot; class=&quot;field__label&quot;&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot; /&gt;
&lt;/svg&gt;
radio item 2
&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;field field--error&quot;&gt;
&lt;input id=&quot;field__radio__3&quot; class=&quot;field__choice&quot; type=&quot;radio&quot; name=&quot;field__radio__2[]&quot; value=&quot;true&quot; /&gt;
&lt;label for=&quot;field__radio__3&quot; class=&quot;field__label&quot;&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot; /&gt;
&lt;/svg&gt;
radio item 1
&lt;/label&gt;&lt;br /&gt;
&lt;input id=&quot;field__radio__4&quot; class=&quot;field__choice&quot; type=&quot;radio&quot; name=&quot;field__radio__2[]&quot; value=&quot;true&quot; /&gt;
&lt;label for=&quot;field__radio__4&quot; class=&quot;field__label&quot;&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot; /&gt;
&lt;/svg&gt;
radio item 2
&lt;/label&gt;
&lt;div class=&quot;field__panel&quot;&gt;
error item 1
&lt;/div&gt;
&lt;/div&gt;</code></pre><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 text-size-medium field__choice__unchecked" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-toggle-left"></use></svg> <svg class="icon text-size-medium 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 text-size-medium field__choice__unchecked" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-toggle-left"></use></svg> <svg class="icon text-size-medium field__choice__checked" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-toggle-right"/></svg> radio item 2</label></div><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 text-size-medium field__choice__unchecked" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-toggle-left"></use></svg> <svg class="icon text-size-medium 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 text-size-medium field__choice__unchecked" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-toggle-left"></use></svg> <svg class="icon text-size-medium 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><h3 class="h4 margin-top-2">Select</h3><pre class="code margin-top-1"><code>&lt;div class=&quot;field&quot;&gt;
&lt;label class=&quot;field__label&quot;&gt;
Select Item
&lt;select class=&quot;field__select&quot;&gt;
&lt;option&gt;select item 1&lt;/option&gt;
&lt;option&gt;select item 2&lt;/option&gt;
&lt;option&gt;select item 3&lt;/option&gt;
&lt;/select&gt;
&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;field field--error&quot;&gt;
&lt;label class=&quot;field__label&quot;&gt;
Select Item
&lt;select class=&quot;field__select&quot;&gt;
&lt;option&gt;select item 1&lt;/option&gt;
&lt;option&gt;select item 2&lt;/option&gt;
&lt;option&gt;select item 3&lt;/option&gt;
&lt;/select&gt;
&lt;div class=&quot;field__panel&quot;&gt;
error item 1
&lt;/div&gt;
&lt;/label&gt;
&lt;/div&gt;</code></pre><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><h2 class="margin-top-3">Group</h2><h3 class="h4">Scss:</h3><pre class="code"><code>$crispy__group__margin: 0.3em !default;
$crispy__group__character: '/' !default;
$crispy__group__character-margin: 0 $crispy__group__margin 0 !default;</code></pre><h3 class="h4">Html:</h3><pre class="code"><code>&lt;nav&gt;
&lt;ul class=&quot;group group--hr&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-2"><nav><ul class="group group--hr"><li class="group__item">first item</li><li class="group__item">second item</li><li class="group__item">third item</li></ul></nav></div><div class="panel panel__inner"><nav><ul class="group"><li class="group__item"><button class="button marginless">Button</button></li><li class="group__item"><button class="button marginless">Button</button></li><li class="group__item"><button class="button marginless">Button</button></li></ul></nav></div><h2 class="margin-top-3">Hero</h2><h3 class="h4">Html:</h3><pre class="code"><code>&lt;div class=&quot;hero&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre><div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div><pre class="code margin-top-3"><code>&lt;div class=&quot;hero hero--top&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</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>&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><h2 class="margin-top-3">Icon</h2><h3 class="h4">Scss:</h3><pre class="code"><code>$crispy__icon__size: 1.15em;
</code></pre><h3 class="h4">Html:</h3><pre class="code"><code>&lt;svg class=&quot;icon text-size-small&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-large&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-big&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-mega&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon icon-color-danger&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;;</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> <svg class="icon icon-color-danger" aria-hidden="true"><use xlink:href="symbol-defs.svg#icon-flask"></use></svg></div></div><h2 class="margin-top-3">Media</h2><h3 class="h4">Html:</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;
</code></pre><div class="grid"><div class="col-12 col-md-6"><img class="img-responsive width-100" src="https://picsum.photos/400"/></div><div class="col-12 col-md-6"><figure><img class="img-responsive width-100" src="https://picsum.photos/400"/><figcaption class="text-center">Lorem Ipsum</figcaption></figure></div></div><h2 class="margin-top-3">Panel</h2><h3 class="h4">Scss:</h3><pre class="code"><code>$crispy__panel__inner-padding: $crispy__padding;
$crispy__panel__inner-padding-breakpoints: $crispy__padding-breakpoints;
$crispy__panel__background-color: $crispy__color-grey-light;
</code></pre><h3 class="h4">Html:</h3><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><h2 class="margin-top-3">Progress</h2><h3 class="h4">Scss:</h3><pre class="code"><code>$crispy__progress__height: 30px;
$crispy__progress__background-color: $crispy__color-primary;
$crispy__progress__border-width: 1px;
$crispy__progress__border-color: $crispy__color-border;
</code></pre><h3 class="h4">Html:</h3><pre class="code"><code>&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress__inner&quot; style=&quot;width: 80%&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre><div class="progress"><div class="progress__inner" style="width: 80%"></div></div><h2 class="margin-top-3">Modal</h2><h3 class="h4">Scss:</h3><pre class="code"><code>$crispy__modal__max-width-breakpoints: (
$crispy__md: 50%
);
$crispy__modal__margin-breakpoints: (
$crispy__md: 0.75em
);
$crispy__modal__z-index: zIndex('modal');</code></pre><h3 class="h4">Html:</h3><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--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><h2 class="margin-top-3">Table</h2><h3 class="h4">Scss:</h3><pre class="code"><code>$crispy__table__padding: $crispy__padding !default;
$crispy__table__padding-breakpoints: $crispy__padding-breakpoints !default;
$crispy__table__td__border: 1px solid $crispy__color-border !default;
$crispy__table__th__border-width: 2px !default;
$crispy__table__color: $crispy__color-text !default;
$crispy__table__striped__background-color: $crispy__color-grey-light !default;</code></pre><h3 class="h4">Html:</h3><pre class="code"><code>&lt;table class=&quot;table table--striped margin-bottom-2&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;name&lt;/th&gt;
&lt;th&gt;age&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Mr. Brown&lt;/td&gt;
&lt;td&gt;43&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Mr. Magenta&lt;/td&gt;
&lt;td&gt;32&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Mr. White&lt;/td&gt;
&lt;td&gt;45&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</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></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html>

+ 1
- 0
dist/examples/core.html View File

@ -0,0 +1 @@
<!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Core | Crispy CSS</title><meta name="description" content=""><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 col-md-4"><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></div><div class="col-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Core</h1></header><h2 class="marginless margin-bottom-1">Normalize</h2><hr class="marginless margin-bottom-2"/><h3 class="h4 margin-top-2">a</h3><a href="#">Link</a><div class="grid"><div class="col-12"><h2 class="marginless margin-top-2 margin-bottom-1">Typography</h2><hr class="marginless margin-bottom-2"/><h3 class="h4 margin-top-2">Heading</h3><div class="h1">Heading h1</div><div class="h2">Heading h2</div><div class="h3">Heading h3</div><div class="h4">Heading h4</div><div class="h5">Heading h5</div><div class="h6">Heading h6</div><h3 class="h4 margin-top-2">abbr</h3><p>Glossier viral occupy mixtape pok pok cornhole, <abbr title="vape affogato hella">vape affogato hella</abbr> knausgaard thundercats</p><h3 class="h4 margin-top-2">blockquote</h3><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><h3 class="h4 margin-top-2">hr</h3><hr><h3 class="h4 margin-top-2">paragraph</h3><p>Glossier viral occupy mixtape pok pok.</p><h3 class="h4 margin-top-2">mark</h3><p>Pug before they <mark>four loko</mark> Deep v bespoke</p><h3 class="h4 margin-top-2">list</h3><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></div></div></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html>

+ 4
- 0
dist/examples/functions.html View File

@ -0,0 +1,4 @@
<!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Functions | Crispy CSS</title><meta name="description" content=""><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 col-md-4"><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></div><div class="col-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Functions</h1></header><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><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></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html>

+ 16
- 0
dist/examples/getstarted.html View File

@ -0,0 +1,16 @@
<!doctype html><html 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=""><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 col-md-4"><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></div><div class="col-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getstarted.html" class="text-color-white">Get Started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Get Started</h1></header><h2>Installation</h2><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__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><h2>Example</h2><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 class="h4">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 class="h4">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></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html>

+ 16
- 0
dist/examples/getting-started.html View File

@ -0,0 +1,16 @@
<!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Getting started! | Crispy CSS</title><meta name="description" content=""><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 col-md-4"><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></div><div class="col-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Getting started!</h1></header><h2 class="margin-bottom-1">Installation</h2><hr class="marginless 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__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><h2>Example</h2><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 class="h4">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 class="h4">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></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html>

+ 1
- 0
dist/examples/helpers.html
File diff suppressed because it is too large
View File


dist/example/img/gaming-circus.jpg → dist/examples/img/gaming-circus.jpg View File


dist/example/img/tentakelfabrik.jpg → dist/examples/img/tentakelfabrik.jpg View File


dist/example/img/trinkkofi.jpg → dist/examples/img/trinkkofi.jpg View File


+ 1
- 0
dist/examples/imprint.html View File

@ -0,0 +1 @@
<!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Imprint | Crispy CSS</title><meta name="description" content=""><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 col-md-4"><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></div><div class="col-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Imprint</h1></header></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html>

+ 1
- 0
dist/examples/index.html View File

@ -0,0 +1 @@
<!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title><meta name="description" content="Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body><header id="header" class="header"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><hgroup><a href="/"><h1 class="h2 margin-top-4 margin-bottom-0"><svg class="icon icon--big margin-bottom-1" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg><br/>Crispy CSS</h1></a><small class="text-color-primary">v3.0.0</small><h2 class="h5 margin-top-1">Lightweight CSS Framework for Building Apps and Websites</h2></hgroup></div></div></div></div></header><div class="container"><div class="grid margin-top-2 margin-bottom-2"><div class="col-12 col-sm-6 col-lg-4 col-align-center"><h3 class="h4 text-center"><span class="h3__icon"><svg class="icon icon-color-primary text-size-medium" alt="Mixins and Functions"><use xlink:href="symbol-defs.svg#icon-emoticon-zip"/></svg></span><div>Ugly</div></h3><p class="text-center">Yes, this Framework has no fancy Layout or shiny Elements, because what created with Crispy CSS could be fancy. This Framework adds basic styles and support your Work.</p></div><div class="col-12 col-sm-6 col-lg-4"><h3 class="h4 text-center"><span class="h3__icon"><svg class="icon icon-color-primary text-size-medium" alt="Customizeable"><use xlink:href="symbol-defs.svg#icon-spray"/></svg></span><div>Helpers</div></h3><p class="text-center">Mixins, Functions and Modifiers make your Workflow simpler. Only import Components you really need and make your Work lightweight.</p></div><div class="col-12 col-sm-6 col-lg-4"><h3 class="h4 text-center"><span class="h3__icon"><svg class="icon icon-color-primary text-size-large" alt="Coding Style"><use xlink:href="symbol-defs.svg#icon-design"/></svg></span><div>Coding Style</div></h3><p class="text-center">Crispy CSS uses <a href="http://getbem.com/" target="_blank">BEM</a>, but an simpler approach of it. BEM is good to show dependencies in Components and add structure to your Styles.</p></div></div><div class="margin-bottom-2 text-center text-size-medium"><a class="button background-color-success text-color-white" href="/getstarted.html">Get started! <svg class="icon margin-left-1" alt="proceed"><use xlink:href="symbol-defs.svg#icon-circle-right"/></svg> </a><a class="button background-color-grey text-color-white" target="_blank" href="https://github.com/tentakelfabrik/crispy-css">Visit on Github <svg class="icon margin-left-1" alt="github"><use xlink:href="symbol-defs.svg#icon-github"/></svg></a></div><div class="margin-bottom-5 margin-top-4"><div class="grid"><div class="col-12"><h2 class="h3 text-center">Apps and Websites that have been crafted</h2></div></div><div class="grid"><div class="col-12 col-sm-6 col-md-4"><h3 class="h5 text-center">Tentakelfabrik</h3><a class="text-center show" href="https://tentakelfabrik.de" target="_blank"><img class="bordered img-responsive width-100" src="img/tentakelfabrik.jpg"/></a></div><div class="col-12 col-sm-6 col-md-4"><h3 class="h5 text-center">Gaming Circus</h3><a class="text-center show" href="https://gaming-circus.de" target="_blank"><img class="bordered img-responsive width-100" src="img/gaming-circus.jpg"/></a></div><div class="col-12 col-sm-6 col-md-4"><h3 class="h5 text-center">Trinkkofi</h3><a class="text-center show" href="https://trinkkofi.de" target="_blank"><img class="bordered img-responsive width-100" src="img/trinkkofi.jpg"/></a></div></div></div></div><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html>

+ 49
- 0
dist/examples/mixins.html View File

@ -0,0 +1,49 @@
<!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Mixins | Crispy CSS</title><meta name="description" content=""><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 col-md-4"><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></div><div class="col-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Mixins</h1></header><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><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>&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;</code></pre><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></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html>

+ 1
- 0
dist/examples/privacy-policy.html View File

@ -0,0 +1 @@
<!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Privacy Policy | Crispy CSS</title><meta name="description" content=""><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 col-md-4"><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></div><div class="col-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Privacy Policy</h1></header></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html>

+ 1
- 0
dist/examples/styles.css
File diff suppressed because it is too large
View File


dist/example/symbol-defs.svg → dist/examples/symbol-defs.svg View File


+ 2
- 2
mix-manifest.json View File

@ -1,7 +1,7 @@
{ {
"/dist/crispy-all.css": "/dist/crispy-all.css", "/dist/crispy-all.css": "/dist/crispy-all.css",
"/dist/crispy-minimal.css": "/dist/crispy-minimal.css", "/dist/crispy-minimal.css": "/dist/crispy-minimal.css",
"/dist/example/styles.css": "/dist/example/styles.css",
"/dist/examples/styles.css": "/dist/examples/styles.css",
"/spritemap.js": "/spritemap.js", "/spritemap.js": "/spritemap.js",
"/dist/example/symbol-defs.svg": "/dist/example/symbol-defs.svg"
"/dist/examples/symbol-defs.svg": "/dist/examples/symbol-defs.svg"
} }

+ 351
- 0
package-lock.json View File

@ -985,6 +985,12 @@
"integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=", "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
"dev": true "dev": true
}, },
"@types/anymatch": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
"integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==",
"dev": true
},
"@types/events": { "@types/events": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz", "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
@ -1002,6 +1008,12 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"@types/html-minifier-terser": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz",
"integrity": "sha512-iYCgjm1dGPRuo12+BStjd1HiVQqhlRhWDOQigNxn023HcjnhsiFz9pc6CzJj4HwDCSQca9bxTL4PxJDbkdm3PA==",
"dev": true
},
"@types/minimatch": { "@types/minimatch": {
"version": "3.0.3", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@ -1020,6 +1032,76 @@
"integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==", "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
"dev": true "dev": true
}, },
"@types/source-list-map": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
"integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
"dev": true
},
"@types/tapable": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.5.tgz",
"integrity": "sha512-/gG2M/Imw7cQFp8PGvz/SwocNrmKFjFsm5Pb8HdbHkZ1K8pmuPzOX4VeVoiEecFCVf4CsN1r3/BRvx+6sNqwtQ==",
"dev": true
},
"@types/uglify-js": {
"version": "3.9.2",
"resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.9.2.tgz",
"integrity": "sha512-d6dIfpPbF+8B7WiCi2ELY7m0w1joD8cRW4ms88Emdb2w062NeEpbNCeWwVCgzLRpVG+5e74VFSg4rgJ2xXjEiQ==",
"dev": true,
"requires": {
"source-map": "^0.6.1"
},
"dependencies": {
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
}
}
},
"@types/webpack": {
"version": "4.41.13",
"resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.13.tgz",
"integrity": "sha512-RYmIHOWSxnTTa765N6jJBVE45pd2SYNblEYshVDduLw6RhocazNmRzE5/ytvBD8IkDMH6DI+bcrqxh8NILimBA==",
"dev": true,
"requires": {
"@types/anymatch": "*",
"@types/node": "*",
"@types/tapable": "*",
"@types/uglify-js": "*",
"@types/webpack-sources": "*",
"source-map": "^0.6.0"
},
"dependencies": {
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
}
}
},
"@types/webpack-sources": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.7.tgz",
"integrity": "sha512-XyaHrJILjK1VHVC4aVlKsdNN5KBTwufMb43cQs+flGxtPAf/1Qwl8+Q0tp5BwEGaI8D6XT1L+9bSWXckgkjTLw==",
"dev": true,
"requires": {
"@types/node": "*",
"@types/source-list-map": "*",
"source-map": "^0.6.1"
},
"dependencies": {
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
}
}
},
"@vue/component-compiler-utils": { "@vue/component-compiler-utils": {
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.1.2.tgz", "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.1.2.tgz",
@ -3175,6 +3257,15 @@
"buffer-indexof": "^1.0.0" "buffer-indexof": "^1.0.0"
} }
}, },
"dom-converter": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
"integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
"dev": true,
"requires": {
"utila": "~0.4"
}
},
"dom-serializer": { "dom-serializer": {
"version": "0.2.2", "version": "0.2.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@ -3205,6 +3296,15 @@
"integrity": "sha1-0EjESzew0Qp/Kj1f7j9DM9eQSB8=", "integrity": "sha1-0EjESzew0Qp/Kj1f7j9DM9eQSB8=",
"dev": true "dev": true
}, },
"domhandler": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
"integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
"dev": true,
"requires": {
"domelementtype": "1"
}
},
"domutils": { "domutils": {
"version": "1.7.0", "version": "1.7.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@ -3215,6 +3315,37 @@
"domelementtype": "1" "domelementtype": "1"
} }
}, },
"dot-case": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.3.tgz",
"integrity": "sha512-7hwEmg6RiSQfm/GwPL4AAWXKy3YNNZA3oFv2Pdiey0mwkRCPZ9x6SZbkLcn8Ma5PYeVokzoD4Twv2n7LKp5WeA==",
"dev": true,
"requires": {
"no-case": "^3.0.3",
"tslib": "^1.10.0"
},
"dependencies": {
"lower-case": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.1.tgz",
"integrity": "sha512-LiWgfDLLb1dwbFQZsSglpRj+1ctGnayXz3Uv0/WO8n558JycT5fg6zkNcnW0G68Nn0aEldTFeEfmjCfmqry/rQ==",
"dev": true,
"requires": {
"tslib": "^1.10.0"
}
},
"no-case": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.3.tgz",
"integrity": "sha512-ehY/mVQCf9BL0gKfsJBvFJen+1V//U+0HQMPrWct40ixE4jnv0bfvxDbWtAHL9EcaPEOJHVVYKoQn1TlZUB8Tw==",
"dev": true,
"requires": {
"lower-case": "^2.0.1",
"tslib": "^1.10.0"
}
}
}
},
"dot-prop": { "dot-prop": {
"version": "5.2.0", "version": "5.2.0",
"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz", "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz",
@ -4492,12 +4623,142 @@
"uglify-js": "3.4.x" "uglify-js": "3.4.x"
} }
}, },
"html-minifier-terser": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
"integrity": "sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==",
"dev": true,
"requires": {
"camel-case": "^4.1.1",
"clean-css": "^4.2.3",
"commander": "^4.1.1",
"he": "^1.2.0",
"param-case": "^3.0.3",
"relateurl": "^0.2.7",
"terser": "^4.6.3"
},
"dependencies": {
"camel-case": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.1.tgz",
"integrity": "sha512-7fa2WcG4fYFkclIvEmxBbTvmibwF2/agfEBc6q3lOpVu0A13ltLsA+Hr/8Hp6kp5f+G7hKi6t8lys6XxP+1K6Q==",
"dev": true,
"requires": {
"pascal-case": "^3.1.1",
"tslib": "^1.10.0"
}
},
"commander": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
"dev": true
},
"param-case": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.3.tgz",
"integrity": "sha512-VWBVyimc1+QrzappRs7waeN2YmoZFCGXWASRYX1/rGHtXqEcrGEIDm+jqIwFa2fRXNgQEwrxaYuIrX0WcAguTA==",
"dev": true,
"requires": {
"dot-case": "^3.0.3",
"tslib": "^1.10.0"
}
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"terser": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/terser/-/terser-4.7.0.tgz",
"integrity": "sha512-Lfb0RiZcjRDXCC3OSHJpEkxJ9Qeqs6mp2v4jf2MHfy8vGERmVDuvjXdd/EnP5Deme5F2yBRBymKmKHCBg2echw==",
"dev": true,
"requires": {
"commander": "^2.20.0",
"source-map": "~0.6.1",
"source-map-support": "~0.5.12"
},
"dependencies": {
"commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true
}
}
}
}
},
"html-webpack-plugin": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.3.0.tgz",
"integrity": "sha512-C0fzKN8yQoVLTelcJxZfJCE+aAvQiY2VUf3UuKrR4a9k5UMWYOtpDLsaXwATbcVCnI05hUS7L9ULQHWLZhyi3w==",
"dev": true,
"requires": {
"@types/html-minifier-terser": "^5.0.0",
"@types/tapable": "^1.0.5",
"@types/webpack": "^4.41.8",
"html-minifier-terser": "^5.0.1",
"loader-utils": "^1.2.3",
"lodash": "^4.17.15",
"pretty-error": "^2.1.1",
"tapable": "^1.1.3",
"util.promisify": "1.0.0"
},
"dependencies": {
"util.promisify": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
"integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
"dev": true,
"requires": {
"define-properties": "^1.1.2",
"object.getownpropertydescriptors": "^2.0.3"
}
}
}
},
"html4-id": { "html4-id": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/html4-id/-/html4-id-1.0.0.tgz", "resolved": "https://registry.npmjs.org/html4-id/-/html4-id-1.0.0.tgz",
"integrity": "sha1-uS9lInlVRoHNL24W0n6q9nwCmL8=", "integrity": "sha1-uS9lInlVRoHNL24W0n6q9nwCmL8=",
"dev": true "dev": true
}, },
"htmlparser2": {
"version": "3.10.1",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
"integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
"dev": true,
"requires": {
"domelementtype": "^1.3.1",
"domhandler": "^2.3.0",
"domutils": "^1.5.1",
"entities": "^1.1.1",
"inherits": "^2.0.1",
"readable-stream": "^3.1.1"
},
"dependencies": {
"entities": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
"dev": true
},
"readable-stream": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
"dev": true,
"requires": {
"inherits": "^2.0.3",
"string_decoder": "^1.1.1",
"util-deprecate": "^1.0.1"
}
}
}
},
"http-deceiver": { "http-deceiver": {
"version": "1.2.7", "version": "1.2.7",
"resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz", "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@ -6189,6 +6450,37 @@
"integrity": "sha1-naGee+6NEt/wUT7Vt2lXeTvC6NQ=", "integrity": "sha1-naGee+6NEt/wUT7Vt2lXeTvC6NQ=",
"dev": true "dev": true
}, },
"pascal-case": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.1.tgz",
"integrity": "sha512-XIeHKqIrsquVTQL2crjq3NfJUxmdLasn3TYOU0VBM+UX2a6ztAWBlJQBePLGY7VHW8+2dRadeIPK5+KImwTxQA==",
"dev": true,
"requires": {
"no-case": "^3.0.3",
"tslib": "^1.10.0"
},
"dependencies": {
"lower-case": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.1.tgz",
"integrity": "sha512-LiWgfDLLb1dwbFQZsSglpRj+1ctGnayXz3Uv0/WO8n558JycT5fg6zkNcnW0G68Nn0aEldTFeEfmjCfmqry/rQ==",
"dev": true,
"requires": {
"tslib": "^1.10.0"
}
},
"no-case": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.3.tgz",
"integrity": "sha512-ehY/mVQCf9BL0gKfsJBvFJen+1V//U+0HQMPrWct40ixE4jnv0bfvxDbWtAHL9EcaPEOJHVVYKoQn1TlZUB8Tw==",
"dev": true,
"requires": {
"lower-case": "^2.0.1",
"tslib": "^1.10.0"
}
}
}
},
"pascalcase": { "pascalcase": {
"version": "0.1.1", "version": "0.1.1",
"resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz", "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
@ -7087,6 +7379,16 @@
"dev": true, "dev": true,
"optional": true "optional": true
}, },
"pretty-error": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz",
"integrity": "sha1-X0+HyPkeWuPzuoerTPXgOxoX8aM=",
"dev": true,
"requires": {
"renderkid": "^2.0.1",
"utila": "~0.4"
}
},
"private": { "private": {
"version": "0.1.8", "version": "0.1.8",
"resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@ -7418,6 +7720,49 @@
"integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=", "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
"dev": true "dev": true
}, },
"renderkid": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.3.tgz",
"integrity": "sha512-z8CLQp7EZBPCwCnncgf9C4XAi3WR0dv+uWu/PjIyhhAb5d6IJ/QZqlHFprHeKT+59//V6BNUsLbvN8+2LarxGA==",
"dev": true,
"requires": {
"css-select": "^1.1.0",
"dom-converter": "^0.2",
"htmlparser2": "^3.3.0",
"strip-ansi": "^3.0.0",
"utila": "^0.4.0"
},
"dependencies": {
"css-select": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
"integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
"dev": true,
"requires": {
"boolbase": "~1.0.0",
"css-what": "2.1",
"domutils": "1.5.1",
"nth-check": "~1.0.1"
}
},
"css-what": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
"integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
"dev": true
},
"domutils": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
"integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
"dev": true,
"requires": {
"dom-serializer": "0",
"domelementtype": "1"
}
}
}
},
"repeat-element": { "repeat-element": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz", "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz",
@ -9109,6 +9454,12 @@
"object.getownpropertydescriptors": "^2.1.0" "object.getownpropertydescriptors": "^2.1.0"
} }
}, },
"utila": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
"integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
"dev": true
},
"utils-merge": { "utils-merge": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",


+ 1
- 0
package.json View File

@ -19,6 +19,7 @@
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"cross-env": "^5.2.1", "cross-env": "^5.2.1",
"html-webpack-plugin": "^4.3.0",
"laravel-mix": "^5.0.4", "laravel-mix": "^5.0.4",
"postcss-css-variables": "^0.11.0", "postcss-css-variables": "^0.11.0",
"resolve-url-loader": "^3.1.1", "resolve-url-loader": "^3.1.1",


+ 16
- 311
src/_core.scss View File

@ -1,12 +1,6 @@
/** /**
* core * core
* *
* - normalize
* - typograhy
* - links
* - fonts
*
* Thanks to https://necolas.github.io/normalize.css/, use a lot from them
* *
* @author Björn Hase, Tentakelfabrik * @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License * @license http://opensource.org/licenses/MIT The MIT License
@ -16,84 +10,17 @@
@import @import
'functions', 'functions',
'mixins';
@mixin crispy__core() {
html {
font-size: 100%;
line-height: 1.15; // Correct the line height in all browsers.
-webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS.
}
body,
html {
margin: 0;
height: 100%;
}
html,
legend {
box-sizing: border-box;
}
main {
display: block; // Render the `main` element consistently in IE.
}
*,
*::after,
*::before {
box-sizing: inherit;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
// paragraphs
p {
margin: $crispy__margin;
}
// Semantic text elements
a,
ins,
u {
text-decoration-skip: ink edges;
}
// Add the correct font weight in Chrome, Edge, and Safari.
b,
strong {
font-weight: bolder;
}
'mixins',
// Add the correct font size in all browsers.
small {
font-size: 80%;
}
'core/normalize',
'core/heading',
'core/typography';
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
@include crispy__core__normalize();
@include crispy__core__heading();
@include crispy__core__typography();
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
@mixin crispy__core() {
a { a {
color: $crispy__color-link; color: $crispy__color-link;
@ -107,247 +34,25 @@
} }
} }
abbr[title] {
border-bottom: 1px dotted;
cursor: help;
text-decoration: none;
}
mark {
padding: 0.25em;
}
// blockquote
blockquote {
border-left: $crispy__border;
margin-left: 0;
padding: $crispy__padding;
p:last-child {
margin-bottom: 0;
}
}
/**
* lists
*
*/
dl,
ol,
ul {
padding: 0;
margin: $crispy__margin;
}
ol,
ul {
margin-left: 1.5em;
}
ol ol,
ul ul {
margin-top: 0;
margin-left: 1em;
}
ol {
list-style: decimal outside;
}
ul {
list-style: disc outside;
}
dl {
margin-left: 0.5em;
}
dd,
dt {
margin: 0;
}
dt {
font-weight: bold;
}
// media
figure {
margin: $crispy__margin;
}
figcaption {
margin: 0.3em 0 0;
}
/**
* form elements
*
*
*/
// Remove the margin in Firefox and Safari.
button,
input,
optgroup,
select,
textarea {
margin: 0;
}
// Remove the inheritance of text transform in Firefox
button,
select {
text-transform: none;
}
// Correct the inability to style clickable types in iOS and Safari.
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
// Remove the inner border and padding in Firefox.
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
// Restore the focus styles unset by the previous rule.
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
// Correct the padding in Firefox.
fieldset {
padding: 0.35em 0.75em 0.625em;
}
// divider
hr {
box-sizing: content-box; // Add the correct box sizing in Firefox.
height: 0; // Add the correct box sizing in Firefox.
overflow: visible; // Show the overflow in Edge and IE.
border: 0;
border-top: 1px solid $crispy__color-secondary;
margin: 0.3em 0;
}
code,
pre,
kbd,
samp {
font-family: $crispy__font-family-monospace;
// responsive for font-size
font-size: $crispy__font-size-xxs;
@include crispy__media-md() {
font-size: $crispy__font-size-md;
}
}
/**
* Heading
*
*
*/
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: $crispy__heading__font-family;
font-weight: $crispy__heading__font-weight;
line-height: 1.2;
margin: $crispy__heading__margin;
}
h5 {
line-height: 1.4;
}
h6 {
line-height: $crispy__line-height;
}
@each $h, $font-size in $crispy__heading__font-sizes {
#{$h}, .#{$h} {
font-size: $font-size * $crispy__xxs__multiplicator;
// responsive for font-size
@include crispy__media-md() {
font-size: $font-size;
}
@include crispy__media-xlg() {
font-size: $font-size * $crispy__xlg__multiplicator;
}
}
}
/** /**
* body
* *
* *
* *
*/
body,
button,
input,
optgroup,
select,
textarea {
font-family: $crispy__font-family-primary;
font-weight: $crispy__font-weight;
}
button,
input,
optgroup,
select,
textarea {
font-size: 0.9em;
line-height: 1.4;
}
/**
* body
* line-height and breakpoints
* font-size and breakpoints
* *
*/ */
body { body {
font-family: $crispy__font-family;
color: $crispy__color-text; color: $crispy__color-text;
background-color: $crispy__color-background; background-color: $crispy__color-background;
direction: $crispy__direction; direction: $crispy__direction;
// responsive for font-size
font-size: $crispy__font-size-xxs;
font-size: $crispy__font-size;
@include crispy__media__breakpoints('line-height', $crispy__line-height__breakpoints);
@include crispy__media-md() {
font-size: $crispy__font-size-md;
}
@include crispy__media-xlg() {
font-size: $crispy__font-size-xlg;
}
// responsive for line-height
line-height: $crispy__line-height-xxs;
@include crispy__media-md() {
line-height: $crispy__line-height-md;
}
line-height: $crispy__line-height;
@include crispy__media__breakpoints('font-size', $crispy__font-size__breakpoints);
} }
} }

+ 42
- 9
src/_functions.scss View File

@ -1,15 +1,14 @@
/** /**
* functions
* functions
* *
* *
*
*
* @author Björn Hase
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
* *
*/ */
/** /**
* strip unit from value * strip unit from value
* *
@ -20,12 +19,46 @@
@return $value / ($value * 0 + 1); @return $value / ($value * 0 + 1);
} }
/**
* factor
*
*
*
* @param {integer} $x
* @return {float}
*
*/
@function factor($x) {
@return ($x * $x) / 2;
}
/**
* get value of key "default" in map
*
* @param {map} $value
* @return {boolean|unit}
*
*/
@function getDefault($values) {
$default: false;
@if map-has-key($values, 'default') {
$default: map-get($values, 'default');
}
@return $default;
}
/** /**
* function: z-index
* z-index
* *
* uses map $crispy__z-index to get value by key
* uses map $crispy__z-index to get value by key
* *
* @author Björn Hase
* @param {string} $value
* @return {null|unit}
* *
*/ */


src/_modifiers.scss → src/_helpers.scss View File

@ -1,24 +1,30 @@
/** /**
* modifiers
* *
* *
* @author Björn Hase
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
* *
*/ */
// spacing // spacing
$crispy__modifiers__spacing: 0.75rem !default;
$crispy__modifiers__spacing__steps: 6 !default;
$crispy__helpers__spacing-gap: 8px !default;
$crispy__helpers__spacing-steps: 6 !default;
$crispy__helpers__spacing-max-steps: 3 !default;
$crispy__helpers__spacing-breakpoints: (
$crispy__md: 12px
) !default;
// width // width
$crispy__modifiers__width: (
$crispy__helpers__width: (
'25' : 25%, '25' : 25%,
'50' : 50%, '50' : 50%,
'75' : 75%, '75' : 75%,
'100': 100% '100': 100%
) !default; ) !default;
@mixin crispy__modifiers() {
@mixin crispy__helpers() {
/** /**
* typography * typography
@ -82,17 +88,13 @@ $crispy__modifiers__width: (
font-weight: bolder !important; font-weight: bolder !important;
} }
// getting default
$defaultFontSize: getDefault($crispy__font-sizes);
@each $name, $font-size in $crispy__font-sizes { @each $name, $font-size in $crispy__font-sizes {
.text-size-#{$name} { .text-size-#{$name} {
font-size: ($font-size * $crispy__xxs__multiplicator) !important;
@include crispy__media-md() {
font-size: $font-size !important;
}
@include crispy__media-xlg() {
font-size: ($font-size * $crispy__xlg__multiplicator) !important;
}
font-size: $font-size !important;
@include crispy__media__breakpoints__diff($crispy__font-size__breakpoints, $font-size, $defaultFontSize);
} }
} }
@ -135,6 +137,12 @@ $crispy__modifiers__width: (
} }
} }
@each $name, $color in $crispy__colors {
.border-color-#{$name} {
border-color: $color !important;
}
}
@each $name, $color in $crispy__colors { @each $name, $color in $crispy__colors {
.background-color-#{$name} { .background-color-#{$name} {
background-color: $color !important; background-color: $color !important;
@ -159,6 +167,7 @@ $crispy__modifiers__width: (
position: relative !important; position: relative !important;
} }
/** /**
* hide & show * hide & show
* *
@ -291,6 +300,10 @@ $crispy__modifiers__width: (
} }
.rounded { .rounded {
border-radius: $crispy__border-radius !important;
}
.round {
border-radius: 50% !important; border-radius: 50% !important;
} }
@ -308,12 +321,13 @@ $crispy__modifiers__width: (
* *
*/ */
@each $name, $width in $crispy__modifiers__width {
@each $name, $width in $crispy__helpers__width {
.width-#{$name} { .width-#{$name} {
width: $width !important; width: $width !important;
} }
} }
/** /**
* margin & padding * margin & padding
* *
@ -328,54 +342,71 @@ $crispy__modifiers__width: (
padding: 0 !important; padding: 0 !important;
} }
@for $i from 0 through ($crispy__modifiers__spacing__steps / 2) {
.margin-left-#{$i} {
margin-left: ($crispy__modifiers__spacing * $i * 0.5) !important;
}
@for $i from 0 through $crispy__helpers__spacing-steps {
.margin-top-#{$i} {
margin-top: ($crispy__helpers__spacing-gap * factor($i)) !important;
.margin-right-#{$i} {
margin-right: ($crispy__modifiers__spacing * $i * 0.5) !important;
@if $i > 0 {
@include crispy__media__breakpoints_calculate('margin-top', factor($i), $crispy__helpers__spacing-breakpoints);
}
} }
.padding-left-#{$i} {
padding-left: ($crispy__modifiers__spacing * $i * 0.5) !important;
}
.margin-bottom-#{$i} {
margin-bottom: ($crispy__helpers__spacing-gap * factor($i)) !important;
.padding-right-#{$i} {
padding-right: ($crispy__modifiers__spacing * $i * 0.5) !important;
@if $i > 0 {
@include crispy__media__breakpoints_calculate('margin-bottom', factor($i), $crispy__helpers__spacing-breakpoints);
}
} }
}
@for $i from 0 through $crispy__modifiers__spacing__steps {
.margin-top-#{$i} {
margin-top: ($crispy__modifiers__spacing * $i * 0.5) !important;
.padding-top-#{$i} {
padding-top: ($crispy__helpers__spacing-gap * $i) !important;
@include crispy__media-md() {
margin-top: ($crispy__modifiers__spacing * $i) !important;
@if $i > 0 {
@include crispy__media__breakpoints_calculate('padding-top', factor($i), $crispy__helpers__spacing-breakpoints);
} }
} }
.margin-bottom-#{$i} {
margin-bottom: ($crispy__modifiers__spacing * $i * 0.5) !important;
.padding-bottom-#{$i} {
padding-bottom: ($crispy__helpers__spacing-gap * $i) !important;
@include crispy__media-md() {
margin-bottom: ($crispy__modifiers__spacing * $i) !important;
@if $i > 0 {
@include crispy__media__breakpoints_calculate('padding-bottom', factor($i), $crispy__helpers__spacing-breakpoints);
} }
} }
.padding-top-#{$i} {
padding-top: ($crispy__modifiers__spacing * $i * 0.5) !important;
// to reduce size of css only use max steps
@if $i < $crispy__helpers__spacing-max-steps {
.margin-left-#{$i} {
margin-left: ($crispy__helpers__spacing-gap * $i) !important;
@include crispy__media-md() {
padding-top: ($crispy__modifiers__spacing * $i) !important;
@if $i > 0 {
@include crispy__media__breakpoints_calculate('margin-left', factor($i), $crispy__helpers__spacing-breakpoints);
}
} }
}
.padding-bottom-#{$i} {
padding-bottom: ($crispy__modifiers__spacing * $i * 0.5) !important;
.margin-right-#{$i} {
margin-right: ($crispy__helpers__spacing-gap * $i) !important;
@include crispy__media-md() {
padding-bottom: ($crispy__modifiers__spacing * $i) !important;
@if $i > 0 {
@include crispy__media__breakpoints_calculate('margin-right', factor($i), $crispy__helpers__spacing-breakpoints);
}
}
.padding-left-#{$i} {
padding-left: ($crispy__helpers__spacing-gap * $i) !important;
@if $i > 0 {
@include crispy__media__breakpoints_calculate('padding-left', factor($i), $crispy__helpers__spacing-breakpoints);
}
}
.padding-right-#{$i} {
padding-right: ($crispy__helpers__spacing-gap * $i) !important;
@if $i > 0 {
@include crispy__media__breakpoints_calculate('padding-right', factor($i), $crispy__helpers__spacing-breakpoints);
}
} }
} }
} }

+ 58
- 0
src/_mixins.scss View File

@ -124,6 +124,64 @@
} }
} }
/**
*
* @param {[type]} $property [description]
* @param {[type]} $breakpoints [description]
*
* @return {[type]} [description]
*
*/
@mixin crispy__media__breakpoints($property, $breakpoints) {
@each $breakpoint, $value in $breakpoints {
@media only screen and (min-width: $breakpoint) {
#{$property}: $value;
}
}
}
/**
*
* @param {[type]} $property [description]
* @param {[type]} $factor [description]
* @param {[type]} $breakpoints [description]
*
* @return {[type]} [description]
*/
@mixin crispy__media__breakpoints_calculate($property, $factor, $breakpoints) {
@each $breakpoint, $value in $breakpoints {
@media only screen and (min-width: $breakpoint) {
#{$property}: ($value * $factor) !important;
}
}
}
/**
*
*
* @param {[type]} $breakpoints [des
* @param {[type]} $font-sizes [description]
* @param {[type]} $font-size [description]
*
* @return {[type]} [description]
*
*/
@mixin crispy__media__breakpoints__diff($breakpoints, $font-size, $default) {
@each $breakpoint, $value in $breakpoints {
// getting diff
$factor: (stripUnit($font-size) - stripUnit($default)) + 1;
// ignore if factor is zero
@if $factor > 0 {
@media only screen and (min-width: $breakpoint) {
font-size: $value * $factor;
}
}
}
}
/** /**
* triangle * triangle


+ 0
- 341
src/_normalize.scss View File

@ -1,341 +0,0 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Modifized
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

+ 51
- 23
src/_variables.scss View File

@ -14,25 +14,40 @@
$crispy__golden-ratio: 1.618 !default; $crispy__golden-ratio: 1.618 !default;
// fonts
$crispy__xxs__multiplicator: 0.9;
$crispy__xlg__multiplicator: 1.1;
$crispy__font-size: 1rem !default;
$crispy__font-size-xxs: $crispy__font-size * $crispy__xxs__multiplicator !default;
$crispy__font-size-md: $crispy__font-size !default;
$crispy__font-size-xlg: $crispy__font-size * $crispy__xlg__multiplicator !default;
/**
* Breakpoints
*
*/
$crispy__font-weight: normal !default;
$crispy__xs : 576px !default;
$crispy__sm : 768px !default;
$crispy__md : 992px !default;
$crispy__lg : 1200px !default;
$crispy__xlg: 1600px !default;
$crispy__line-height: $crispy__golden-ratio !default;
$crispy__line-height-xxs: 1.4 !default;
$crispy__line-height-md: $crispy__golden-ratio !default;
$crispy__font-family-primary: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
$crispy__font-family-monospace: "Lucida Console", Monaco, monospace !default;
/**
* Font Size
*
*/
$crispy__direction: ltr !default; $crispy__direction: ltr !default;
$crispy__font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
$crispy__font-weight: normal !default;
$crispy__font-size: 0.9rem !default;
$crispy__font-size__breakpoints: (
$crispy__md: 1rem
) !default;
$crispy__font-family-monospace: "Lucida Console", Monaco, monospace !default;
$crispy__font-weight-monospace: normal !default;
$crispy__font-size-monospace: 1rem !default;
$crispy__font-size-monospace__breakpoints: (
$crispy__md: 1.1rem
) !default;
$crispy__font-sizes: ( $crispy__font-sizes: (
'default' : $crispy__font-size, 'default' : $crispy__font-size,
'small' : $crispy__font-size * 0.75, 'small' : $crispy__font-size * 0.75,
@ -42,7 +57,18 @@ $crispy__font-sizes: (
'mega' : $crispy__font-size * 2, 'mega' : $crispy__font-size * 2,
) !default; ) !default;
// colors
$crispy__line-height: 1.4;
$crispy__line-height__breakpoints: (
$crispy__md: $crispy__golden-ratio
) !default;
/**
* colors
*
*
*/
$crispy__color-primary: #f18f01 !default; $crispy__color-primary: #f18f01 !default;
$crispy__color-secondary: #b3b2af !default; $crispy__color-secondary: #b3b2af !default;
$crispy__color-success: #5cb85c !default; $crispy__color-success: #5cb85c !default;
@ -81,12 +107,17 @@ $crispy__colors: (
'white' : $crispy__color-white 'white' : $crispy__color-white
) !default; ) !default;
/** /**
* Padding & Margin * Padding & Margin
* *
*/ */
$crispy__margin: 0 0 1rem !default; $crispy__margin: 0 0 1rem !default;
$crispy__padding: 0.8em 1.2em !default;
$crispy__padding: 0.3em 0.45em !default;
$crispy__padding-breakpoints: (
$crispy__md: .6em 0.9em
) !default;
/** /**
@ -103,6 +134,10 @@ $crispy__heading__font-sizes: (
'h6': $crispy__font-size 'h6': $crispy__font-size
) !default; ) !default;
$crispy__heading__font-sizes__breakpoints: (
$crispy__md: 1.2rem
) !default;
$crispy__heading__font-weight: bold !default; $crispy__heading__font-weight: bold !default;
$crispy__heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default; $crispy__heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
$crispy__heading__margin: 0 0 0.3em !default; $crispy__heading__margin: 0 0 0.3em !default;
@ -118,17 +153,10 @@ $crispy__border: 1px solid $crispy__color-border !default;
/** /**
* Breakpoints
*
* *
*/ */
$crispy__xs : 576px !default;
$crispy__sm : 768px !default;
$crispy__md : 992px !default;
$crispy__lg : 1200px !default;
$crispy__xlg: 1600px !default;
// z-index
$crispy__z-index: ( $crispy__z-index: (
'overlay': 90, 'overlay': 90,
'modal' : 100 'modal' : 100

+ 19
- 2
src/components/_button.scss View File

@ -11,7 +11,16 @@
* *
*/ */
$crispy__button__padding: 0.5em 1.2em 0.6em !default;
$crispy__button__font-family: $crispy__font-family !default;
$crispy__button__font-weight: $crispy__font-weight !default;
$crispy__button__font-size: $crispy__font-size !default;
$crispy__button__font-size-breakpoints: $crispy__font-size__breakpoints !default;
$crispy__button__padding: 0.3em 0.8em !default;
$crispy__button__padding-breakpoints: (
$crispy__md: 0.4em 1.2em
) !default;
$crispy__button__margin: $crispy__margin !default; $crispy__button__margin: $crispy__margin !default;
@mixin crispy__button() { @mixin crispy__button() {
@ -21,9 +30,17 @@ $crispy__button__margin: $crispy__margin !default;
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
padding: $crispy__button__padding;
font-family: $crispy__button__font-family;
font-weight: $crispy__button__font-weight;
font-size: $crispy__button__font-size;
@include crispy__media__breakpoints('font-size', $crispy__button__font-size-breakpoints);
margin: $crispy__button__margin; margin: $crispy__button__margin;
padding: $crispy__button__padding;
@include crispy__media__breakpoints('padding', $crispy__button__padding-breakpoints);
&:hover { &:hover {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;


+ 5
- 2
src/components/_code.scss View File

@ -1,5 +1,5 @@
/** /**
* component: code
* components: code
* *
* <pre class="code"> * <pre class="code">
* <code> * <code>
@ -14,6 +14,7 @@
*/ */
$crispy__code__padding: $crispy__padding !default; $crispy__code__padding: $crispy__padding !default;
$crispy__code__padding-breakpoints: $crispy__padding-breakpoints !default;
$crispy__code__margin: $crispy__margin !default; $crispy__code__margin: $crispy__margin !default;
$crispy__code__border: $crispy__border !default; $crispy__code__border: $crispy__border !default;
$crispy__code__background-color: $crispy__color-grey-light !default; $crispy__code__background-color: $crispy__color-grey-light !default;
@ -25,10 +26,12 @@ $crispy__code__background-color: $crispy__color-grey-light !default;
overflow-y: hidden; overflow-y: hidden;
overflow-x: auto; overflow-x: auto;
padding: $crispy__code__padding;
border: $crispy__code__border; border: $crispy__code__border;
background-color: $crispy__code__background-color; background-color: $crispy__code__background-color;
margin: $crispy__code__margin; margin: $crispy__code__margin;
padding: $crispy__code__padding;
@include crispy__media__breakpoints('padding', $crispy__code__padding-breakpoints);
} }
} }

+ 9
- 5
src/components/_field.scss View File

@ -26,7 +26,6 @@ $crispy__field__border-color--error: $crispy__color-danger !default;
$crispy__field__choice__checked__color: $crispy__color-success !default; $crispy__field__choice__checked__color: $crispy__color-success !default;
$crispy__field__choice__unchecked__color: $crispy__color-danger !default; $crispy__field__choice__unchecked__color: $crispy__color-danger !default;
$crispy__field__input__font-size: $crispy__font-size !default;
$crispy__field__input__padding: 0.4em 0.6em !default; $crispy__field__input__padding: 0.4em 0.6em !default;
$crispy__field__input__color: $crispy__color-text !default; $crispy__field__input__color: $crispy__color-text !default;
@ -41,17 +40,22 @@ $crispy__field__select__border: $crispy__border !default;
margin: $crispy__field__margin; margin: $crispy__field__margin;
} }
.field__text, .field__select, .field__select, .field__label {
font-family: $crispy__font-family;
font-weight: $crispy__font-weight;
font-size: $crispy__font-size;
@include crispy__media__breakpoints('font-size', $crispy__font-size__breakpoints);
}
// basic style for input elements, will be used to @extend // basic style for input elements, will be used to @extend
.field__text, .field__select, .field__select { .field__text, .field__select, .field__select {
display: block; display: block;
width: 100%; width: 100%;
line-height: $crispy__golden-ratio;
padding: $crispy__field__input__padding; padding: $crispy__field__input__padding;
color: $crispy__field__input__color; color: $crispy__field__input__color;
appearance: none; appearance: none;
font-size: $crispy__field__input__font-size;
font-family: $crispy__font-family-primary;
} }
/** /**


+ 16
- 7
src/components/_group.scss View File

@ -1,5 +1,5 @@
/** /**
* component: group
* components: group
* *
* <nav> * <nav>
* <ul class="group group--horizontal"> * <ul class="group group--horizontal">
@ -13,23 +13,32 @@
* *
*/ */
$crispy__group__margin: 0.3em !default;
$crispy__group__character: '/' !default; $crispy__group__character: '/' !default;
$crispy__group__character__margin: 0 0.3em 0 !default;
$crispy__group__character-margin: 0 $crispy__group__margin 0 !default;
@mixin crispy__group() { @mixin crispy__group() {
.group { .group {
@include crispy__clear_list(); @include crispy__clear_list();
display: inline-block;
&--horizontal {
.group__item {
display: inline-block;
.group__item {
display: inline-block;
margin: 0 $crispy__group__margin 0 0;
&:last-child {
&:after {
margin: 0;
}
} }
} }
&--separate {
&--hr {
.group__item { .group__item {
margin: 0;
&:after { &:after {
margin: $crispy__group__character__margin;
margin: $crispy__group__character-margin;
content: $crispy__group__character; content: $crispy__group__character;
} }


+ 3
- 15
src/components/_icon.scss View File

@ -1,5 +1,5 @@
/** /**
* component: icon
* components: icon
* *
* <svg class="icon"> * <svg class="icon">
* // * //
@ -11,8 +11,7 @@
* *
*/ */
$crispy__icon__size: 1.1em !default;
$crispy__icon__offset: -0.2em !default;
$crispy__icon__size: 1.15em !default;
@mixin crispy__icon { @mixin crispy__icon {
.icon { .icon {
@ -25,18 +24,7 @@ $crispy__icon__offset: -0.2em !default;
vertical-align: middle; vertical-align: middle;
overflow: hidden; overflow: hidden;
line-height: $crispy__line-height-xxs;
@include crispy__media-md() {
line-height: $crispy__line-height-md;
}
}
// workaround for buttons
.button {
.icon {
margin: $crispy__icon__offset 0 0;
}
line-height: $crispy__line-height;
} }
@each $name, $color in $crispy__colors { @each $name, $color in $crispy__colors {


+ 12
- 5
src/components/_modal.scss View File

@ -13,9 +13,14 @@
* *
*/ */
$crispy__modal__margin: 1em !default;
$crispy__modal__max-width: 50% !default; // @TODO add responsive
$crispy__modal__margin: 0.75em !default;
$crispy__modal__max-width-breakpoints: (
$crispy__md: 50%
) !default;
$crispy__modal__margin-breakpoints: (
$crispy__md: 0.75em
) !default;
$crispy__modal__z-index: zIndex('modal') !default; $crispy__modal__z-index: zIndex('modal') !default;
@mixin crispy__modal { @mixin crispy__modal {
@ -24,13 +29,15 @@ $crispy__modal__z-index: zIndex('modal') !default;
z-index: $crispy__modal__z-index; z-index: $crispy__modal__z-index;
width: 100%; width: 100%;
max-width: $crispy__modal__max-width;
margin: 0; margin: 0;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
// make sure that on smartphones modal uses full width
@include crispy__media__breakpoints('max-width', $crispy__modal__max-width-breakpoints);
&--fixed { &--fixed {
position: fixed; position: fixed;
} }
@ -52,8 +59,8 @@ $crispy__modal__z-index: zIndex('modal') !default;
&--top-center, &--top-center,
&--center-right, &--center-right,
&--center-left { &--center-left {
margin: $crispy__modal__margin;
transform: translate(0, 0); transform: translate(0, 0);
@include crispy__media__breakpoints('margin', $crispy__modal__margin-breakpoints);
} }
&--bottom-left, &--bottom-right, &--bottom-center { &--bottom-left, &--bottom-right, &--bottom-center {


+ 4
- 2
src/components/_panel.scss View File

@ -13,7 +13,8 @@
* *
*/ */
$crispy__panel__padding: $crispy__padding !default;
$crispy__panel__inner-padding: $crispy__padding !default;
$crispy__panel__inner-padding-breakpoints: $crispy__padding-breakpoints !default;
$crispy__panel__background-color: $crispy__color-grey-light !default; $crispy__panel__background-color: $crispy__color-grey-light !default;
@mixin crispy__panel { @mixin crispy__panel {
@ -21,7 +22,8 @@ $crispy__panel__background-color: $crispy__color-grey-light !default;
background-color: $crispy__panel__background-color; background-color: $crispy__panel__background-color;
&__inner { &__inner {
padding: $crispy__panel__padding;
padding: $crispy__panel__inner-padding;
@include crispy__media__breakpoints('padding', $crispy__panel__inner-padding-breakpoints);
} }
} }
} }

+ 3
- 3
src/components/_progress.scss View File

@ -15,12 +15,12 @@
$crispy__progress__height: 30px !default; $crispy__progress__height: 30px !default;
$crispy__progress__background-color: $crispy__color-primary !default; $crispy__progress__background-color: $crispy__color-primary !default;
$crispy__progress__border__width: 1px !default;
$crispy__progress__border__color: $crispy__color-border !default;
$crispy__progress__border-width: 1px !default;
$crispy__progress__border-color: $crispy__color-border !default;
@mixin crispy__progress { @mixin crispy__progress {
.progress { .progress {
border: $crispy__progress__border__width solid $crispy__progress__border__color;
border: $crispy__progress__border-width solid $crispy__progress__border-color;
&__inner { &__inner {
height: $crispy__progress__height; height: $crispy__progress__height;


+ 4
- 1
src/components/_table.scss View File

@ -23,6 +23,7 @@
*/ */
$crispy__table__padding: $crispy__padding !default; $crispy__table__padding: $crispy__padding !default;
$crispy__table__padding-breakpoints: $crispy__padding-breakpoints !default;
$crispy__table__td__border: 1px solid $crispy__color-border !default; $crispy__table__td__border: 1px solid $crispy__color-border !default;
$crispy__table__th__border-width: 2px !default; $crispy__table__th__border-width: 2px !default;
@ -52,9 +53,11 @@ $crispy__table__striped__background-color: $crispy__color-grey-light !default;
td, td,
th { th {
padding: $crispy__table__padding;
text-align: left; text-align: left;
border-bottom: $crispy__table__td__border; border-bottom: $crispy__table__td__border;
padding: $crispy__table__padding;
@include crispy__media__breakpoints('padding', $crispy__table__padding-breakpoints);
} }
th { th {


+ 35
- 0
src/core/_heading.scss View File

@ -0,0 +1,35 @@
/**
* Heading
*
*
*/
@mixin crispy__core__heading()
{
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: $crispy__heading__font-family;
font-weight: $crispy__heading__font-weight;
line-height: 1.2;
margin: $crispy__heading__margin;
}
h5 {
line-height: 1.4;
}
h6 {
line-height: $crispy__line-height;
}
@each $h, $font-size in $crispy__heading__font-sizes {
#{$h}, .#{$h} {
font-size: $font-size;
@include crispy__media__breakpoints__diff($crispy__heading__font-sizes__breakpoints, $font-size, $crispy__font-size);
}
}
}

+ 190
- 0
src/core/_normalize.scss View File

@ -0,0 +1,190 @@
/**
* normalize
*
* Thanks to https://necolas.github.io/normalize.css/, use a lot from them
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
@mixin crispy__core__normalize()
{
html {
font-size: 100%;
line-height: 1.15; // Correct the line height in all browsers.
-webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS.
}
body,
html {
margin: 0;
height: 100%;
}
html,
legend {
box-sizing: border-box;
}
main {
display: block; // Render the `main` element consistently in IE.
}
*,
*::after,
*::before {
box-sizing: inherit;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
figure {
margin: $crispy__margin;
}
figcaption {
margin: 0.3em 0 0;
}
/**
* form elements
*
*
*/
// Remove the margin in Firefox and Safari.
button,
input,
optgroup,
select,
textarea {
margin: 0;
}
button,
label,
input,
optgroup,
select,
textarea {
font-family: $crispy__font-family;
font-weight: $crispy__font-weight;
font-size: $crispy__font-size;
@include crispy__media__breakpoints('font-size', $crispy__font-size__breakpoints);
line-height: $crispy__line-height;
@include crispy__media__breakpoints('line-height', $crispy__line-height__breakpoints);
}
fieldset {
padding: $crispy__padding;
}
// Remove the inheritance of text transform in Firefox
button,
select {
text-transform: none;
}
// Correct the inability to style clickable types in iOS and Safari.
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
// Remove the inner border and padding in Firefox.
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
// Restore the focus styles unset by the previous rule.
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
legend {
box-sizing: border-box; //Correct the text wrapping in Edge and IE.
display: table; // Correct the text wrapping in Edge and IE.
max-width: 100%; // Correct the text wrapping in Edge and IE.
padding: 0; // Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
white-space: normal; // Correct the text wrapping in Edge and IE.
}
// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield; // Correct the odd appearance in Chrome and Safari.
outline-offset: -2px; // Correct the outline style in Safari.
}
// Remove the inner padding in Chrome and Safari on macOS.
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button; // Correct the inability to style clickable types in iOS and Safari.
font: inherit; // Change font properties to `inherit` in Safari.
}
/**
* hr
*
*/
hr {
box-sizing: content-box; // Add the correct box sizing in Firefox.
height: 0; // Add the correct box sizing in Firefox.
overflow: visible; // Show the overflow in Edge and IE.
border: 0;
border-top: 1px solid $crispy__color-secondary;
margin: 0.3em 0;
}
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
progress {
vertical-align: baseline;
}
// Add the correct display in Firefox.
details {
display: block;
}
// Add the correct display in all browsers.
summary {
display: list-item;
}
code,
pre,
kbd,
samp {
font-family: $crispy__font-family-monospace;
font-size: $crispy__font-size-monospace;
@include crispy__media__breakpoints('font-size', $crispy__font-size-monospace__breakpoints);
}
}

+ 127
- 0
src/core/_typography.scss View File

@ -0,0 +1,127 @@
/**
* typograhy
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
@mixin crispy__core__typography()
{
// paragraphs
p {
margin: $crispy__margin;
}
// Semantic text elements
a,
ins,
u {
text-decoration-skip: ink edges;
}
// Add the correct font weight in Chrome, Edge, and Safari.
b,
strong {
font-weight: bolder;
}
// Add the correct font size in all browsers.
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 70%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
abbr[title] {
border-bottom: 1px dotted;
cursor: help;
text-decoration: none;
}
mark {
padding: 0.25em;
}
/**
* blockquote
*
*
*/
blockquote {
border-left: $crispy__border;
margin-left: 0;
padding: $crispy__padding;
p:last-child {
margin-bottom: 0;
}
}
/**
* lists
*
*/
dl,
ol,
ul {
padding: 0;
margin: $crispy__margin;
}
ol,
ul {
margin-left: 1.5em;
}
ol ol,
ul ul {
margin-top: 0;
margin-left: 1em;
}
ol {
list-style: decimal outside;
}
ul {
list-style: disc outside;
}
dl {
margin-left: 0.5em;
}
dd,
dt {
margin: 0;
}
dt {
font-weight: bold;
}
}

+ 2
- 2
src/crispy-all.scss View File

@ -1,7 +1,7 @@
@import @import
'crispy'; 'crispy';
@include crispy__modifiers();
@include crispy__helpers();
@include crispy__button(); @include crispy__button();
@include crispy__code(); @include crispy__code();
@include crispy__progress(); @include crispy__progress();
@ -13,4 +13,4 @@
@include crispy__modal(); @include crispy__modal();
@include crispy__overlay(); @include crispy__overlay();
@include crispy__panel(); @include crispy__panel();
@include crispy__table();
@include crispy__table();

+ 1
- 1
src/crispy-minimal.scss View File

@ -1,4 +1,4 @@
@import @import
'crispy'; 'crispy';
@include crispy__modifiers();
@include crispy__helpers();

+ 1
- 1
src/crispy.scss View File

@ -2,7 +2,7 @@
'variables', 'variables',
'core', 'core',
'modifiers',
'helpers',
'components/button', 'components/button',
'components/code', 'components/code',


src/example/components/_nav.scss → src/examples/components/_nav.scss View File


src/example/site/_header.scss → src/examples/site/_header.scss View File

@ -10,7 +10,6 @@
@mixin site__header() { @mixin site__header() {
.header { .header {
text-align: center;
max-width: 100%; max-width: 100%;
a { a {
@ -35,7 +34,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 91;
z-index: 101;
} }
} }
} }

src/example/styles.scss → src/examples/styles.scss View File


src/example/templates/_home.scss → src/examples/templates/_home.scss View File


dist/example/index.html → src/html/index.html.ejs View File

@ -1,17 +1,17 @@
<!doctype html> <!doctype html>
<html class="no-js" lang="en_EN">
<html lang="en_EN">
<head> <head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title>
<meta name="description" content="Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta name="description" content="<%= htmlWebpackPlugin.options.description %>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<header id="header" class="header">
<header id="header" class="header">
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
@ -36,7 +36,7 @@
</div> </div>
</header> </header>
<div class="container"> <div class="container">
<div class="grid margin-top-6 margin-bottom-2">
<div class="grid margin-top-2 margin-bottom-2">
<div class="col-12 col-sm-6 col-lg-4 col-align-center"> <div class="col-12 col-sm-6 col-lg-4 col-align-center">
<h3 class="h4 text-center"> <h3 class="h4 text-center">
<span class="h3__icon"> <span class="h3__icon">
@ -83,7 +83,7 @@
</div> </div>
</div> </div>
<div class="margin-bottom-6 text-center text-size-medium">
<div class="margin-bottom-2 text-center text-size-medium">
<a class="button background-color-success text-color-white" href="/getstarted.html"> <a class="button background-color-success text-color-white" href="/getstarted.html">
Get started! Get started!
<svg class="icon margin-left-1" alt="proceed"> <svg class="icon margin-left-1" alt="proceed">
@ -98,10 +98,10 @@
</a> </a>
</div> </div>
<div class="margin-bottom-6">
<div class="margin-bottom-5 margin-top-4">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2 class="h3 text-center margin-top-6">Apps and Websites that have been crafted</h2>
<h2 class="h3 text-center">Apps and Websites that have been crafted</h2>
</div> </div>
</div> </div>
<div class="grid"> <div class="grid">
@ -133,27 +133,7 @@
</div> </div>
</div> </div>
<footer class="footer background-color-info margin-top-4 padding-top-5 padding-bottom-2">
<div class="container">
<div class="grid">
<div class="col-12">
<div class="text-center">
<ul class="group group--horizontal group--separate">
<li class="group__item">
<a class="text-color-white" href="/imprint.html">Imprint</a>
</li>
<li class="group__item">
<a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a>
</li>
</ul>
<p class="margin-top-1">
Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a>
</p>
</div>
</div>
</div>
</div>
</footer>
<%= htmlWebpackPlugin.options.footer %>
</body> </body>
</html>
</html>

+ 81
- 0
src/html/page.html.ejs View File

@ -0,0 +1,81 @@
<!doctype html>
<html lang="en_EN">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %> | Crispy CSS</title>
<meta name="description" content="">
<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 col-md-4">
<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>
</div>
<div class="col-12 col-md-8">
<nav class="group text-right show">
<ul class="group">
<li class="group__item">
<a href="getting-started.html" class="text-color-white">
Getting started!
</a>
</li>
<li class="group__item">
<a href="core.html" class="text-color-white">
Core
</a>
</li>
<li class="group__item">
<a href="components.html" class="text-color-white">
Components
</a>
</li>
<li class="group__item">
<a href="helpers.html" class="text-color-white">
Helpers
</a>
</li>
<li class="group__item">
<a href="mixins.html" class="text-color-white">
Mixins
</a>
</li>
<li class="group__item">
<a href="functions.html" class="text-color-white">
Functions
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<main class="container">
<div class="grid">
<div class="col-12">
<header class="header">
<h1 class="padding-top-4 padding-bottom-2 text-center">
<%= htmlWebpackPlugin.options.title %>
</h1>
</header>
<%= htmlWebpackPlugin.options.body %>
</div>
</div>
</main>
<%= htmlWebpackPlugin.options.footer %>
</body>
</html>

+ 666
- 0
src/html/partials/components.html View File

@ -0,0 +1,666 @@
<!-- components / button -->
<h2 class="margin-bottom-1">
Button
</h2>
<hr class="marginless margin-bottom-2" />
<h3 class="h4">Scss:</h3>
<pre class="code margin-top-1"><code>$crispy__button__font-family: $crispy__font-family;
$crispy__button__font-weight: $crispy__font-weight;
$crispy__button__font-size: $crispy__font-size;
$crispy__button__font-size-breakpoints: $crispy__font-size__breakpoints;
$crispy__button__padding: 0.3em 0.8em;
$crispy__button__padding-breakpoints: (
$crispy__md: 0.4em 1.2em
);
</code></pre>
<h3 class="h4">Html:</h3>
<pre class="code margin-top-1"><code>&lt;button class=&quot;button&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;button text-size-medium&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;button text-size-large&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;button width-100&quot;&gt;&lt;/button&gt;</code></pre>
<button class="button">Default</button>
<button class="button text-size-medium">Default</button>
<button class="button text-size-large">Default</button>
<button class="button width-100">Info</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 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 -->
<h2 class="margin-top-3 margin-bottom-1">
Code
</h2>
<hr class="marginless margin-bottom-2" />
<h3 class="h4">Scss:</h3>
<pre class="code margin-top-1"><code>$crispy__code__padding: $crispy__padding;
$crispy__code__padding-breakpoints: $crispy__padding-breakpoints;
$crispy__code__margin: $crispy__margin;
$crispy__code__border: $crispy__border;
$crispy__code__background-color: $crispy__color-grey-light;
</code></pre>
<h3 class="h4">Html:</h3>
<pre class="code margin-top-1"><code>&lt;pre class=&quot;code&quot;&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;</code></pre>
<!-- components / fields -->
<h2 class="margin-top-3">
Fields
</h2>
<h3 class="h4 magin-top-2">Scss:</h3>
<pre class="code margin-top-1"><code>$crispy__field__margin: $crispy__margin;
$crispy__field__border: $crispy__border;
$crispy__field__color--valid: $crispy__color-success;
$crispy__field__color--error: $crispy__color-danger;
$crispy__field__border-color--focus: $crispy__color-primary;
$crispy__field__border-color--valid: $crispy__color-success;
$crispy__field__border-color--error: $crispy__color-danger;
$crispy__field__choice__checked__color: $crispy__color-success;
$crispy__field__choice__unchecked__color: $crispy__color-danger;
$crispy__field__input__padding: 0.4em 0.6em;
$crispy__field__input__color: $crispy__color-text;
$crispy__field__select__padding: 0.3em 0.5em;
$crispy__field__panel__padding: 0.3em 0.6em;
$crispy__field__select__background-color: white;
$crispy__field__select__border: $crispy__border;</code></pre>
<!-- components / field / input textarea -->
<h3 class="h4 margin-top-2">
Input / Textarea
</h3>
<pre class="code margin-top-1"><code>&lt;div class=&quot;field&quot;&gt;
&lt;input class=&quot;field__text&quot; type=&quot;text&quot; /&gt;
&lt;/div&gt;
&lt;div class=&quot;field field--valid&quot;&gt;
&lt;label class=&quot;field__label&quot;&gt;
Text
&lt;input type=&quot;text&quot; class=&quot;field__text&quot; /&gt;
&lt;/label&gt;
&lt;div class=&quot;field__panel&quot;&gt;
error item 1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;field field--error&quot;&gt;
&lt;label class=&quot;field__label&quot;&gt;
Text
&lt;input type=&quot;text&quot; class=&quot;field__text&quot; /&gt;
&lt;/label&gt;
&lt;div class=&quot;field__panel&quot;&gt;
error item 1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;field&quot;&gt;
&lt;label class=&quot;field__label&quot;&gt;
Textarea
&lt;textarea class=&quot;field__text&quot;&gt;&lt;/textarea&gt;
&lt;/label&gt;
&lt;/div&gt;</code></pre>
<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>
<!-- components / field / Choice -->
<h3 class="h4 margin-top-2">
Checkbox
</h3>
<pre class="code margin-top-1"><code>&lt;div class=&quot;field&quot;&gt;
&lt;input id=&quot;field__checkbox__1&quot; class=&quot;field__choice&quot; type=&quot;checkbox&quot; name=&quot;field__checkbox__1&quot; value=&quot;true&quot; /&gt;
&lt;label for=&quot;field__checkbox__1&quot; class=&quot;field__label&quot;&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
checkbox 1
&lt;/label&gt;
&lt;input id=&quot;field__checkbox__2&quot; class=&quot;field__choice&quot; type=&quot;checkbox&quot; name=&quot;field__checkbox__2&quot; value=&quot;true&quot; /&gt;
&lt;label for=&quot;field__checkbox__2&quot; class=&quot;field__label&quot;&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
checkbox 2
&lt;/label&gt;
&lt;/div&gt;</code></pre>
<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 text-size-medium field__choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
</svg>
<svg class="icon text-size-medium 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 text-size-medium field__choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
</svg>
<svg class="icon text-size-medium 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 text-size-medium field__choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
</svg>
<svg class="icon text-size-medium 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-2">
Radio
</h3>
<pre class="code margin-top-1"><code>&lt;div class=&quot;field&quot;&gt;
&lt;input id=&quot;field__radio__1&quot; class=&quot;field__choice&quot; type=&quot;radio&quot; name=&quot;field__radio__1[]&quot; value=&quot;true&quot; /&gt;
&lt;label for=&quot;field__radio__1&quot; class=&quot;field__label&quot;&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot; /&gt;
&lt;/svg&gt;
radio item 1
&lt;/label&gt;&lt;br /&gt;
&lt;input id=&quot;field__radio__2&quot; class=&quot;field__choice&quot; type=&quot;radio&quot; name=&quot;field__radio__1[]&quot; value=&quot;true&quot; /&gt;
&lt;label for=&quot;field__radio__2&quot; class=&quot;field__label&quot;&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot; /&gt;
&lt;/svg&gt;
radio item 2
&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;field field--error&quot;&gt;
&lt;input id=&quot;field__radio__3&quot; class=&quot;field__choice&quot; type=&quot;radio&quot; name=&quot;field__radio__2[]&quot; value=&quot;true&quot; /&gt;
&lt;label for=&quot;field__radio__3&quot; class=&quot;field__label&quot;&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot; /&gt;
&lt;/svg&gt;
radio item 1
&lt;/label&gt;&lt;br /&gt;
&lt;input id=&quot;field__radio__4&quot; class=&quot;field__choice&quot; type=&quot;radio&quot; name=&quot;field__radio__2[]&quot; value=&quot;true&quot; /&gt;
&lt;label for=&quot;field__radio__4&quot; class=&quot;field__label&quot;&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot; /&gt;
&lt;/svg&gt;
radio item 2
&lt;/label&gt;
&lt;div class=&quot;field__panel&quot;&gt;
error item 1
&lt;/div&gt;
&lt;/div&gt;</code></pre>
<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 text-size-medium field__choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
</svg>
<svg class="icon text-size-medium 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 text-size-medium field__choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
</svg>
<svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-toggle-right" />
</svg>
radio item 2
</label>
</div>
<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 text-size-medium field__choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
</svg>
<svg class="icon text-size-medium 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 text-size-medium field__choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
</svg>
<svg class="icon text-size-medium 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-2">
Select
</h3>
<pre class="code margin-top-1"><code>&lt;div class=&quot;field&quot;&gt;
&lt;label class=&quot;field__label&quot;&gt;
Select Item
&lt;select class=&quot;field__select&quot;&gt;
&lt;option&gt;select item 1&lt;/option&gt;
&lt;option&gt;select item 2&lt;/option&gt;
&lt;option&gt;select item 3&lt;/option&gt;
&lt;/select&gt;
&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;field field--error&quot;&gt;
&lt;label class=&quot;field__label&quot;&gt;
Select Item
&lt;select class=&quot;field__select&quot;&gt;
&lt;option&gt;select item 1&lt;/option&gt;
&lt;option&gt;select item 2&lt;/option&gt;
&lt;option&gt;select item 3&lt;/option&gt;
&lt;/select&gt;
&lt;div class=&quot;field__panel&quot;&gt;
error item 1
&lt;/div&gt;
&lt;/label&gt;
&lt;/div&gt;</code></pre>
<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 / group -->
<h2 class="margin-top-3">
Group
</h2>
<h3 class="h4">Scss:</h3>
<pre class="code"><code>$crispy__group__margin: 0.3em !default;
$crispy__group__character: '/' !default;
$crispy__group__character-margin: 0 $crispy__group__margin 0 !default;</code></pre>
<h3 class="h4">Html:</h3>
<pre class="code"><code>&lt;nav&gt;
&lt;ul class=&quot;group group--hr&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-2">
<nav>
<ul class="group group--hr">
<li class="group__item">first item</li>
<li class="group__item">second item</li>
<li class="group__item">third item</li>
</ul>
</nav>
</div>
<div class="panel panel__inner">
<nav>
<ul class="group">
<li class="group__item">
<button class="button marginless">Button</button>
</li>
<li class="group__item">
<button class="button marginless">Button</button>
</li>
<li class="group__item">
<button class="button marginless">Button</button>
</li>
</ul>
</nav>
</div>
<!-- components / hero -->
<h2 class="margin-top-3">
Hero
</h2>
<h3 class="h4">Html:</h3>
<pre class="code"><code>&lt;div class=&quot;hero&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre>
<div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
<pre class="code margin-top-3"><code>&lt;div class=&quot;hero hero--top&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</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>&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>
<!-- icons -->
<h2 class="margin-top-3">
Icon
</h2>
<h3 class="h4">Scss:</h3>
<pre class="code"><code>$crispy__icon__size: 1.15em;
</code></pre>
<h3 class="h4">Html:</h3>
<pre class="code"><code>&lt;svg class=&quot;icon text-size-small&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-large&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-big&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-mega&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon icon-color-danger&quot; aria-hidden=&quot;true&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;;</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>
<svg class="icon icon-color-danger" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-flask"></use>
</svg>
</div>
</div>
<!-- components / media -->
<h2 class="margin-top-3">
Media
</h2>
<h3 class="h4">Html:</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;
</code></pre>
<div class="grid">
<div class="col-12 col-md-6">
<img class="img-responsive width-100" src="https://picsum.photos/400" />
</div>
<div class="col-12 col-md-6">
<figure>
<img class="img-responsive width-100" src="https://picsum.photos/400" />
<figcaption class="text-center">Lorem Ipsum</figcaption>
</figure>
</div>
</div>
<!-- components / panel -->
<h2 class="margin-top-3">
Panel
</h2>
<h3 class="h4">Scss:</h3>
<pre class="code"><code>$crispy__panel__inner-padding: $crispy__padding;
$crispy__panel__inner-padding-breakpoints: $crispy__padding-breakpoints;
$crispy__panel__background-color: $crispy__color-grey-light;
</code></pre>
<h3 class="h4">Html:</h3>
<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 / progress -->
<h2 class="margin-top-3">
Progress
</h2>
<h3 class="h4">Scss:</h3>
<pre class="code"><code>$crispy__progress__height: 30px;
$crispy__progress__background-color: $crispy__color-primary;
$crispy__progress__border-width: 1px;
$crispy__progress__border-color: $crispy__color-border;
</code></pre>
<h3 class="h4">Html:</h3>
<pre class="code"><code>&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress__inner&quot; style=&quot;width: 80%&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="progress">
<div class="progress__inner" style="width: 80%">
</div>
</div>
<!-- components / modal -->
<h2 class="margin-top-3">
Modal
</h2>
<h3 class="h4">Scss:</h3>
<pre class="code"><code>$crispy__modal__max-width-breakpoints: (
$crispy__md: 50%
);
$crispy__modal__margin-breakpoints: (
$crispy__md: 0.75em
);
$crispy__modal__z-index: zIndex('modal');</code></pre>
<h3 class="h4">Html:</h3>
<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--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 -->
<h2 class="margin-top-3">
Table
</h2>
<h3 class="h4">Scss:</h3>
<pre class="code"><code>$crispy__table__padding: $crispy__padding !default;
$crispy__table__padding-breakpoints: $crispy__padding-breakpoints !default;
$crispy__table__td__border: 1px solid $crispy__color-border !default;
$crispy__table__th__border-width: 2px !default;
$crispy__table__color: $crispy__color-text !default;
$crispy__table__striped__background-color: $crispy__color-grey-light !default;</code></pre>
<h3 class="h4">Html:</h3>
<pre class="code"><code>&lt;table class=&quot;table table--striped margin-bottom-2&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;name&lt;/th&gt;
&lt;th&gt;age&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Mr. Brown&lt;/td&gt;
&lt;td&gt;43&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Mr. Magenta&lt;/td&gt;
&lt;td&gt;32&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Mr. White&lt;/td&gt;
&lt;td&gt;45&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</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>

+ 69
- 0
src/html/partials/core.html View File

@ -0,0 +1,69 @@
<h2 class="marginless margin-bottom-1">Normalize</h2>
<hr class="marginless margin-bottom-2" />
<h3 class="h4 margin-top-2">a</h3>
<a href="#">Link</a>
<div class="grid">
<div class="col-12">
<h2 class="marginless margin-top-2 margin-bottom-1">Typography</h2>
<hr class="marginless margin-bottom-2" />
<h3 class="h4 margin-top-2">Heading</h3>
<div class="h1">Heading h1</div>
<div class="h2">Heading h2</div>
<div class="h3">Heading h3</div>
<div class="h4">Heading h4</div>
<div class="h5">Heading h5</div>
<div class="h6">Heading h6</div>
<!-- abbr -->
<h3 class="h4 margin-top-2">abbr</h3>
<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>
<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>
<hr>
<!-- paragraph -->
<h3 class="h4 margin-top-2">paragraph</h3>
<p>
Glossier viral occupy mixtape pok pok.
</p>
<!-- mark -->
<h3 class="h4 margin-top-2">mark</h3>
<p>
Pug before they <mark>four loko</mark> Deep v bespoke
</p>
<!-- list -->
<h3 class="h4 margin-top-2">list</h3>
<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>
</div>
</div>

+ 21
- 0
src/html/partials/footer.html View File

@ -0,0 +1,21 @@
<footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3">
<div class="container">
<div class="grid">
<div class="col-12">
<div class="text-center">
<ul class="group group--hr">
<li class="group__item">
<a class="text-color-white" href="/imprint.html">Imprint</a>
</li>
<li class="group__item">
<a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a>
</li>
</ul>
<p class="margin-top-1 margin-bottom-0">
Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a>
</p>
</div>
</div>
</div>
</div>
</footer>

+ 24
- 0
src/html/partials/functions.html View File

@ -0,0 +1,24 @@
<!-- 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>

+ 53
- 0
src/html/partials/getting-started.html View File

@ -0,0 +1,53 @@
<h2 class="margin-bottom-1">
Installation
</h2>
<hr class="marginless 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__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>
<h2>Example</h2>
<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 class="h4">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 class="h4">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>

+ 52
- 0
src/html/partials/helpers.html View File

@ -0,0 +1,52 @@
<!-- border -->
<h3 class="h4 margin-top-2">Border</h3>
<div class="panel panel__inner margin-bottom-1 bordered">
<div style="width: 50px; height: 50px;" class="background-color-info round"></div>
.round
</div>
<div class="panel panel__inner margin-bottom-1 bordered">
<div style="width: 50px; height: 50px;" class="background-color-info round radiusless"></div>
.radiusless
</div>
<div class="panel panel__inner margin-bottom-1 bordered">.bordered</div>
<div class="panel panel__inner margin-bottom-1 bordered rounded">.rounded</div>
<div class="panel panel__inner margin-bottom-1 bordered borderless">.borderless</div>
<!-- margin and padding -->
<h3 class="h4 margin-top-3">Margin / Padding</h3>
<div class="panel bordered padding-bottom-0">padding-bottom-0</div>
<div class="panel bordered padding-bottom-1">padding-bottom-1</div>
<div class="panel bordered padding-bottom-2">padding-bottom-2</div>
<div class="panel bordered padding-bottom-3">padding-bottom-3</div>
<div class="panel bordered padding-bottom-4">padding-bottom-4</div>
<div class="panel bordered padding-bottom-5">padding-bottom-5</div>
<div class="panel bordered padding-bottom-6">padding-bottom-6</div>
<!-- typography -->
<h3 class="h4 margin-top-3">Typography</h3>
<p class="panel panel__inner bordered text-left">text-left</p>
<p class="panel panel__inner bordered text-center">text-center</p>
<p class="panel panel__inner bordered text-right">text-right</p>
<p class="panel panel__inner bordered text-justify">
text-justify<br />
I'm baby literally tousled ramps 8-bit franzen, yuccie before they sold out stumptown XOXO palo santo. Blog taiyaki vegan crucifix. Mustache raw denim shabby chic
vegan hexagon aesthetic deep v tofu man braid church-key pork belly unicorn pinterest. Palo santo heirloom banh mi waistcoat, neutra listicle selvage sustainable adaptogen tote bag art party migas ethical PBR&B 8-bit.
Chillwave hammock VHS post-ironic, tumblr brunch normcore blue bottle chambray. Austin vice microdosing celiac. Bushwick blog farm-to-table succulents mlkshk actually.
</p>
<p class="panel panel__inner bordered text-italic">text-italic</p>
<p class="panel panel__inner bordered text-light">text-light</p>
<p class="panel panel__inner bordered text-normal">text-normal</p>
<p class="panel panel__inner bordered text-medium">text-medium</p>
<p class="panel panel__inner bordered text-bold">text-bold</p>
<p class="panel panel__inner bordered text-capitalize">text-capitalize</p>
<p class="panel panel__inner bordered text-uppercase">text-uppercase</p>
<p class="panel panel__inner bordered text-smaller">text-smaller</p>
<p class="panel panel__inner bordered text-crossed">text-crossed</p>
<p class="panel panel__inner bordered text-unterline">text-underline</p>
<!-- width -->
<h3 class="h4 margin-top-3">Width</h3>
<div class="panel panel__inner bordered width-25 margin-bottom-1">width-25</div>
<div class="panel panel__inner bordered width-50 margin-bottom-1">width-50</div>
<div class="panel panel__inner bordered width-75 margin-bottom-1">width-75</div>
<div class="panel panel__inner bordered width-100 margin-bottom-1">width-100</div>

+ 0
- 0
src/html/partials/imprint.html View File


+ 94
- 0
src/html/partials/mixins.html View File

@ -0,0 +1,94 @@
<!-- 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>&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-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>

+ 0
- 0
src/html/partials/privacy-policy.html View File


+ 76
- 2
webpack.mix.js View File

@ -1,6 +1,8 @@
const mix = require('laravel-mix'); const mix = require('laravel-mix');
const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin'); const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');
/* /*
|-------------------------------------------------------------------------- |--------------------------------------------------------------------------
@ -17,18 +19,90 @@ mix.webpackConfig({
plugins: [ plugins: [
new SvgSpritemapPlugin('assets/svg/*.svg', { new SvgSpritemapPlugin('assets/svg/*.svg', {
output: { output: {
filename: 'dist/example/symbol-defs.svg'
filename: 'dist/examples/symbol-defs.svg'
}, },
sprite: { sprite: {
prefix: 'icon-' prefix: 'icon-'
} }
}),
new HtmlWebpackPlugin({
filename: 'dist/examples/index.html',
template: 'src/html/index.html.ejs',
title: 'Crispy CSS | Lightweight CSS Framework for Building Apps and Websites',
description: 'Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers',
footer: fs.readFileSync(__dirname + '/src/html/partials/footer.html'),
inject: false
}),
new HtmlWebpackPlugin({
filename: 'dist/examples/getting-started.html',
template: 'src/html/page.html.ejs',
title: 'Getting started!',
body: fs.readFileSync(__dirname + '/src/html/partials/getting-started.html'),
footer: fs.readFileSync(__dirname + '/src/html/partials/footer.html'),
inject: false
}),
new HtmlWebpackPlugin({
filename: 'dist/examples/core.html',
template: 'src/html/page.html.ejs',
title: 'Core',
body: fs.readFileSync(__dirname + '/src/html/partials/core.html'),
footer: fs.readFileSync(__dirname + '/src/html/partials/footer.html'),
inject: false
}),
new HtmlWebpackPlugin({
filename: 'dist/examples/components.html',
template: 'src/html/page.html.ejs',
title: 'Components',
body: fs.readFileSync(__dirname + '/src/html/partials/components.html'),
footer: fs.readFileSync(__dirname + '/src/html/partials/footer.html'),
inject: false
}),
new HtmlWebpackPlugin({
filename: 'dist/examples/helpers.html',
template: 'src/html/page.html.ejs',
title: 'Helpers',
body: fs.readFileSync(__dirname + '/src/html/partials/helpers.html'),
footer: fs.readFileSync(__dirname + '/src/html/partials/footer.html'),
inject: false
}),
new HtmlWebpackPlugin({
filename: 'dist/examples/mixins.html',
template: 'src/html/page.html.ejs',
title: 'Mixins',
body: fs.readFileSync(__dirname + '/src/html/partials/mixins.html'),
footer: fs.readFileSync(__dirname + '/src/html/partials/footer.html'),
inject: false
}),
new HtmlWebpackPlugin({
filename: 'dist/examples/functions.html',
template: 'src/html/page.html.ejs',
title: 'Functions',
body: fs.readFileSync(__dirname + '/src/html/partials/functions.html'),
footer: fs.readFileSync(__dirname + '/src/html/partials/footer.html'),
inject: false
}),
new HtmlWebpackPlugin({
filename: 'dist/examples/imprint.html',
template: 'src/html/page.html.ejs',
title: 'Imprint',
body: fs.readFileSync(__dirname + '/src/html/partials/imprint.html'),
footer: fs.readFileSync(__dirname + '/src/html/partials/footer.html'),
inject: false
}),
new HtmlWebpackPlugin({
filename: 'dist/examples/privacy-policy.html',
template: 'src/html/page.html.ejs',
title: 'Privacy Policy',
body: fs.readFileSync(__dirname + '/src/html/partials/privacy-policy.html'),
footer: fs.readFileSync(__dirname + '/src/html/partials/footer.html'),
inject: false
}) })
] ]
}); });
mix.sass('src/crispy-all.scss', 'dist/crispy-all.css') mix.sass('src/crispy-all.scss', 'dist/crispy-all.css')
.sass('src/crispy-minimal.scss', 'dist/crispy-minimal.css') .sass('src/crispy-minimal.scss', 'dist/crispy-minimal.css')
.sass('src/example/styles.scss', 'dist/example/styles.css', {
.sass('src/examples/styles.scss', 'dist/examples/styles.css', {
sassOptions: { sassOptions: {
includePaths: [ includePaths: [
'node_modules/reflex-grid/scss' 'node_modules/reflex-grid/scss'


Write Preview
Loading…
Cancel
Save