update readme

README.md

@@ -3,10 +3,10 @@
 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
+which has to be customized and documented if you used it for a Project. Often these changes cause a loss of
 performance and raise the propability of errors.
 
-It uses also the following libraries:
+Crispy Boilerplate 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/)
@@ -57,7 +57,7 @@ To overwrite defaults simple add your own config-file before importing crispy:
 
 ### Example
 
-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.
+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
 

dist/index.html

@@ -24,7 +24,7 @@
                                 </svg>
                                 <div class="header__title h1">
 								    Crispy Boilerplate<br />
-                                    <span class="text-small header__small">0.9.8</span>
+                                    <span class="text-small header__small">0.9.9</span>
                                 </div>
                             </a>
                             <div class="header__subtitle h5">
@@ -61,12 +61,12 @@
                     Flat Sass Boilerplate gives you an amount of basic settings, components, helpers, mixins and functions.
                 </p>
                 <p>
-                    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.
+                    The problem of most frameworks is they trying to hard adding a lot of styles
+                    which has to be customized and documented if you used it for a Project.
+                    Often these changes cause a loss of performance and raise the propability of errors.
                 </p>
                 <p>
-                    It uses also the following libraries:
+                    Crispy Boilerplate uses also the following libraries:
                 </p>
                 <ul>
                     <li><a href="https://necolas.github.io/normalize.css/" target="_blank">normalize.css</a></li>
@@ -86,14 +86,18 @@
                     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>
+                <h3>Include</h3>
+                <p>
+                    Components and Helpers are organizes as Mixins, that makes it a little easier to
+                    to add Styles you need.
+                </p>
 
                 <!-- getting started -->
 				<hr class="margin-top-3x">
                 <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>
+                <p>Main SCSS-file:</p>
                 <pre class="code"><code>@import
     "crispy";</code></pre>
                 <p>After this include mixins you need:</p>
@@ -105,13 +109,13 @@
 
                 <h3>Example</h3>
                 <p>
-                    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.
+                    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.
                 </p>
-                <h3>Site</h3>
+                <h4>Site</h4>
                 <p>
                     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>
+                <h4>Templates</h4>
                 <p>
                     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>
@@ -127,7 +131,7 @@
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;a href=&quot;&quot;&gt;&lt;/a&gt;</code></pre>
 				<p>
-					a-tag color is set by <strong>$crispy__color-primary</strong>. :hover is set by
+					Color of Text is set by <strong>$crispy__color-primary</strong>. <strong>Hover</strong> is set by
                     <strong>$crispy__color-text</strong>
 				</p>
 
@@ -218,7 +222,7 @@
 
 				<!-- components / button -->
 				<h3 class="h4 margin-top-2x margin-bottom-0x">
-                    button
+                    Button
                 </h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code margin-top-1x"><code>&lt;button class=&quot;button&quot;&gt;&lt;/button&gt;
@@ -228,14 +232,14 @@
 
                 <!-- components / code -->
 				<h3 class="h4 margin-top-2x margin-bottom-0x">
-                    code
+                    Code
                 </h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code margin-top-1x"><code>&lt;pre class=&quot;code&quot;&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;</code></pre>
 
 				<!-- components / group -->
 				<h3 class="h4 margin-top-2x margin-bottom-0x">
-                    group
+                    Group
                 </h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;nav class=&quot;group&quot;&gt;
@@ -272,7 +276,7 @@
 
 				<!-- components / heading -->
 				<h3 class="h4 margin-top-2x margin-bottom-0x">
-                    heading
+                    Heading
                 </h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;h2&gt;&lt;/h2&gt;
@@ -296,7 +300,7 @@
 
 				<!-- components / hero -->
 				<h3 class="h4 margin-top-2x margin-bottom-0x">
-                    hero
+                    Hero
                 </h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;div class=&quot;hero hero--bottom&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre>
@@ -304,7 +308,7 @@
 
 				<!-- components / icon -->
 				<h3 class="h4 margin-top-2x margin-bottom-0x">
-                    icon
+                    Icon
                 </h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;svg class=&quot;icon icon--small&quot; alt=&quot;beaker&quot; viewBox=&quot;0 0 100 100&quot;&gt;
@@ -335,7 +339,7 @@
 
 				<!-- components / modal -->
 				<h3 class="h4 margin-top-2x margin-bottom-0x">
-                    modal
+                    Modal
                 </h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;div class=&quot;modal modal--bottom width-100&quot;&gt;
@@ -357,7 +361,7 @@
 
 				<!-- components / panel -->
 				<h3 class="h4 margin-top-2x margin-bottom-0x">
-                    panel
+                    Panel
                 </h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;div class=&quot;panel&quot;&gt;
@@ -373,7 +377,7 @@
 
 				<!-- components / table -->
 				<h3 class="h4 margin-top-2x margin-bottom-0x">
-                    table
+                    Table
                 </h3>
 				<h4 class="h6">Html:</h4>
 				<pre class="code"><code>&lt;table class=&quot;table table--striped&quot;&gt;
@@ -685,7 +689,7 @@ toRem(10px 10px 0 0);
 &lt;div class=&quot;text-crossed&quot;&gt;&lt;/div&gt;</code></pre>
 
                 <p>
-                    Also it will be create classes for,
+                    Also there are classes for,
                 </p>
                 <ul>
                     <li>text-* with $crispy__font-sizes for "font-size"</li>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "crispy-boilerplate",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
     "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_dist_dir/css/*.css --use autoprefixer -d $npm_package_config_dist_dir/css/",
+    "css:postcss": "postcss $npm_package_config_build_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_dist_dir/svg/* && rimraf $npm_package_config_build_dir/svg/*",

src/example/example.scss

@@ -1,6 +1,7 @@
 @import
     '../scss/crispy',
 
+    'site/base',
     'site/container',
     'site/footer',
     'site/header',
@@ -36,6 +37,7 @@
 @include crispy__width();
 
 // example
+@include example__base();
 @include example__container();
 @include example__header();
 @include example__footer();

src/example/site/_base.scss

@@ -0,0 +1,15 @@
+/**
+ * site: base
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+@mixin example__base() {
+    h2 {
+        @include crispy__media-md() {
+            padding-top: toEm(14px);
+        }
+    }
+}