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

adding

master v3.0.0
Björn 4 years ago
parent
9f304207fb
commit
3c3da655ee
15 changed files with 18 additions and 74 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      LICENSE
  2. +1
    -63
      README.md
  3. +1
    -1
      dist/example/components.html
  4. +1
    -1
      dist/example/core.html
  5. +1
    -1
      dist/example/functions.html
  6. +1
    -1
      dist/example/getting-started.html
  7. +1
    -1
      dist/example/helpers.html
  8. BIN
      dist/example/img/gaming-circus.jpg
  9. BIN
      dist/example/img/tentakelfabrik.jpg
  10. BIN
      dist/example/img/trinkkofi.jpg
  11. +1
    -1
      dist/example/mixins.html
  12. +1
    -1
      src/html/page.html.ejs
  13. +1
    -1
      src/html/partials/getting-started.html
  14. +2
    -2
      src/html/partials/helpers.html
  15. +6
    -0
      webpack.mix.js

+ 1
- 1
LICENSE View File

@ -1,6 +1,6 @@
MIT License
Copyright (c) 2017 Björn Hase
Copyright (c) 2017 Björn Hase, Tentakelfabrik
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal


+ 1
- 63
README.md View File

@ -6,66 +6,4 @@
npm install crispy-css
```
## How it works
### SCSS
```
@import
"crispy";
```
Now include Mixins you need. Components and Modifiziers only works if you include them,</
```
@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__table();
```
For Custom Variables add a File before importing Crispy,
```
@import
"variables",
"crispy";
```
If you need all, mixins will be included,
```
@import
"crispy_all";
```
Only need Core and Modifiziers?
```
@import
"crispy_minimal";
```
### CSS
For using CSS you can use crispy.css for all Styles or crispy_mininmal.css without Components.
## Example
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.
### Site
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.
### Templates
Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components.
For Documentation visit [https://crispy-css/getting-started](https://crispy-css/getting-started)

+ 1
- 1
dist/example/components.html View File

@ -1,4 +1,4 @@
<!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 class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><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-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Components</h1></header><h2 class="h3 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;
<!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="Components are optional, the have a basic build and should be extended."><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><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-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Components</h1></header><h2 class="h3 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;


+ 1
- 1
dist/example/core.html View File

@ -1 +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 class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><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-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title 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><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></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><li class="group__item"><a class="text-color-white" href="https://github.com/tentakelfabrik/crispy-css" target="_blank"><svg class="icon" alt="github"><use xlink:href="symbol-defs.svg#icon-github"/></svg></a></li></ul><p class="margin-top-1 margin-bottom-0">Made with euphoria by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html>
<!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="The Core have the basic Styles for Typography, Heading and also Normalize."><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><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-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title 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><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></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><li class="group__item"><a class="text-color-white" href="https://github.com/tentakelfabrik/crispy-css" target="_blank"><svg class="icon" alt="github"><use xlink:href="symbol-defs.svg#icon-github"/></svg></a></li></ul><p class="margin-top-1 margin-bottom-0">Made with euphoria by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html>

+ 1
- 1
dist/example/functions.html View File

@ -1,4 +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 class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><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-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Functions</h1></header><h2 class="h3 margin-bottom-1">getValue($map)</h2><hr class="marginless margin-bottom-2"/><p>Returns a value from a map if key "default" found.</p><h2 class="h3 margin-top-3 margin-bottom-1">stripUnit($value)</h2><hr class="marginless margin-bottom-2"/><p>Returns value without unit.</p><h3 class="h4">SCSS:</h3><pre class="code"><code>stripUnit(10px);</code></pre><h2 class="h3 margin-top-3 margin-bottom-1">zIndex($name)</h2><hr class="marginless margin-bottom-2"/><p>Returns value from $crispy__z-index.</p><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__z-index: (
<!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="Functions helps to handle variables."><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><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-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Functions</h1></header><h2 class="h3 margin-bottom-1">getValue($map)</h2><hr class="marginless margin-bottom-2"/><p>Returns a value from a map if key "default" found.</p><h2 class="h3 margin-top-3 margin-bottom-1">stripUnit($value)</h2><hr class="marginless margin-bottom-2"/><p>Returns value without unit.</p><h3 class="h4">SCSS:</h3><pre class="code"><code>stripUnit(10px);</code></pre><h2 class="h3 margin-top-3 margin-bottom-1">zIndex($name)</h2><hr class="marginless margin-bottom-2"/><p>Returns value from $crispy__z-index.</p><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__z-index: (
'overlay': 90,
'modal' : 100
);</code></pre><pre class="code"><code>zIndex('modal');</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><li class="group__item"><a class="text-color-white" href="https://github.com/tentakelfabrik/crispy-css" target="_blank"><svg class="icon" alt="github"><use xlink:href="symbol-defs.svg#icon-github"/></svg></a></li></ul><p class="margin-top-1 margin-bottom-0">Made with euphoria by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html>

+ 1
- 1
dist/example/getting-started.html View File

@ -1,4 +1,4 @@
<!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 class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><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-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title 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
<!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="Start with Crispy CSS, here you find Variables to configure all values. There is also a short overview for the examples."><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><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-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Getting started!</h1></header><h2 class="h2 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
"node_modules/crispy-css/src/crispy";
</code></pre><p>Now include Components and Helpers you need.</p><pre class="code"><code>@include crispy__helpers();


+ 1
- 1
dist/example/helpers.html View File

@ -1,4 +1,4 @@
<!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Helpers | 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 class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><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-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Helpers</h1></header><h2 class="h3 margin-top-3 margin-bottom-1">Border</h2><hr class="marginless margin-bottom-2"/><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><h2 class="h3 margin-top-3 margin-bottom-1">Margin / Padding</h2><hr class="marginless margin-bottom-2"/><p>Padding and margin-left, -top, -right and -bottom. The Classes Paddingless and Marginless sets padding and margin in each direction to zero.</p><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__helpers__spacing-gap: 8px;
<!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Helpers | Crispy CSS</title><meta name="description" content="CSS-Classes that can be use to override other Styles, also used if there is no need to style the element."><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><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-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Helpers</h1></header><h2 class="h3 margin-bottom-1">Border</h2><hr class="marginless margin-bottom-2"/><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><h2 class="h3 margin-top-3 margin-bottom-1">Margin / Padding</h2><hr class="marginless margin-bottom-2"/><p>Padding and margin-left, -top, -right and -bottom. The Classes Paddingless and Marginless sets padding and margin in each direction to zero.</p><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__helpers__spacing-gap: 8px;
$crispy__helpers__spacing-steps: 6;
$crispy__helpers__spacing-max-steps: 3;
$crispy__helpers__spacing-breakpoints: (


BIN
dist/example/img/gaming-circus.jpg View File

Before After
Width: 1000  |  Height: 563  |  Size: 69 KiB Width: 1200  |  Height: 600  |  Size: 73 KiB

BIN
dist/example/img/tentakelfabrik.jpg View File

Before After
Width: 1906  |  Height: 899  |  Size: 105 KiB Width: 1200  |  Height: 600  |  Size: 53 KiB

BIN
dist/example/img/trinkkofi.jpg View File

Before After
Width: 1000  |  Height: 563  |  Size: 59 KiB Width: 1200  |  Height: 600  |  Size: 60 KiB

+ 1
- 1
dist/example/mixins.html View File

@ -1,4 +1,4 @@
<!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 class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><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-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Mixins</h1></header><h2 class="h3 margin-bottom-1">crispy__clearfix()</h2><hr class="marginless margin-bottom-2"/><p>Clear Floats.</p><h2 class="h3 margin-top-3 margin-bottom-1">crispy__clearlist()</h2><hr class="marginless margin-bottom-2"/><p>Resets Style for a List-Element</p><h2 class="h3 margin-top-3 margin-bottom-1">crispy__media-*, crispy__media-*-only</h2><hr class="marginless margin-bottom-2"/><p>For each Breakpoint there is a Mixin as an Media Query.</p><pre class="code"><code>@include crispy__media-xs() {
<!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="Most Mixins will be used to handle Breakpoints and add Styles."><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><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-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Mixins</h1></header><h2 class="h3 margin-bottom-1">crispy__clearfix()</h2><hr class="marginless margin-bottom-2"/><p>Clear Floats.</p><h2 class="h3 margin-top-3 margin-bottom-1">crispy__clearlist()</h2><hr class="marginless margin-bottom-2"/><p>Resets Style for a List-Element</p><h2 class="h3 margin-top-3 margin-bottom-1">crispy__media-*, crispy__media-*-only</h2><hr class="marginless margin-bottom-2"/><p>For each Breakpoint there is a Mixin as an Media Query.</p><pre class="code"><code>@include crispy__media-xs() {
}


+ 1
- 1
src/html/page.html.ejs View File

@ -5,7 +5,7 @@
<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="description" content="<%= htmlWebpackPlugin.options.description %>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>


+ 1
- 1
src/html/partials/getting-started.html View File

@ -1,4 +1,4 @@
<h2 class="margin-bottom-1">
<h2 class="h2 margin-bottom-1">
Installation
</h2>
<hr class="marginless margin-bottom-2" />


+ 2
- 2
src/html/partials/helpers.html View File

@ -1,5 +1,5 @@
<!-- border -->
<h2 class="h3 margin-top-3 margin-bottom-1">Border</h2>
<h2 class="h3 margin-bottom-1">Border</h2>
<hr class="marginless margin-bottom-2" />
<div class="panel panel__inner margin-bottom-1 bordered">
@ -20,7 +20,7 @@
<hr class="marginless margin-bottom-2" />
<p>
Padding and margin-left, -top, -right and -bottom. The Classes Paddingless and Marginless sets padding and margin in each
direction to zero.
direction to zero.
</p>
<h3 class="h4">SCSS:</h3>


+ 6
- 0
webpack.mix.js View File

@ -37,6 +37,7 @@ mix.webpackConfig({
filename: 'dist/example/getting-started.html',
template: 'src/html/page.html.ejs',
title: 'Getting started!',
description: 'Start with Crispy CSS, here you find Variables to configure all values. There is also a short overview for the examples.',
body: fs.readFileSync(__dirname + '/src/html/partials/getting-started.html'),
footer: fs.readFileSync(__dirname + '/src/html/partials/footer.html'),
inject: false
@ -45,6 +46,7 @@ mix.webpackConfig({
filename: 'dist/example/core.html',
template: 'src/html/page.html.ejs',
title: 'Core',
description: 'The Core have the basic Styles for Typography, Heading and also Normalize.',
body: fs.readFileSync(__dirname + '/src/html/partials/core.html'),
footer: fs.readFileSync(__dirname + '/src/html/partials/footer.html'),
inject: false
@ -53,6 +55,7 @@ mix.webpackConfig({
filename: 'dist/example/components.html',
template: 'src/html/page.html.ejs',
title: 'Components',
description: 'Components are optional, the have a basic build and should be extended.',
body: fs.readFileSync(__dirname + '/src/html/partials/components.html'),
footer: fs.readFileSync(__dirname + '/src/html/partials/footer.html'),
inject: false
@ -61,6 +64,7 @@ mix.webpackConfig({
filename: 'dist/example/helpers.html',
template: 'src/html/page.html.ejs',
title: 'Helpers',
description: 'CSS-Classes that can be use to override other Styles, also used if there is no need to style the element.',
body: fs.readFileSync(__dirname + '/src/html/partials/helpers.html'),
footer: fs.readFileSync(__dirname + '/src/html/partials/footer.html'),
inject: false
@ -69,6 +73,7 @@ mix.webpackConfig({
filename: 'dist/example/mixins.html',
template: 'src/html/page.html.ejs',
title: 'Mixins',
description: 'Most Mixins will be used to handle Breakpoints and add Styles.',
body: fs.readFileSync(__dirname + '/src/html/partials/mixins.html'),
footer: fs.readFileSync(__dirname + '/src/html/partials/footer.html'),
inject: false
@ -77,6 +82,7 @@ mix.webpackConfig({
filename: 'dist/example/functions.html',
template: 'src/html/page.html.ejs',
title: 'Functions',
description: 'Functions helps to handle variables.',
body: fs.readFileSync(__dirname + '/src/html/partials/functions.html'),
footer: fs.readFileSync(__dirname + '/src/html/partials/footer.html'),
inject: false


Write Preview
Loading…
Cancel
Save