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
ec3c4e2e81
commit
5b11c23cd8
35 changed files with 3683 additions and 3197 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -2
      README.md
  2. +1
    -0
      dist/crispy-all.css
  3. +1
    -0
      dist/crispy-minimal.css
  4. +0
    -1
      dist/crispy_all.css
  5. +0
    -1
      dist/crispy_minimal.css
  6. +938
    -0
      dist/example/getstarted.html
  7. +40
    -920
      dist/example/index.html
  8. +1
    -1
      dist/example/styles.css
  9. +2
    -2
      mix-manifest.json
  10. +1917
    -1986
      package-lock.json
  11. +5
    -6
      package.json
  12. +196
    -24
      src/_core.scss
  13. +31
    -23
      src/_modifiers.scss
  14. +341
    -0
      src/_normalize.scss
  15. +59
    -37
      src/_variables.scss
  16. +9
    -9
      src/components/_button.scss
  17. +13
    -15
      src/components/_code.scss
  18. +4
    -6
      src/components/_field.scss
  19. +10
    -10
      src/components/_group.scss
  20. +6
    -8
      src/components/_hero.scss
  21. +15
    -11
      src/components/_icon.scss
  22. +5
    -8
      src/components/_media.scss
  23. +10
    -10
      src/components/_modal.scss
  24. +7
    -6
      src/components/_overlay.scss
  25. +11
    -10
      src/components/_panel.scss
  26. +12
    -12
      src/components/_progress.scss
  27. +21
    -22
      src/components/_table.scss
  28. +0
    -1
      src/crispy-all.scss
  29. +0
    -1
      src/crispy-minimal.scss
  30. +2
    -5
      src/crispy.scss
  31. +0
    -16
      src/example/components/_button.scss
  32. +0
    -14
      src/example/site/_footer.scss
  33. +16
    -2
      src/example/site/_header.scss
  34. +2
    -8
      src/example/styles.scss
  35. +7
    -20
      webpack.mix.js

+ 1
- 2
README.md View File

@ -1,4 +1,4 @@
# Crispy - Lightweight CSS / SCSS Framework
# Lightweight CSS Framework for Building Apps and Websites
## Installation
@ -26,7 +26,6 @@ Now include Mixins you need. Components and Modifiziers only works if you includ
@include crispy__code();
@include crispy__field();
@include crispy__group();
@include crispy__heading();
@include crispy__hero();
@include crispy__icon();
@include crispy__media();


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


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


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


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


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

@ -0,0 +1,938 @@
<!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="Lightweight Framework for building 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 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="#typography" class="text-color-white margin-left-3">
Typography
</a>
</li>
<li class="group__item">
<a href="#components" class="text-color-white">
Components
</a>
</li>
<li class="group__item">
<a href="#components" class="text-color-white">
Functions
</a>
</li>
<li class="group__item">
<a href="#components" class="text-color-white">
Modifiziers
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="container">
<div class="grid">
<div class="col-12">
<h1 class="h2 margin-top-4 margin-bottom-2 text-center">
Get started!
</h1>
<h2 class="h3">Installation</h2>
<pre class="code"><code>npm install crispy-css</code></pre>
<h2 class="h3">How it works</h2>
<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>
<h2 class="h3">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>
<h4>Site</h4>
<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>
<h4>Templates</h4>
<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 -->
<hr class="margin-top-3">
<h2 id="typography" class="margin-top-1">
Typography
</h2>
<!-- 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>
<!-- components / 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 -->
<hr class="margin-top-3">
<h2 id="components" class="margin-top-1">
Components
</h2>
<!-- 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 width-100&quot;&gt;&lt;/button&gt;</code></pre>
<button class="button">Default</button>
<button class="button width-100 margin-top-1">Info</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>
To change Size you can use "text-size-*" that you find in the <span class="text-weight-bold">modifiers</span>.
</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-spaceinvaders"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
</svg>
<svg class="icon text-size-large" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
</svg>
<svg class="icon text-size-big" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
</svg>
<svg class="icon text-size-mega" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
</svg>
</div>
</div>
<div class="panel">
<div class="panel__inner">
<button class="button">
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
</svg>
</button>
<button class="button">
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
</svg>
Button
</button>
</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-minus&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-spaceinvaders"></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 / field / checkbox -->
<h3 class="h4 margin-top-0">
Checkbox
</h3>
<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-minus"></use>
</svg>
<svg class="icon field__choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-checked"></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-minus"></use>
</svg>
<svg class="icon field__choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-checked"></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-minus"></use>
</svg>
<svg class="icon field__choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-checked"></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-minus"></use>
</svg>
<svg class="icon field__choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-checked" />
</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-minus"></use>
</svg>
<svg class="icon field__choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-checked" />
</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-minus"></use>
</svg>
<svg class="icon field__choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-checked" />
</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-minus"></use>
</svg>
<svg class="icon field__choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-checked" />
</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>
<!-- functions -->
<hr class="margin-top-3">
<h2 id="functions" class="margin-top-1">
Functions
</h2>
<!-- 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>
<!-- modifiers -->
<hr class="margin-top-3">
<h2 id="modifiers" class="margin-top-1">
Modifiziers
</h2>
<!-- modifiers / margin & padding -->
<h3 class="h4 margin-top-1">
Margin & Padding
</h3>
<p>
Adding margin-top, -left, -bottom and -right and the same for padding.
</p>
<h4 class="h6 margin-top-1">Sass:</h4>
<pre class="code">
$crispy__modifiers__spacing: 0.75em;
$crispy__modifiers__spacing__steps: 6;
</pre></code>
<h4 class="h6 margin-top-1">Html:</h4>
<pre class="code">&lt;div class=&quot;panel&quot;&gt;margin-bottom-0&lt;/div&gt;
&lt;div class=&quot;margin-bottom-1&quot;&gt;margin-bottom-1&lt;/div&gt;
&lt;div class=&quot;margin-bottom-2&quot;&gt;margin-bottom-2&lt;/div&gt;
&lt;div class=&quot;margin-bottom-3&quot;&gt;margin-bottom-3&lt;/div&gt;
&lt;div class=&quot;margin-bottom-4&quot;&gt;margin-bottom-4&lt;/div&gt;
&lt;div class=&quot;margin-bottom-5&quot;&gt;margin-bottom-5&lt;/div&gt;</code></pre>
<div class="panel panel__inner">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>
<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 / 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>
<!-- 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>
</div>
</div>
</div>
</body

+ 40
- 920
dist/example/index.html
File diff suppressed because it is too large
View File


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


+ 2
- 2
mix-manifest.json View File

@ -1,6 +1,6 @@
{
"/dist/crispy_all.css": "/dist/crispy_all.css",
"/dist/crispy_minimal.css": "/dist/crispy_minimal.css",
"/dist/crispy-all.css": "/dist/crispy-all.css",
"/dist/crispy-minimal.css": "/dist/crispy-minimal.css",
"/dist/example/styles.css": "/dist/example/styles.css",
"/dist/example/symbol-defs.svg": "/dist/example/symbol-defs.svg"
}

+ 1917
- 1986
package-lock.json
File diff suppressed because it is too large
View File


+ 5
- 6
package.json View File

@ -1,6 +1,6 @@
{
"name": "crispy-css",
"version": "2.2.3",
"version": "3.0.0-pre",
"description": "Lightweight Framework for building Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements and Helpers.",
"repository": {
"type": "git",
@ -19,14 +19,13 @@
"license": "MIT",
"devDependencies": {
"cross-env": "^5.2.1",
"laravel-mix": "^5.0.0",
"laravel-mix": "^5.0.4",
"postcss-css-variables": "^0.11.0",
"resolve-url-loader": "^3.1.0",
"sass": "^1.23.0",
"sass-loader": "^8.0.0"
"resolve-url-loader": "^3.1.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2"
},
"dependencies": {
"normalize-scss": "^7.0.1",
"reflex-grid": "^2.0.4"
}
}

+ 196
- 24
src/_core.scss View File

@ -1,18 +1,28 @@
/**
* core
* core
*
* import normalize
* - normalize
* - typograhy
* - links
* - fonts
*
* Thanks to https://necolas.github.io/normalize.css/, use a lot from them
*
* @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
*
*/
@import
'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,
@ -26,6 +36,10 @@
box-sizing: border-box;
}
main {
display: block; // Render the `main` element consistently in IE.
}
*,
*::after,
*::before {
@ -39,7 +53,7 @@
// paragraphs
p {
margin: ($crispy__spacing * 0.3) 0 $crispy__spacing 0;
margin: $crispy__margin;
}
// Semantic text elements
@ -49,6 +63,38 @@
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: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
a {
color: $crispy__color-link;
@ -73,26 +119,36 @@
// blockquote
blockquote {
border-left: 1px solid $crispy__color-secondary;
border-left: $crispy__border;
margin-left: 0;
padding: 0.125em 0.5em;
padding: $crispy__padding;
p:last-child {
margin-bottom: 0;
}
}
// lists
/**
* lists
*
*/
dl,
ol,
ul {
padding: 0;
margin: 0 0 $crispy__spacing ($crispy__spacing * 2);
margin: $crispy__margin;
}
ol,
ul {
margin-left: 1.5em;
}
ol ol,
ul ul {
margin-top: $crispy__spacing * 0.125;
margin-top: 0;
margin-left: 1em;
}
ol {
@ -103,6 +159,10 @@
list-style: disc outside;
}
dl {
margin-left: 0.5em;
}
dd,
dt {
margin: 0;
@ -114,21 +174,95 @@
// media
figure {
margin: 0 0 $crispy__spacing;
margin: $crispy__margin;
}
figcaption {
margin: $crispy__spacing 0 0;
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: $crispy__spacing 0;
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
/**
* Heading
*
*
*/
h1, .h1,
h2, .h2,
h3, .h3,
@ -137,30 +271,70 @@
h6, .h6 {
font-family: $crispy__heading__font-family;
font-weight: $crispy__heading__font-weight;
line-height: $crispy__heading__line-height;
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 * 0.9;
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 * 1.2;
font-size: $font-size * $crispy__xlg__multiplicator;
}
}
}
// body
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
*
*/
body {
color: $crispy__color-text;
background-color: $crispy__color-background;
direction: $crispy__direction;
// responsive for font-size
font-size: $crispy__font-size-xxs;
@include crispy__media-md() {
font-size: $crispy__font-size-md;
}
@ -169,13 +343,11 @@
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;
}
color: $crispy__color-text;
background-color: $crispy__color-background;
direction: $crispy__direction;
}
}

+ 31
- 23
src/_modifiers.scss View File

@ -1,11 +1,23 @@
/**
* helper: visibility
* modifiers
*
*
* @author Björn Hase
* @author Björn Hase
*
*/
// spacing
$crispy__modifiers__spacing: 0.75em !default;
$crispy__modifiers__spacing__steps: 6 !default;
// width
$crispy__modifiers__width: (
'25' : 25%,
'50' : 50%,
'75' : 75%,
'100': 100%
) !default;
@mixin crispy__modifiers() {
/**
@ -54,36 +66,32 @@
font-style: italic !important;
}
.text-weight-light {
.text-light {
font-weight: lighter !important;
}
.text-weight-normal {
.text-normal {
font-weight: normal !important;
}
.text-weight-medium {
.text-medium {
font-weight: medium !important;
}
.text-weight-bold {
.text-bold {
font-weight: bolder !important;
}
.text-smaller {
font-size: 80% !important
}
@each $name, $font-size in $crispy__font-sizes {
.text-size-#{$name} {
font-size: $font-size * 0.9;
font-size: ($font-size * $crispy__xxs__multiplicator) !important;
@include crispy__media-md() {
font-size: $font-size;
font-size: $font-size !important;
}
@include crispy__media-xlg() {
font-size: $font-size * 1.1;
font-size: ($font-size * $crispy__xlg__multiplicator) !important;
}
}
}
@ -300,7 +308,7 @@
*
*/
@each $name, $width in $crispy__width {
@each $name, $width in $crispy__modifiers__width {
.width-#{$name} {
width: $width !important;
}
@ -320,37 +328,37 @@
padding: 0 !important;
}
@for $i from 0 through $crispy__spacing__steps {
@for $i from 0 through $crispy__modifiers__spacing__steps {
.margin-top-#{$i} {
margin-top: ($crispy__spacing * $i * 0.5) !important;
margin-top: ($crispy__modifiers__spacing * $i) !important;
}
.margin-left-#{$i} {
margin-left: ($crispy__spacing * $i * 0.5) !important;
margin-left: ($crispy__modifiers__spacing * $i) !important;
}
.margin-bottom-#{$i} {
margin-bottom: ($crispy__spacing * $i * 0.5) !important;
margin-bottom: ($crispy__modifiers__spacing * $i) !important;
}
.margin-right-#{$i} {
margin-right: ($crispy__spacing * $i * 0.5) !important;
margin-right: ($crispy__modifiers__spacing * $i) !important;
}
.padding-top-#{$i} {
padding-top: ($crispy__spacing * $i * 0.5) !important;
padding-top: ($crispy__modifiers__spacing * $i) !important;
}
.padding-left-#{$i} {
padding-left: ($crispy__spacing * $i * 0.5) !important;
padding-left: ($crispy__modifiers__spacing * $i) !important;
}
.padding-bottom-#{$i} {
padding-bottom: ($crispy__spacing * $i * 0.5) !important;
padding-bottom: ($crispy__modifiers__spacing * $i) !important;
}
.padding-right-#{$i} {
padding-right: ($crispy__spacing * $i * 0.5) !important;
padding-right: ($crispy__modifiers__spacing * $i) !important;
}
}
}

+ 341
- 0
src/_normalize.scss View File

@ -0,0 +1,341 @@
/*! 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;
}

+ 59
- 37
src/_variables.scss View File

@ -12,22 +12,36 @@
*
*/
// font
$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 * 0.9 !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 * 1.1 !default;
$crispy__font-size-xlg: $crispy__font-size * $crispy__xlg__multiplicator !default;
$crispy__font-weight: normal !default;
$crispy__golden-ratio: 1.618 !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: Arial, Helvetica, Neue Helvetica, sans-serif !default;
$crispy__font-family-monospace: Arial, Helvetica, Neue Helvetica, sans-serif !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;
$crispy__direction: ltr !default;
$crispy__font-sizes: (
'default' : $crispy__font-size,
'small' : $crispy__font-size * 0.8,
'medium' : $crispy__font-size * 1.1,
'large' : $crispy__font-size * 1.3,
'big' : $crispy__font-size * 1.5,
'mega' : $crispy__font-size * 1.8
) !default;
// colors
$crispy__color-primary: #f18f01 !default;
$crispy__color-secondary: #b3b2af !default;
@ -36,6 +50,11 @@ $crispy__color-warning: #f0ad4e !default;
$crispy__color-danger: #d9534f !default;
$crispy__color-info: #0090d4 !default;
$crispy__color-grey-light: hsl(0, 0%, 97%) !default;
$crispy__color-grey: hsl(0, 0%, 48%) !default;
$crispy__color-grey-dark: hsl(0, 0%, 29%) !default;
$crispy__color-white: white !default;
$crispy__color-text: #363636 !default;
$crispy__color-border: #dfdfdf !default;
$crispy__color-background: #ffffff !default;
@ -50,29 +69,31 @@ $crispy__color-link-active: $crispy__color-primary !default;
// colors as map
$crispy__colors: (
'primary' : $crispy__color-primary,
'secondary': $crispy__color-secondary,
'success' : $crispy__color-success,
'warning' : $crispy__color-warning,
'danger' : $crispy__color-danger,
'info' : $crispy__color-info
'primary' : $crispy__color-primary,
'secondary' : $crispy__color-secondary,
'success' : $crispy__color-success,
'warning' : $crispy__color-warning,
'danger' : $crispy__color-danger,
'info' : $crispy__color-info,
'grey' : $crispy__color-grey,
'grey-light' : $crispy__color-grey-light,
'grey-dark' : $crispy__color-grey-dark,
'white' : $crispy__color-white
) !default;
// spacing
$crispy__spacing: 1.25em !default;
$crispy__spacing__steps: 5 !default;
/**
* Padding & Margin
*
*/
$crispy__margin: 0 0 1em !default;
$crispy__padding: 0.8em 1.2em !default;
// font-sizes as map
$crispy__font-sizes: (
'default' : $crispy__font-size,
'small' : $crispy__font-size * 0.875,
'medium' : $crispy__font-size * 1.25,
'large' : $crispy__font-size * 1.5,
'big' : $crispy__font-size * 1.75,
'mega' : $crispy__font-size * 2
) !default;
// heading
/**
* Heading
*
*/
$crispy__heading__font-sizes: (
'h1': $crispy__font-size * 2.5,
'h2': $crispy__font-size * 2,
@ -84,14 +105,23 @@ $crispy__heading__font-sizes: (
$crispy__heading__font-weight: bold !default;
$crispy__heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
$crispy__heading__line-height: 1.2 !default;
$crispy__heading__margin: 0 0 0.5em !default;
$crispy__heading__margin: 0 0 0.3em !default;
/**
* Borders
*
*/
// borders
$crispy__border-radius: 3px !default;
$crispy__border: 1px solid $crispy__color-border !default;
// breakpoints
/**
* Breakpoints
*
*/
$crispy__xs : 576px !default;
$crispy__sm : 768px !default;
$crispy__md : 992px !default;
@ -102,12 +132,4 @@ $crispy__xlg: 1600px !default;
$crispy__z-index: (
'overlay': 90,
'modal' : 100
) !default;
// width
$crispy__width: (
'25' : 25%,
'50' : 50%,
'75' : 75%,
'100': 100%
) !default;

+ 9
- 9
src/components/_button.scss View File

@ -1,27 +1,27 @@
/**
* components: button
* components: button
*
* <a class="button" href="#">
* button
* </a>
*
* @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
*
*/
$crispy__button__padding: ($crispy__spacing * 0.5) $crispy__spacing !default;
$crispy__button__padding: 0.25em 1em 0.3em !default;
@mixin crispy__button() {
.button {
appearance: none;
position: relative;
display: inline-block;
text-decoration: none;
vertical-align: middle;
appearance: none;
padding: $crispy__button__padding;
&--wide {
width: 100%;
}
&:hover {
cursor: pointer;
text-decoration: none;


+ 13
- 15
src/components/_code.scss View File

@ -1,27 +1,25 @@
/**
* component: code
* component: code
*
* <pre class="code">
* <code>
* //
* </code>
* </pre>
* <pre class="code">
* <code>
* //
* </code>
* </pre>
*
* @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
*
*/
$crispy__code__font-family: monospace, monospace !default;
$crispy__code__padding: ($crispy__spacing * 0.5) $crispy__spacing !default;
$crispy__code__margin: 0 0 $crispy__spacing !default;
$crispy__code__border: 1px solid $crispy__color-border !default;
$crispy__code__background-color: #f9f9f9 !default;
$crispy__code__padding: $crispy__padding !default;
$crispy__code__margin: $crispy__margin !default;
$crispy__code__border: $crispy__border !default;
$crispy__code__background-color: $crispy__color-grey-light !default;
@mixin crispy__code() {
.code {
font-family: $crispy__code__font-family;
white-space: pre;
display: block;


+ 4
- 6
src/components/_field.scss View File

@ -13,9 +13,8 @@
*
*/
$crispy__field__margin: 0 0 $crispy__spacing 0 !default;
$crispy__field__border: 1px solid $crispy__color-secondary !default;
$crispy__field__margin: $crispy__margin !default;
$crispy__field__border: $crispy__border !default;
$crispy__field__color--valid: $crispy__color-success !default;
$crispy__field__color--error: $crispy__color-danger !default;
@ -28,11 +27,10 @@ $crispy__field__choice__checked__color: $crispy__color-success !default;
$crispy__field__choice__unchecked__color: $crispy__color-danger !default;
$crispy__field__input__font-size: $crispy__font-size !default;
$crispy__field__input__padding: toEm(6px 8px) !default;
$crispy__field__input__padding: 6px 8px !default;
$crispy__field__input__color: $crispy__color-text !default;
$crispy__field__select__padding: 0.25em !default;
$crispy__field__panel__padding: 0.25em !default;
$crispy__field__select__background-color: white !default;
@ -172,7 +170,7 @@ $crispy__field__select__border: $crispy__border !default;
}
+ .field__label + .field__panel {
margin: $crispy__spacing 0 0 0;
margin: 0.3em 0 0 0;
}
}


+ 10
- 10
src/components/_group.scss View File

@ -1,20 +1,20 @@
/**
* component: group
* component: group
*
* <nav>
* <ul class="group group--horizontal">
* <li class="group__item"></li>
* <ul>
* </nav>
* <nav>
* <ul class="group group--horizontal">
* <li class="group__item"></li>
* <ul>
* </nav>
*
* @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
*
*/
$crispy__group__character: '/' !default;
$crispy__group__character__margin: 0 $crispy__spacing 0 !default;
$crispy__group__character__margin: 0 0.3em 0 !default;
@mixin crispy__group() {
.group {


+ 6
- 8
src/components/_hero.scss View File

@ -1,16 +1,14 @@
/**
* component: hero
* component: hero
*
* background-size is as default: cover - Resize the background image to cover the entire container
* background-size is as default: cover - Resize the background image to cover the entire container
*
* <div class="hero" style="width: value; height: value; background-image: url(path)">
* <div class="hero" style="width: value; height: value; background-image: url(path)"></div>
*
* </div>
*
*
* @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
*
*/


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

@ -1,20 +1,23 @@
/**
* component: icon
* component: icon
*
* <svg class="icon">
* //
* </svg>
*
*
* @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
*
*/
$crispy__icon__width: 1.125em !default;
$crispy__icon__size: 1.1em !default;
$crispy__icon__offset: -0.2em !default;
@mixin crispy__icon {
.icon {
width: $crispy__icon__width;
height: $crispy__icon__width;
width: $crispy__icon__size;
height: $crispy__icon__size;
max-height: 100%;
max-width: 100%;
@ -29,9 +32,10 @@ $crispy__icon__width: 1.125em !default;
}
}
@each $name, $color in $crispy__colors {
.icon-color-#{$name} {
fill: $color !important;
// workaround for buttons and a
.button, a {
.icon {
margin: $crispy__icon__offset 0 0;
}
}


+ 5
- 8
src/components/_media.scss View File

@ -1,19 +1,16 @@
/**
* helper: media
* components: media
*
* for img & video
* for img & video
*
*
* @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
*
*/
@mixin crispy__media() {
.img-wide {
width: 100%;
}
.img-responsive {
display: block;
max-width: 100%;


+ 10
- 10
src/components/_modal.scss View File

@ -1,21 +1,21 @@
/**
* component: modal
* components: modal
*
* <div class="modal">
* <div class="panel">
* <div class="modal">
* <div class="panel">
*
* </div>
* </div>
* </div>
* </div>
*
* @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
*
*/
$crispy__modal__margin: 1em !default;
$crispy__modal__max-width: 50% !default; // @TODO add responsive
$crispy__modal__margin: ($crispy__spacing * 2) !default;
$crispy__modal__margin: 0.75em !default;
$crispy__modal__z-index: zIndex('modal') !default;
@mixin crispy__modal {
@ -24,8 +24,8 @@ $crispy__modal__z-index: zIndex('modal') !default;
z-index: $crispy__modal__z-index;
width: 100%;
margin: 0;
max-width: $crispy__modal__max-width;
margin: 0;
top: 50%;
left: 50%;


+ 7
- 6
src/components/_overlay.scss View File

@ -1,12 +1,13 @@
/**
* component: overlay
* components: overlay
*
* <div class="overlay">
* </div>
* <div class="overlay">
*
* @author Björn Hase
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
* </div>
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/


+ 11
- 10
src/components/_panel.scss View File

@ -1,23 +1,24 @@
/**
* componente: panel
* components: panel
*
* <div class="panel">
* <div class="panel__inner">
* <div class="panel">
* <div class="panel__inner">
*
* </div>
* </div>
* </div>
* </div>
*
* @author Björn Hase
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
* @author Björn Hase
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
*
*/
$crispy__panel__padding: ($crispy__spacing * 0.5) $crispy__spacing !default;
$crispy__panel__padding: $crispy__padding !default;
$crispy__panel__background-color: $crispy__color-grey-light !default;
@mixin crispy__panel {
.panel {
background-color: $crispy__color-panel;
background-color: $crispy__panel__background-color;
&__inner {
padding: $crispy__panel__padding;


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

@ -1,22 +1,22 @@
/**
* componente: progress
* components: progress
*
* <div class="progress">
* <div class="progress__inner" style="width: 80%">
* <div class="progress">
* <div class="progress__inner" style="width: 80%">
*
* </div>
* </div>
* </div>
* </div>
*
* @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
*
*/
$crispy__progress__height: 30px;
$crispy__progress__background-color: $crispy__color-primary;
$crispy__progress__border__width: 1px;
$crispy__progress__border__color: $crispy__color-border;
$crispy__progress__height: 30px !default;
$crispy__progress__background-color: $crispy__color-primary !default;
$crispy__progress__border__width: 1px !default;
$crispy__progress__border__color: $crispy__color-border !default;
@mixin crispy__progress {
.progress {


+ 21
- 22
src/components/_table.scss View File

@ -1,35 +1,34 @@
/**
* componente: table
* components: table
*
* <table class="table table--striped">
* <thead>
* <tr>
* <th>name</th>
* <th>age</th>
* </tr>
* </thead>
* <tbody>
* <tr>
* <td>The Shawshank Redemption</td>
* <td>12</td>
* </tr>
* </tbody>
* </table>
* <table class="table table--striped">
* <thead>
* <tr>
* <th>name</th>
* <th>age</th>
* </tr>
* </thead>
* <tbody>
* <tr>
* <td>The Shawshank Redemption</td>
* <td>12</td>
* </tr>
* </tbody>
* </table>
*
*
* @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
*
*/
$crispy__table__padding: ($crispy__spacing * 0.5) ($crispy__spacing * 0.75) !default;
$crispy__table__padding: $crispy__padding !default;
$crispy__table__td__border: 1px solid lighten($crispy__color-text, 40%) !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: lighten($crispy__color-text, 75%) !default;
$crispy__table__striped__background-color: $crispy__color-grey-light !default;
@mixin crispy__table() {
.table {


src/crispy_all.scss → src/crispy-all.scss View File

@ -1,7 +1,6 @@
@import
'crispy';
@include crispy__core();
@include crispy__modifiers();
@include crispy__button();
@include crispy__code();

src/crispy_minimal.scss → src/crispy-minimal.scss View File

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

+ 2
- 5
src/crispy.scss View File

@ -1,12 +1,7 @@
@import
'normalize',
'functions',
'variables',
'mixins',
'core',
'modifiers',
'components/button',
@ -21,3 +16,5 @@
'components/progress',
'components/table',
'components/field';
@include crispy__core();

+ 0
- 16
src/example/components/_button.scss View File

@ -1,16 +0,0 @@
/**
* component: button
*
*
* @author Björn Hase
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
*
*/
@mixin components__button()
{
.button {
}
}

+ 0
- 14
src/example/site/_footer.scss View File

@ -1,14 +0,0 @@
/**
* component: footer
*
*
* @author Björn Hase
*
*/
@mixin site__footer()
{
.footer {
}
}

+ 16
- 2
src/example/site/_header.scss View File

@ -11,17 +11,31 @@
@mixin site__header() {
.header {
text-align: center;
max-width: 100%;
a {
text-decoration: none;
.icon {
font-size: 4rem;
.icon--big {
font-size: 6rem;
}
&:hover {
color: $crispy__color-primary;
}
}
.group__item {
margin-right: 10px;
}
&--fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 91;
}
}
}

+ 2
- 8
src/example/styles.scss View File

@ -1,15 +1,9 @@
@import
'reflex',
'../crispy_all',
'../crispy-all',
'site/header',
'site/footer',
'components/button',
'components/nav',
'templates/home';
@include site__header();
@ -74,6 +68,6 @@
margin: 0 0 0.5em;
.icon {
font-size: 4rem !important;
font-size: 3rem !important;
}
}

+ 7
- 20
webpack.mix.js View File

@ -11,27 +11,14 @@ let mix = require('laravel-mix');
|
*/
mix.sass('src/crispy_all.scss', 'dist/crispy_all.css', {
sassOptions: {
includePaths: [
'node_modules/normalize-scss/sass'
]
}
})
.sass('src/crispy_minimal.scss', 'dist/crispy_minimal.css', {
sassOptions: {
includePaths: [
'node_modules/normalize-scss/sass'
]
}
})
mix.sass('src/crispy-all.scss', 'dist/crispy-all.css')
.sass('src/crispy-minimal.scss', 'dist/crispy-minimal.css')
.sass('src/example/styles.scss', 'dist/example/styles.css', {
sassOptions: {
includePaths: [
'node_modules/normalize-scss/sass',
'node_modules/reflex-grid/scss'
]
}
sassOptions: {
includePaths: [
'node_modules/reflex-grid/scss'
]
}
})
.copy('assets/iconmoon/symbol-defs.svg', 'dist/example')
.options({


Write Preview
Loading…
Cancel
Save