adding

README.md

@@ -10,6 +10,10 @@ npm install crispy-boilerplate --save
 
 There a few Components, some are also provide a Closure to adding additional Styles.
 
+### align
+
+Additional Styles for modificators for align text, floating and centering elements.
+
 ### body
 
 Styles for Body, including Format for Fonts and Colors.
@@ -18,6 +22,10 @@ Styles for Body, including Format for Fonts and Colors.
 
 Styles for Buttons.
 
+### heading
+
+Styling h1-h6 and create also CSS-Classes with same name.
+
 ### icon
 
 Styles to use SVG as Icons.
@@ -26,9 +34,9 @@ Styles to use SVG as Icons.
 
 Additional Styles for Lists and modificators.
 
-### heading
+### margin
 
-Styling h1-h6 and create also CSS-Classes with same name.
+Additional Styles for modificators to margin-top and margin-bottom.
 
 ### normalize
 

scss/components/_margin.scss

@@ -0,0 +1,49 @@
+@import
+    '../mixins/units';
+
+/**
+ * margin
+ *
+ * modificators for margin
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+$margin-top: em(5px) !default;
+$margin-bottom: em(20px) !default;
+
+@mixin crispy-boilerplate-margin() {
+    .--margin-top-y0 {
+        margin-top: 0;
+    }
+
+    .--margin-top-y1 {
+        margin-top: $margin-top;
+    }
+
+    .--margin-top-y2 {
+        margin-top: $margin-top * 2;
+    }
+
+    .--margin-top-y3 {
+        margin-top: $margin-top * 3;
+    }
+
+    .--margin-bottom-y0 {
+        margin-bottom: 0;
+    }
+
+    .--margin-bottom-y1 {
+        margin-bottom: $margin-bottom;
+    }
+
+    .--margin-bottom-y2 {
+        margin-bottom: $margin-bottom * 2;
+    }
+
+    .--margin-bottom-y3 {
+        margin-bottom: $margin-bottom * 3;
+    }
+}

scss/CrispyBoilerplate.scss → scss/crispyBoilerplate.scss

@@ -14,5 +14,6 @@
     'components/heading',
     'components/icon',
     'components/list',
+    'components/margin',
     'components/normalize',
     'components/text-colors';

scss/functions/_zIndex.scss

@@ -16,6 +16,7 @@ $z-indexes: (
 /**
  * z-index
  *
+ * 
  *
  *
  * @return