remove feature in header

README.md

@@ -1,16 +1,18 @@
-# Cripsy-Boilerplate
+# 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,
 
 * 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)
+* 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
@@ -57,11 +59,6 @@ To overwrite defaults simple adding your own config-file before import crispy:
     "crispy";
 ```
 
-### npm
-
-There are a few npm scripts in the package.json that you can you use them to build
-your scss. Copy them and change the path. 
-
 ### Example
 
 You find an Example in "/src/example". It is also the site of the Documentation.

dest/index.html

@@ -18,44 +18,22 @@
 				<div class="col-12">
 					<div class="text-center">
                         <hgroup>
-							<div class="header__title h1">
-                                <a href="/">
-                                    <svg class="icon header__logo" alt="Crisp" viewBox="0 0 100 100">
-                                        <use xlink:href="/svg/icons.svg#chip" />
-                                    </svg>
-								    Crispy Boilerplate <span class="text-small">0.9.7</span>
-                                </a>
-							</div>
+							<a href="/">
+                                <svg class="icon header__logo" alt="Crisp" viewBox="0 0 100 100">
+                                    <use xlink:href="/svg/icons.svg#chip" />
+                                </svg>
+                                <div class="header__title h1">
+								    Crispy Boilerplate<br />
+                                    <span class="text-small header__small">0.9.7</span>
+                                </div>
+                            </a>
+                            <div class="header__subtitle h5">
+                                Less is More
+                            </div>
 						</hgroup>
 					</div>
 				</div>
 			</div>
-            <div class="grid">
-				<div class="col-sm-4">
-                    <div class="header__feature">
-                        <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>
-                <div class="col-sm-4">
-                    <div class="header__feature">
-                        <h2 class="header__feature-title">Structure</h2>
-                        <p class="header__feature-text">
-                            Crispy gives you a Structure to orientate
-                        </p>
-                    </div>
-                </div>
-                <div class="col-sm-4">
-                    <div class="header__feature header__feature--last">
-                        <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>
 		</div>
 	</header>
 	<a class="button button--up" href="#header">

src/example/site/_header.scss

@@ -8,53 +8,38 @@
 
 @mixin example__header() {
     .header {
-        padding: 8px 0 0;
-        margin: 0 0 20px;
+        padding: toEm(8px 0 0);
+        margin: toEm(0 0 20px);
 
         @include crispy__media-sm() {
-            margin: 0 0 60px;
+            margin: toEm(0 0 60px);
         }
 
-        &__title {
-            margin: toEm(10px 0 0);
+        a {
+            text-decoration: none;
 
-            a {
-                text-decoration: none;
+            &:hover {
+                color: $crispy__color-primary;
             }
         }
 
-        &__logo {
-            top: 3px;
-            width: 50px;
-        }
-
-        &__feature {
-            padding: toEm(15px 10px);
-            border: 1px solid #929292;
-            background-color: #fff;
-            border-radius: 5px;
-
-            &--last {
-                margin: toEm(0 0 30px);
-            }
-
-            @include crispy__media-sm() {
-                margin: toEm(0 0 30px);
-            }
+        &__title {
+            margin: 0;
         }
 
-        &__feature-text, &__feature-title {
-            text-align: center;
-            padding: toEm(0 20px);
+        &__subtitle {
+            margin: toEm(15px 0 0);
+            color: $crispy__color-text;
         }
 
-        &__feature-title {
-            @include crispy__font-size(23px);
+        &__logo {
+            width: 50px;
+            margin: toEm(20px 0 0);
         }
 
-        &__feature-text {
-            margin: 0;
-            @include crispy__font-size(18px);
+        &__small {
+            display: block;
+            margin: -10px;
         }
     }
 }