refactor naming

adding new header in example

dest/index.html

@@ -28,6 +28,26 @@
 					</div>
 				</div>
 			</div>
+            <div class="grid">
+				<div class="col-sm-4">
+                    <h2 class="header__feature-title">Less is more</h2>
+                    <p class="header__feature-text">
+                        Simple basic Components to extends in your own art
+                    </p>
+                </div>
+                <div class="col-sm-4">
+                    <h2 class="header__feature-title">Structure</h2>
+                    <p class="header__feature-text">
+                        Crispy gives you a Structure to orientate
+                    </p>
+                </div>
+                <div class="col-sm-4">
+                    <h2 class="header__feature-title">Helper</h2>
+                    <p class="header__feature-text">
+                        Use helper to save up time and coding less
+                    </p>
+                </div>
+            </div>
 		</div>
 	</header>
 	<a class="button button--up" href="#header">
@@ -41,7 +61,6 @@
 				<nav class="nav">
 					<ul class="margin-top-0x">
                         <li><a href="#introduction">Introduction</a></li>
-						<li><a href="#npm">npm</a></li>
 						<li><a href="#get-started">Get Started</a></li>
 						<li><a href="#typography">Typography</a></li>
 						<li><a href="#components">Components</a></li>
@@ -72,23 +91,12 @@
 					base to create more effecit No, it is a try, i can not promise you it will be done,
 				</p>
 
-				<!-- npm -->
-				<hr class="margin-top-3x">
-				<h2 id="npm" class="margin-top-1x">
-                    npm
-                </h2>
-				<p>
-
-				</p>
-
 				<!-- how to use -->
 				<hr class="margin-top-3x">
 				<h2 id="get-started" class="margin-top-1x">
                     Get Started
                 </h2>
-				<p>
-
-				</p>
+                <pre class="code"><code>npm install crispy-boilerplate</code></pre>
 
 				<!-- typography -->
 				<hr class="margin-top-3x">
@@ -207,9 +215,7 @@
 				<div class="panel panel__inner">
 					<nav class="group group--horizontal">
 						<ul class="group__section group__section--separate">
-							<li class="group__item">first item</li>
-							<li class="group__item">second item</li>
-							<li class="group__item">third item</li>
+							<li class="group__item">first item</li><li class="group__item">second item</li><li class="group__item">third item</li>
 						</ul>
 					</nav>
 				</div>

src/scss/components/_hero.scss

@@ -1,9 +1,9 @@
 /**
  * hero
  *
- * background-position is as default: cover
+ * background-size is as default: cover - Resize the background image to cover the entire container
  *
- * <div class="hero" style="width: value height: value; background-image: url(path)"></div>
+ * <div class="hero" style="width: value; height: value; background-image: url(path)"></div>
  *
  *
  * @author Björn Hase

src/scss/example.scss

@@ -48,6 +48,20 @@
         top: 3px;
         width: 50px;
     }
+
+    &__feature-text, &__feature-title {
+        text-align: center;
+        padding: toEm(0 20px);
+    }
+
+    &__feature-title {
+        @include crispy__font-size(23px);
+    }
+
+    &__feature-text {
+        margin: toEm(0 0 30px);
+        @include crispy__font-size(18px);
+    }
 }
 
 .footer {
@@ -115,7 +129,7 @@
 }
 
 // helpers
-@include crispy__align();
+@include crispy__float();
 @include crispy__margin();
 @include crispy__media();
 @include crispy__text();

src/scss/helpers/_align.scss → src/scss/helpers/_float.scss

@@ -1,5 +1,5 @@
 /**
- * helpers for align
+ * helpers for float & centering
  *
  *
  *
@@ -7,23 +7,7 @@
  *
  */
 
-@mixin crispy__align() {
-    .text-left {
-        text-align: left;
-    }
-
-    .text-right {
-        text-align: right;
-    }
-
-    .text-center {
-        text-align: center;
-    }
-
-    .text-justify {
-        text-align: justify;
-    }
-
+@mixin crispy__float() {
     .float-left {
         float: left;
     }

src/scss/helpers/_margin.scss

@@ -27,6 +27,14 @@ $crispy__margin-bottom: toEm($crispy__margin) !default;
         margin-top: $crispy__margin-top * 3;
     }
 
+    .margin-top-4x {
+        margin-top: $crispy__margin-top * 4;
+    }
+
+    .margin-top-5x {
+        margin-top: $crispy__margin-top * 5;
+    }
+
     .margin-bottom-0x {
         margin-bottom: 0;
     }
@@ -42,4 +50,12 @@ $crispy__margin-bottom: toEm($crispy__margin) !default;
     .margin-bottom-3x {
         margin-bottom: $crispy__margin-bottom * 3;
     }
+
+    .margin-bottom-4x {
+        margin-bottom: $crispy__margin-bottom * 4;
+    }
+
+    .margin-bottom-5x {
+        margin-bottom: $crispy__margin-bottom * 5;
+    }
 }

src/scss/helpers/_media.scss

@@ -1,5 +1,5 @@
 /**
- * helpers for media elements
+ * helpers for img & video
  *
  *
  * @author Björn Hase
@@ -16,7 +16,7 @@
     .img-rounded {
         border-radius: 50%;
     }
-    
+
     .video-responsive {
         display: block;
         overflow: hidden;

src/scss/helpers/_text.scss

@@ -1,7 +1,7 @@
 /**
  * helpers for text
  *
- * font-sizes, color, background-color
+ * align, font-sizes, color, background-color
  *
  *
  * @author Björn Hase
@@ -13,11 +13,30 @@ $crispy__text-colors: $crispy__colors !default;
 $crispy__text-font-sizes: $crispy__font-sizes !default;
 
 @mixin crispy__text() {
+    .text-left {
+        text-align: left;
+    }
+
+    .text-right {
+        text-align: right;
+    }
+
+    .text-center {
+        text-align: center;
+    }
+
+    .text-justify {
+        text-align: justify;
+    }
 
     .text-italic {
         font-style: italic;
     }
 
+    .text-normal {
+        font-style: normal;
+    }
+
     .text-bold {
         font-weight: bold;
     }

src/scss/helpers/_helpers.scss → src/scss/helpers/helpers.scss

@@ -1,5 +1,5 @@
 @import
-    'align',
+    'float',
     'margin',
     'media',
     'text',