diff --git a/dist/index.html b/dist/index.html
index 2c8a2f0..dd5bf09 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -12,22 +12,15 @@
 
 <body class="overflow-x-hidden">
 
-    <header id="header" class="header">
-        <div class="container">
-            <div class="grid">
-                <div class="col-12">
-                    <div class="text-center">
-                        <hgroup>
-                            <h1>Plain UI</h1>
-                        </hgroup>
-                    </div>
-                </div>
+    <header class="header">
+        <div class="bar">
+            <div class="bar__start">
+                <h1>Plain UI</h1>
             </div>
         </div>
     </header>
 
     <div class="container">
-
         <div class="grid">
             <div class="col-12">
                 <h2>Buttons</h2>
diff --git a/dist/plain-ui.css b/dist/plain-ui.css
index 4ac6a4c..dc436ea 100644
--- a/dist/plain-ui.css
+++ b/dist/plain-ui.css
@@ -2501,6 +2501,394 @@ dt {
   height: 25rem;
 }
 
+/**
+ *
+ *
+ */
+.m-top-0 {
+  margin-top: 0;
+}
+
+.m-top-1 {
+  margin-top: 1px;
+}
+
+.m-top-2 {
+  margin-top: 0.125rem;
+}
+
+.m-top-3 {
+  margin-top: 0.5rem;
+}
+
+.m-top-4 {
+  margin-top: 1.125rem;
+}
+
+.m-top-5 {
+  margin-top: 2rem;
+}
+
+.m-top-6 {
+  margin-top: 3.125rem;
+}
+
+.m-top-7 {
+  margin-top: 4.5rem;
+}
+
+.m-top-8 {
+  margin-top: 6.125rem;
+}
+
+.m-top-9 {
+  margin-top: 8rem;
+}
+
+.m-top-10 {
+  margin-top: 10.125rem;
+}
+
+.m-bottom-0 {
+  margin-bottom: 0;
+}
+
+.m-bottom-1 {
+  margin-bottom: 1px;
+}
+
+.m-bottom-2 {
+  margin-bottom: 0.125rem;
+}
+
+.m-bottom-3 {
+  margin-bottom: 0.5rem;
+}
+
+.m-bottom-4 {
+  margin-bottom: 1.125rem;
+}
+
+.m-bottom-5 {
+  margin-bottom: 2rem;
+}
+
+.m-bottom-6 {
+  margin-bottom: 3.125rem;
+}
+
+.m-bottom-7 {
+  margin-bottom: 4.5rem;
+}
+
+.m-bottom-8 {
+  margin-bottom: 6.125rem;
+}
+
+.m-bottom-9 {
+  margin-bottom: 8rem;
+}
+
+.m-bottom-10 {
+  margin-bottom: 10.125rem;
+}
+
+.m-left-0 {
+  margin-left: 0;
+}
+
+.m-left-1 {
+  margin-left: 1px;
+}
+
+.m-left-2 {
+  margin-left: 0.125rem;
+}
+
+.m-left-3 {
+  margin-left: 0.5rem;
+}
+
+.m-left-4 {
+  margin-left: 1.125rem;
+}
+
+.m-left-5 {
+  margin-left: 2rem;
+}
+
+.m-left-6 {
+  margin-left: 3.125rem;
+}
+
+.m-left-7 {
+  margin-left: 4.5rem;
+}
+
+.m-left-8 {
+  margin-left: 6.125rem;
+}
+
+.m-left-9 {
+  margin-left: 8rem;
+}
+
+.m-left-10 {
+  margin-left: 10.125rem;
+}
+
+.m-right-0 {
+  margin-right: 0;
+}
+
+.m-right-1 {
+  margin-right: 1px;
+}
+
+.m-right-2 {
+  margin-right: 0.125rem;
+}
+
+.m-right-3 {
+  margin-right: 0.5rem;
+}
+
+.m-right-4 {
+  margin-right: 1.125rem;
+}
+
+.m-right-5 {
+  margin-right: 2rem;
+}
+
+.m-right-6 {
+  margin-right: 3.125rem;
+}
+
+.m-right-7 {
+  margin-right: 4.5rem;
+}
+
+.m-right-8 {
+  margin-right: 6.125rem;
+}
+
+.m-right-9 {
+  margin-right: 8rem;
+}
+
+.m-right-10 {
+  margin-right: 10.125rem;
+}
+
+.p-top-0 {
+  padding-top: 0;
+}
+
+.p-top-1 {
+  padding-top: 1px;
+}
+
+.p-top-0 {
+  padding-top: 0.125rem;
+}
+
+.p-top-1 {
+  padding-top: 0rem;
+}
+
+.p-top-2 {
+  padding-top: 0.125rem;
+}
+
+.p-top-3 {
+  padding-top: 0.5rem;
+}
+
+.p-top-4 {
+  padding-top: 1.125rem;
+}
+
+.p-top-5 {
+  padding-top: 2rem;
+}
+
+.p-top-6 {
+  padding-top: 3.125rem;
+}
+
+.p-top-7 {
+  padding-top: 4.5rem;
+}
+
+.p-top-8 {
+  padding-top: 6.125rem;
+}
+
+.p-top-9 {
+  padding-top: 8rem;
+}
+
+.p-top-10 {
+  padding-top: 10.125rem;
+}
+
+.p-bottom-0 {
+  padding-bottom: 0;
+}
+
+.p-bottom-1 {
+  padding-bottom: 1px;
+}
+
+.p-bottom-0 {
+  padding-bottom: 0.125rem;
+}
+
+.p-bottom-1 {
+  padding-bottom: 0rem;
+}
+
+.p-bottom-2 {
+  padding-bottom: 0.125rem;
+}
+
+.p-bottom-3 {
+  padding-bottom: 0.5rem;
+}
+
+.p-bottom-4 {
+  padding-bottom: 1.125rem;
+}
+
+.p-bottom-5 {
+  padding-bottom: 2rem;
+}
+
+.p-bottom-6 {
+  padding-bottom: 3.125rem;
+}
+
+.p-bottom-7 {
+  padding-bottom: 4.5rem;
+}
+
+.p-bottom-8 {
+  padding-bottom: 6.125rem;
+}
+
+.p-bottom-9 {
+  padding-bottom: 8rem;
+}
+
+.p-bottom-10 {
+  padding-bottom: 10.125rem;
+}
+
+.p-left-0 {
+  padding-left: 0;
+}
+
+.p-left-1 {
+  padding-left: 1px;
+}
+
+.p-left-0 {
+  padding-left: 0.125rem;
+}
+
+.p-left-1 {
+  padding-left: 0rem;
+}
+
+.p-left-2 {
+  padding-left: 0.125rem;
+}
+
+.p-left-3 {
+  padding-left: 0.5rem;
+}
+
+.p-left-4 {
+  padding-left: 1.125rem;
+}
+
+.p-left-5 {
+  padding-left: 2rem;
+}
+
+.p-left-6 {
+  padding-left: 3.125rem;
+}
+
+.p-left-7 {
+  padding-left: 4.5rem;
+}
+
+.p-left-8 {
+  padding-left: 6.125rem;
+}
+
+.p-left-9 {
+  padding-left: 8rem;
+}
+
+.p-left-10 {
+  padding-left: 10.125rem;
+}
+
+.p-right-0 {
+  padding-right: 0;
+}
+
+.p-right-1 {
+  padding-right: 1px;
+}
+
+.p-right-0 {
+  padding-right: 0.125rem;
+}
+
+.p-right-1 {
+  padding-right: 0rem;
+}
+
+.p-right-2 {
+  padding-right: 0.125rem;
+}
+
+.p-right-3 {
+  padding-right: 0.5rem;
+}
+
+.p-right-4 {
+  padding-right: 1.125rem;
+}
+
+.p-right-5 {
+  padding-right: 2rem;
+}
+
+.p-right-6 {
+  padding-right: 3.125rem;
+}
+
+.p-right-7 {
+  padding-right: 4.5rem;
+}
+
+.p-right-8 {
+  padding-right: 6.125rem;
+}
+
+.p-right-9 {
+  padding-right: 8rem;
+}
+
+.p-right-10 {
+  padding-right: 10.125rem;
+}
+
 /**
  *
  *
diff --git a/src/scss/helpers/_spacing.scss b/src/scss/helpers/_spacing.scss
index de3b21a..c5c999d 100644
--- a/src/scss/helpers/_spacing.scss
+++ b/src/scss/helpers/_spacing.scss
@@ -3,16 +3,31 @@ $plain-ui__spacing-direction: (
     'bottom',
     'left',
     'right'
-);
+) !default;
+
+$plain-ui__helpers__spacing-gap: 0.25 !default;
+$plain-ui__helpers__spacing-steps: 10 !default;
+
+/**
+ *
+ *
+ */
+@mixin spacing($class, $style, $direction, $name, $value, $breakpoints: 0)
+{
+    .#{$class}-#{$direction}-#{$name} {
+        #{$style}-#{$direction}: $value;
+    }
+}
 
 @each $direction in $plain-ui__spacing-direction {
 
     @include spacing('m', 'margin', $direction, 0, 0);
     @include spacing('m', 'margin', $direction, 1, 1px);
 
-    @for $i from 0 through $plain-ui__helpers__spacing-steps {
-        @include spacing($class, $style, $direction, $name, $plain-ui__helpers__spacing-gap * factor($i))
-        @include plain-ui__media-breakpoints-calculate('margin-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
+    @for $i from 2 through $plain-ui__helpers__spacing-steps {
+        $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
+        @include spacing('m', 'margin', $direction, $i, $value);
+        //@include plain-ui__breakpoints-calculate('margin-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
     }
 }
 
@@ -22,19 +37,8 @@ $plain-ui__spacing-direction: (
     @include spacing('p', 'padding', $direction, 1, 1px);
 
     @for $i from 0 through $plain-ui__helpers__spacing-steps {
-        .p-#{$direction}-#{$i} {
-            padding-#{$direction}: ($plain-ui__helpers__spacing-gap * factor($i)) !important;
-
-            @if $i > 0 {
-                @include plain-ui__media-breakpoints-calculate('padding-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
-            }
-        }
-    }
-}
-
-@mixin spacing($class, $style, $direction, $name, $value, $breakpoints)
-{
-    .#{$class}-#{$direction}-#{$name} {
-        #{$style}-#{$direction}: $value;
+        $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
+        @include spacing('p', 'padding', $direction, $i, $value);
+        //@include plain-ui__breakpoints-calculate('padding-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
     }
 }
\ No newline at end of file
diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss
index 79a4374..7c6c17c 100644
--- a/src/scss/plain-ui.scss
+++ b/src/scss/plain-ui.scss
@@ -10,6 +10,7 @@
 
     'helpers/core',
     'helpers/sizing',
+    'helpers/spacing',
 
     'components/badge',
     'components/button',
