diff --git a/LICENSE b/LICENSE index 816519a..c0ffc28 100644 --- a/LICENSE +++ b/LICENSE @@ -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 diff --git a/README.md b/README.md index 5a74fe5..0c02ad7 100644 --- a/README.md +++ b/README.md @@ -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,Components | Crispy CSS
Crispy CSS

Components

Button

SCSS:

$crispy__button__font-family: $crispy__font-family;
+Components | Crispy CSS
 Crispy CSS
Components
Button
SCSS:
$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;
diff --git a/dist/example/core.html b/dist/example/core.html
index cef23a2..77829a0 100644
--- a/dist/example/core.html
+++ b/dist/example/core.html
@@ -1 +1 @@
-Core | Crispy CSS
 Crispy CSS
Core
Normalize
a
Link
Typography
Heading
Heading h1
Heading h2
Heading h3
Heading h4
Heading h5
Heading h6
abbr
Glossier viral occupy mixtape pok pok cornhole, vape affogato hella knausgaard thundercats
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.
hr
paragraph
Glossier viral occupy mixtape pok pok.
mark
Pug before they four loko Deep v bespoke
list
  • item 1
  • item 2
    • child item 1
    • child item 2
  1. item 1
  2. item 2
defined title 1
defined item 1

\ No newline at end of file
+Core | Crispy CSS
 Crispy CSS
Core
Normalize
a
Link
Typography
Heading
Heading h1
Heading h2
Heading h3
Heading h4
Heading h5
Heading h6
abbr
Glossier viral occupy mixtape pok pok cornhole, vape affogato hella knausgaard thundercats
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.
hr
paragraph
Glossier viral occupy mixtape pok pok.
mark
Pug before they four loko Deep v bespoke
list
  • item 1
  • item 2
    • child item 1
    • child item 2
  1. item 1
  2. item 2
defined title 1
defined item 1

\ No newline at end of file
diff --git a/dist/example/functions.html b/dist/example/functions.html
index e788ba2..2fec6a3 100644
--- a/dist/example/functions.html
+++ b/dist/example/functions.html
@@ -1,4 +1,4 @@
-Functions | Crispy CSS
 Crispy CSS
Functions
getValue($map)
Returns a value from a map if key "default" found.
stripUnit($value)
Returns value without unit.
SCSS:
stripUnit(10px);
zIndex($name)
Returns value from $crispy__z-index.
SCSS:
$crispy__z-index: (
+Functions | Crispy CSS
 Crispy CSS
Functions
getValue($map)
Returns a value from a map if key "default" found.
stripUnit($value)
Returns value without unit.
SCSS:
stripUnit(10px);
zIndex($name)
Returns value from $crispy__z-index.
SCSS:
$crispy__z-index: (
     'overlay': 90,
     'modal'  : 100
 );
zIndex('modal');

\ No newline at end of file
diff --git a/dist/example/getting-started.html b/dist/example/getting-started.html
index 608cfcd..28bfbad 100644
--- a/dist/example/getting-started.html
+++ b/dist/example/getting-started.html
@@ -1,4 +1,4 @@
-Getting started! | Crispy CSS
 Crispy CSS
Getting started!
Installation
npm install crispy-css
+Getting started! | Crispy CSS
 Crispy CSS
Getting started!
Installation
npm install crispy-css
 
SCSS
@import
     "node_modules/crispy-css/src/crispy";
 
Now include Components and Helpers you need.
@include crispy__helpers();
diff --git a/dist/example/helpers.html b/dist/example/helpers.html
index 8989e99..bd39689 100644
--- a/dist/example/helpers.html
+++ b/dist/example/helpers.html
@@ -1,4 +1,4 @@
-Helpers | Crispy CSS
 Crispy CSS
Helpers
Border
.round
.radiusless
.bordered
.rounded
.borderless
Margin / Padding
Padding and margin-left, -top, -right and -bottom. The Classes Paddingless and Marginless sets padding and margin in each direction to zero.
SCSS:
$crispy__helpers__spacing-gap: 8px;
+Helpers | Crispy CSS
 Crispy CSS
Helpers
Border
.round
.radiusless
.bordered
.rounded
.borderless
Margin / Padding
Padding and margin-left, -top, -right and -bottom. The Classes Paddingless and Marginless sets padding and margin in each direction to zero.
SCSS:
$crispy__helpers__spacing-gap: 8px;
 $crispy__helpers__spacing-steps: 6;
 $crispy__helpers__spacing-max-steps: 3;
 $crispy__helpers__spacing-breakpoints: (
diff --git a/dist/example/img/gaming-circus.jpg b/dist/example/img/gaming-circus.jpg
index 17f1e77..4ec029b 100644
Binary files a/dist/example/img/gaming-circus.jpg and b/dist/example/img/gaming-circus.jpg differ
diff --git a/dist/example/img/tentakelfabrik.jpg b/dist/example/img/tentakelfabrik.jpg
index e1d08a2..8bc0be8 100644
Binary files a/dist/example/img/tentakelfabrik.jpg and b/dist/example/img/tentakelfabrik.jpg differ
diff --git a/dist/example/img/trinkkofi.jpg b/dist/example/img/trinkkofi.jpg
index 1b52e57..4d65862 100644
Binary files a/dist/example/img/trinkkofi.jpg and b/dist/example/img/trinkkofi.jpg differ
diff --git a/dist/example/mixins.html b/dist/example/mixins.html
index 3fddde0..16690ae 100644
--- a/dist/example/mixins.html
+++ b/dist/example/mixins.html
@@ -1,4 +1,4 @@
-Mixins | Crispy CSS
 Crispy CSS
Mixins
crispy__clearfix()
Clear Floats.
crispy__clearlist()
Resets Style for a List-Element
crispy__media-*, crispy__media-*-only
For each Breakpoint there is a Mixin as an Media Query.
@include crispy__media-xs() {
+Mixins | Crispy CSS
 Crispy CSS
Mixins
crispy__clearfix()
Clear Floats.
crispy__clearlist()
Resets Style for a List-Element
crispy__media-*, crispy__media-*-only
For each Breakpoint there is a Mixin as an Media Query.
@include crispy__media-xs() {
 
 }
 
diff --git a/src/html/page.html.ejs b/src/html/page.html.ejs
index fca1420..6fa728c 100644
--- a/src/html/page.html.ejs
+++ b/src/html/page.html.ejs
@@ -5,7 +5,7 @@
     
     
     <%= htmlWebpackPlugin.options.title %> | Crispy CSS
-    
+    
     
     
 
diff --git a/src/html/partials/getting-started.html b/src/html/partials/getting-started.html
index 66577df..32aa55d 100644
--- a/src/html/partials/getting-started.html
+++ b/src/html/partials/getting-started.html
@@ -1,4 +1,4 @@
-

+

     Installation
 

 

diff --git a/src/html/partials/helpers.html b/src/html/partials/helpers.html
index 7c06723..85e1fea 100644
--- a/src/html/partials/helpers.html
+++ b/src/html/partials/helpers.html
@@ -1,5 +1,5 @@
 
-
Border

+
Border

 

 
 

@@ -20,7 +20,7 @@
 

 

     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.
 

 
 
SCSS:

diff --git a/webpack.mix.js b/webpack.mix.js
index 84ad016..df55789 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -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