update readme

README.md

@@ -1,32 +1,28 @@
 # Cripsy-Boilerplate - Less is more
 
-Flat Sass Boilerplate give you a amount of Basic Settings, Components, Helpers,
-Mixins and Functions. It uses also the following Libraries,
+Flat Sass Boilerplate gives you an amount of basic settings, components, helpers, mixins and functions.
+
+The problem of most frameworks is they trying to hard adding a lot of styles,
+which has to be customized and documented. Often these changes cause a loss of
+performance and raise the propability of errors.
+
+It uses also the following libraries:
 
 * normalize.css / [https://necolas.github.io/normalize.css/](https://necolas.github.io/normalize.css/)
 * reflex-grid / [http://reflexgrid.com/docs/](http://reflexgrid.com/docs/)
 * opt / [https://octicons.github.com](https://octicons.github.com)
 
-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.
-
 [Documentation](https://crispy-boilerplate.org)
 
 ## Coding Style
 
-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.
+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.
 
 ## Not Fancy but Small
 
-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 and less Errors.
+Components are created to give you a structure and a basic set of styles and not to look fancy. The idea is to extend each component and save time to write a bunch of extra CSS code and therefore get more performance while minimize the causes of errors. Of Course is really Fancy to get more Performance and less Errors.
 
-## Only Include if you need it
+## Include
 
 Components and Helpers are organizes as Mixins, that makes it a little easier to
 to add Styles you need.
@@ -51,7 +47,7 @@ After this, include Mixins you need:
 @include crispy__*()
 ```
 
-To overwrite defaults simple adding your own config-file before import crispy:
+To overwrite defaults simple add your own config-file before importing crispy:
 
 ```
 @import
@@ -61,16 +57,12 @@ To overwrite defaults simple adding your own config-file before import crispy:
 
 ### Example
 
-You find an Example in "/src/example". It is also the site of the Documentation.
-In the Example there are additional Directories. These one are part of a Structure
-you might find helpful.
+You find an example in "/src/example". The documentation is also there. 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 use on are site or webapp. Header, Footer are
-not Classical Components, there often more Complex and have a special Brand.
+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 the is
-no benfit so reuse them as Components.
+Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components.

dest/index.html → dist/index.html

@@ -24,7 +24,7 @@
                                 </svg>
                                 <div class="header__title h1">
 								    Crispy Boilerplate<br />
-                                    <span class="text-small header__small">0.9.7</span>
+                                    <span class="text-small header__small">0.9.8</span>
                                 </div>
                             </a>
                             <div class="header__subtitle h5">
@@ -46,9 +46,7 @@
 			<div class="col-12 col-sm-3">
 				<nav class="nav">
 					<ul class="margin-top-0x">
-                        <li><a href="#introduction">Introduction</a></li>
-                        <li><a href="#example">Example</a></li>
-						<li><a href="#get-started">Get Started</a></li>
+						<li><a href="#getting-started">Getting Started</a></li>
 						<li><a href="#typography">Typography</a></li>
 						<li><a href="#components">Components</a></li>
 						<li><a href="#functions">Functions</a></li>
@@ -59,72 +57,63 @@
 				</nav>
 			</div>
 			<div class="col-12 col-sm-9">
-                <h2 id="introduction" class="lead">
-                    Introduction
-                </h2>
 				<p>
-                    This Boilerplate has more simpler approach, it can be used
-                    as a base for Websites, Webapps and also Frameworks. Of Course there a
-                    so many Framework and Boilerplates.
+                    Flat Sass Boilerplate gives you an amount of basic settings, components, helpers, mixins and functions.
                 </p>
                 <p>
-                    But the most 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 problem of most frameworks is they trying to hard adding a lot of styles,
+                    which has to be customized and documented. Often these changes cause a loss of
+                    performance and raise the propability of errors.
                 </p>
                 <p>
-                    The <strong>Components</strong> are quite simple and not fancy, the have all
-                    fundamental styles to so the can be used.
+                    It uses also the following libraries:
                 </p>
+                <ul>
+                    <li><a href="https://necolas.github.io/normalize.css/" target="_blank">normalize.css</a></li>
+                    <li><a href="http://reflexgrid.com/docs/" target="_blank">reflex-grid</a></li>
+                    <li><a href="https://octicons.github.com" target="_blank">octicons</a></li>
+                </ul>
+
+                <h3>Coding Style</h3>
                 <p>
-                    The <strong>Helpers</strong> have Styles for single Elements and spend it saving
-                    for each element to invent a single class.
+                    The boilerplate uses as coding style <a href="http://getbem.com/" target="_blank">BEM</a>,
+                    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.
                 </p>
+                <h3>Not Fancy but Small</h3>
                 <p>
-                    The Coding Style of this Framework is <strong>BEM</strong>, but
-                    also here a more simpler idea of it. <strong>BEM</strong> is a good and helpfull Coding Style,
-                    if you not overthinking it. It helps to create smaller compontents that you can reuse.
-                    Important for that, make them really small. More Information about <a href="http://getbem.com/" target="_blank">BEM</a>.
+                    Components are created to give you a structure and a basic set of styles and not to look fancy.
+                    The idea is to extend each component and save time to write a bunch of extra CSS code and
+                    therefore get more performance while minimize the causes of errors. Of Course is really Fancy to get more Performance and less Errors.
                 </p>
 
-                <!-- example -->
+                <!-- getting started -->
 				<hr class="margin-top-3x">
-                <h2 id="example" class="margin-top-1x">
-                    Example
-                </h2>
+                <h2 id="getting-started">Getting Started</h2>
+                <h3>Installation</h3>
+                <p>Main SCSS-file:</p>
+                <pre class="code"><code>npm install crispy-boilerplate</code></pre>
+                <p>After this include mixins you need:</p>
+                <pre class="code"><code>@import
+    "crispy";</code></pre>
+                <p>After this include mixins you need:</p>
+                <pre class="code"><code>@include crispy__*()</code></pre>
+                <p>To overwrite defaults simple add your own config-file before importing crispy:</p>
+                <pre class="code"><code>@import
+    "config",
+    "crispy";</code></pre>
+
+                <h3>Example</h3>
                 <p>
-                    This Site is also a Example to use the Boilerplate. You can find all
-                    Styles for this site in "/src/scss/example". You see also that there
-                    is a <strong>"templates" Directory</strong>. The Idea in <strong>BEM</strong> was always
-                    create all in Components. That is not always Practical.
+                    You find an example in "/src/example". The documentation is also there. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.
                 </p>
+                <h3>Site</h3>
                 <p>
-                    Sometimes, the more Bigger Picture, on a Single Site or in App the
-                    Stylings that are so special that the belong only there and are to complex
-                    for a component. For this use the <strong>"templates" Directory</strong>.
+                    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>
+                <h3>Templates</h3>
                 <p>
-                    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"
+                    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 -->
@@ -142,7 +131,6 @@
                     <strong>$crispy__color-text</strong>
 				</p>
 
-
 				<!-- abbr -->
 				<h3 class="h4 margin-top-2x margin-bottom-0x">abbr</h3>
 				<h4 class="h6">Html:</h4>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "crispy-boilerplate",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "webpack": "^3.11.0"
   },
   "config": {
-    "dest_dir": "dest/",
+    "dist_dir": "dist/",
     "src_dir": "src/",
     "build_dir": "build/",
     "normalize": "node_modules/normalize.css",
@@ -37,13 +37,13 @@
     "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/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",
+    "css:postcss": "postcss $npm_package_config_dist_dir/css/*.css --use autoprefixer -d $npm_package_config_dist_dir/css/",
+    "css:minify": "cleancss $npm_package_config_build_dir/css/styles.css > $npm_package_config_dist_dir/css/styles.css",
     "svg:build": "npm run svg:clean && npm run svg:copy && npm run svg:optimize && npm run svg:minify",
-    "svg:clean": "rimraf $npm_package_config_dest_dir/svg/* && rimraf $npm_package_config_build_dir/svg/*",
+    "svg:clean": "rimraf $npm_package_config_dist_dir/svg/* && rimraf $npm_package_config_build_dir/svg/*",
     "svg:copy": "copyfiles -f $npm_package_config_src_dir/icons/**/*.svg $npm_package_config_build_dir/svg",
     "svg:optimize": "svgo -f $npm_package_config_build_dir/svg -o $npm_package_config_build_dir/svg",
-    "svg:minify": "svg-sprite -s --symbol-sprite=$npm_package_config_dest_dir/svg/icons.svg --symbol-dest= $npm_package_config_build_dir/svg/*.svg",
+    "svg:minify": "svg-sprite -s --symbol-sprite=$npm_package_config_dist_dir/svg/icons.svg --symbol-dest= $npm_package_config_build_dir/svg/*.svg",
     "js:build": "npm run js:clean && npm run js:webpack",
     "js:clean": "rimraf $npm_package_config_dist_dir/js/*",
     "js:webpack": "npx webpack --config webpack.config.js"