diff --git a/README.md b/README.md
index 168192c..0227f71 100644
--- a/README.md
+++ b/README.md
@@ -1,77 +1,50 @@
# cripsy-boilerplate
-Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions.
-This Boilerplate uses
+Flat Sass Boilerplate to give you a amount of Basic Settings, Components, Helpers,
+Mixins and Functions. It uses also the following Libraries,
-* normalize.css /
-* reflex-grid /
+* normalize.css / (https://necolas.github.io/normalize.css/)[https://necolas.github.io/normalize.css/]
+* reflex-grid / (http://reflexgrid.com/docs/)[http://reflexgrid.com/docs/]
-# media queries
+Many Boilerplates and also Frameworks, are trying to hard adding styles that
+are most time will be overwritten to make it work for you. This causes a loss in
+Performance and more Fighting with the Framework and the Documentation.
-The queries are only
+## Coding Style
-```
-@include crispy__media-xs() {
-
-}
-```
-
-```
-npm install crispy-boilerplate --save
-```
-
-## Components
-
-There a few Components, some are also provide a Closure to adding additional Styles.
-
-### align
-
-Additional Styles for modificators for align text, floating and centering elements.
-
-### body
-
-Styles for Body, including Format for Fonts and Colors.
-
-### button
-
-Styles for Buttons.
-
-### heading
+The Boilerplate uses as Coding Style (http://getbem.com/)[BEM], but as a more
+simpler idea of it. One of the Benefits of BEM is that you create Components and
+can reuse them. But one the other hand it can be really Strange if you overthinking it.
-Styling h1-h6 and create also CSS-Classes with same name.
+## Not Fancy but Small
-### icon
+Components are created to give you a Structure and a Basic set of Styles and
+not that they look fancy. The Idea is to extend each Compontent and save up
+a Bunch of CSS Code, and so get more Performance and less Errors.
+Of Course is really Fancy to get more Performance.
-Styles to use SVG as Icons.
+## Only Include if you need it
-### list
+Components and Helpers are organizes as Mixins, that makes it a little easier to
+add. Also it can be used to create multiples css files for each single site you
+need on a site oder
-Additional Styles for Lists and modificators.
-
-### margin
-
-Additional Styles for modificators to margin-top and margin-bottom.
-
-### normalize
-
-Normalizing for a few Elements.
-
-### text-colors
-
-Creates text-colors modificators from a
-
-## Functions
-
-### pxToEm, pxToRem
+## Getting Started
+### Installation
+```
+npm install crispy-boilerplate
+```
-Function to convert from px to em or rem.
+```
+@import "crispy";
+```
-## Mixins
+```
-### clearfix
+```
-Styles for clearfix.
-### font-size
+### npm
+### Example
-Add font-size with fallback.
+You find a Working Example i
diff --git a/dest/index.html b/dest/index.html
index 0a21958..e5cf3da 100644
--- a/dest/index.html
+++ b/dest/index.html
@@ -129,12 +129,25 @@
Sites also have partials like header and footer, they can put into the directory "site".
+
+
+
+ To Include the Framework simple import "cripsy", each component or helper is a mixin
+
+ There are shortcuts for components and helpers to include all at once.
+
+ Import Simple "crispy.scss",
+
+
Get Started
npm install crispy-boilerplate
+
+ Import "crispy.scss"
+
diff --git a/package.json b/package.json
index 1cda916..27dfdd3 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
"license": "MIT",
"dependencies": {
"cash-dom": "^1.3.7",
- "normalize.css": "^7.0.0",
+ "normalize.css": "^8.0.0",
"reflex-grid": "^2.0.1"
},
"devDependencies": {
@@ -36,7 +36,7 @@
"build": "npm run css:build && npm run svg:build",
"css:build": "npm run css:clean && npm run css:scss && npm run css:postcss && npm run css:minify",
"css:clean": "rimraf $npm_package_config_dist_dir/css/*",
- "css:scss": "node-sass --include-path $npm_package_config_normalize --include-path $npm_package_config_reflex_grid $npm_package_config_src_dir/scss/example.scss $npm_package_config_build_dir/css/styles.css",
+ "css:scss": "node-sass --include-path $npm_package_config_normalize --include-path $npm_package_config_reflex_grid $npm_package_config_src_dir/example/example.scss $npm_package_config_build_dir/css/styles.css",
"css:postcss": "postcss $npm_package_config_dest_dir/css/*.css --use autoprefixer -d $npm_package_config_dest_dir/css/",
"css:minify": "cleancss $npm_package_config_build_dir/css/styles.css > $npm_package_config_dest_dir/css/styles.css",
"svg:build": "npm run svg:clean && npm run svg:copy && npm run svg:optimize && npm run svg:minify",
diff --git a/src/scss/example/components/_button.scss b/src/example/components/_button.scss
similarity index 100%
rename from src/scss/example/components/_button.scss
rename to src/example/components/_button.scss
diff --git a/src/scss/example/components/_nav.scss b/src/example/components/_nav.scss
similarity index 100%
rename from src/scss/example/components/_nav.scss
rename to src/example/components/_nav.scss
diff --git a/src/scss/example.scss b/src/example/example.scss
similarity index 84%
rename from src/scss/example.scss
rename to src/example/example.scss
index 7afdc84..fb4ea98 100644
--- a/src/scss/example.scss
+++ b/src/example/example.scss
@@ -1,6 +1,14 @@
@import
- 'crispy',
- 'example/example';
+ '../scss/crispy',
+
+ 'site/container',
+ 'site/footer',
+ 'site/header',
+
+ 'components/button',
+ 'components/nav',
+
+ 'templates/home';
// components
@include crispy__button();
@@ -12,7 +20,6 @@
@include crispy__modal();
@include crispy__panel();
@include crispy__table();
-
@include crispy__field();
@include crispy__field__text();
@include crispy__field__checkbox();
diff --git a/src/scss/example/site/_container.scss b/src/example/site/_container.scss
similarity index 100%
rename from src/scss/example/site/_container.scss
rename to src/example/site/_container.scss
diff --git a/src/scss/example/site/_footer.scss b/src/example/site/_footer.scss
similarity index 100%
rename from src/scss/example/site/_footer.scss
rename to src/example/site/_footer.scss
diff --git a/src/scss/example/site/_header.scss b/src/example/site/_header.scss
similarity index 100%
rename from src/scss/example/site/_header.scss
rename to src/example/site/_header.scss
diff --git a/src/scss/example/templates/_home.scss b/src/example/templates/_home.scss
similarity index 100%
rename from src/scss/example/templates/_home.scss
rename to src/example/templates/_home.scss
diff --git a/src/scss/components/components.scss b/src/scss/components/components.scss
index 76d1709..b525c08 100644
--- a/src/scss/components/components.scss
+++ b/src/scss/components/components.scss
@@ -9,3 +9,28 @@
'panel',
'table',
'field/field';
+
+/**
+ * shortcut to adding all components
+ *
+ *
+ */
+@mixin cripsy__components()
+{
+ @include crispy__button();
+ @include crispy__code();
+ @include crispy__group();
+ @include crispy__heading();
+ @include crispy__hero();
+ @include crispy__icon();
+ @include crispy__modal();
+ @include crispy__panel();
+ @include crispy__table();
+ @include crispy__field();
+ @include crispy__field__text();
+ @include crispy__field__checkbox();
+ @include crispy__field__radio();
+ @include crispy__field__select();
+ @include crispy__field__panel();
+ @include crispy__field__label();
+}
diff --git a/src/scss/_crispy.scss b/src/scss/crispy.scss
similarity index 100%
rename from src/scss/_crispy.scss
rename to src/scss/crispy.scss
diff --git a/src/scss/example/example.scss b/src/scss/example/example.scss
deleted file mode 100644
index af6071b..0000000
--- a/src/scss/example/example.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import
- 'site/container',
- 'site/footer',
- 'site/header',
-
- 'components/button',
- 'components/nav',
-
- 'templates/home';
diff --git a/src/scss/helpers/helpers.scss b/src/scss/helpers/helpers.scss
index e057201..ef398bb 100644
--- a/src/scss/helpers/helpers.scss
+++ b/src/scss/helpers/helpers.scss
@@ -4,3 +4,17 @@
'media',
'text',
'width';
+
+/**
+ * shortcut to include all helpers
+ *
+ *
+ */
+@mixin crispy__helpers()
+{
+ @include crispy__float();
+ @include crispy__margin();
+ @include crispy__media();
+ @include crispy__text();
+ @include crispy__width();
+}