adding new structure

adding hover.css

README.md

@@ -1,6 +1,7 @@
 # cripsy-boilerplate
 
 Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions.
+This Boilerplate uses hover.css and normalize.css
 
 ```
 npm install crispy-boilerplate --save

package.json

@@ -1,6 +1,6 @@
 {
   "name": "crispy-boilerplate",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions",
   "repository": {
     "type": "git",
@@ -9,6 +9,7 @@
   "author": "Björn Hase",
   "license": "MIT",
   "dependencies": {
+    "hover.css": "^2.2.1",
     "normalize.css": "^7.0.0"
   }
 }

src/components/_heading.scss → scss/components/_heading.scss

@@ -24,7 +24,7 @@ $heading__font-weight: bold !default;
 $heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
 $heading__line-height: 1.5 !default;
 
-$heading__margin: 0 0 pxToEm(20px) !default;
+$heading__margin: pxToEm(20px) 0 pxToEm(5px) !default;
 
 @mixin crispy-boilerplate-heading {
     @each $h, $font-size in $heading__font-sizes {

src/crispyBoilerplate.scss → scss/crispyBoilerplate.scss

@@ -1,5 +1,6 @@
 @import
-    '../node_modules/normalize.css/normalize',
+    '../../normalize.css/normalize',
+    '../../hover.css/scss/hover',
 
     'functions/units',
     'functions/zIndex',
@@ -7,7 +8,6 @@
     'mixins',
 
     'components/align',
-    'components/animation',
     'components/body',
     'components/button',
     'components/clearfix',

src/components/_animation.scss

@@ -1,41 +0,0 @@
-/**
- * animation
- *
- *
- *
- * @author Björn Hase
- *
- */
-
-
-@mixin crispy-boilerplate-animation() {
-    .--animation-rotate {
-        animation: spin 3s linear infinite;
-
-        @keyframes spin {
-            to {
-                transform: rotate(360deg);
-            }
-        }
-    }
-
-    .--animation-shake {
-        animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
-        transform: translate3d(0, 0, 0);
-
-        @keyframes shake {
-            10%, 90% {
-                transform: translate3d(-1px, 0, 0);
-            }
-            20%, 80% {
-                transform: translate3d(2px, 0, 0);
-            }
-            30%, 50%, 70% {
-                transform: translate3d(-4px, 0, 0);
-            }
-            40%, 60% {
-                transform: translate3d(4px, 0, 0);
-            }
-        }
-    }
- }