extend readme.md

move example beyond scss

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

dest/index.html

@@ -129,12 +129,25 @@
                     Sites also have partials like header and footer, they can put into the <strong>directory "site"</strong>.
                 </p>
 
+                <h2></h2>
+
+                <p>
+                    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",
+                </p>
+
 				<!-- how to use -->
 				<hr class="margin-top-3x">
 				<h2 id="get-started" class="margin-top-1x">
                     Get Started
                 </h2>
                 <pre class="code"><code>npm install crispy-boilerplate</code></pre>
+                <p>
+                    Import "crispy.scss"
+                </p>
 
 				<!-- typography -->
 				<hr class="margin-top-3x">

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",

src/scss/example.scss → 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();

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();
+}

src/scss/example/example.scss

@@ -1,9 +0,0 @@
-@import
-    'site/container',
-    'site/footer',
-    'site/header',
-    
-    'components/button',
-    'components/nav',
-
-    'templates/home';

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();
+}