adding spacing

src/scss/helpers/_colors.scss

@@ -1,3 +1,11 @@
+/**
+ *
+ *
+ *
+ *
+ *
+ */
+
 @each $name, $color in $plain-ui__colors {
     .text-color-#{$name} {
         color: var(#{$color});

src/scss/helpers/_core.scss

@@ -5,29 +5,21 @@
  *
  */
 
-@mixin plain-ui__helpers__core()
-{
-    /**
-     *  borders
-     *
-     *
-     */
+.border {
+    border: $plain-ui__border !important;
+}
 
-    .border {
-        border: $plain-ui__border !important;
-    }
+.border-round {
+    border-radius: $plain-ui__border-radius;
+}
 
-    .border-round {
-        border-radius: $plain-ui__border-radius;
-    }
-
-    .borderless {
-        border: 0 !important;
-    }
+.borderless {
+    border: 0 !important;
+}
 
-    .radiusless {
-        border-radius: 0 !important;
-    }
+.radiusless {
+    border-radius: 0 !important;
+}
 
     /**
      *  z-index
@@ -110,105 +102,96 @@
         font-weight: medium !important;
     }
 
-    .bold {
-        font-weight: bolder !important;
-    }
+.bold {
+    font-weight: bolder !important;
+}
 
-    @each $name, $font-size in $plain-ui__font-sizes {
-        .t-size-#{$name} {
-            font-size: $font-size !important;
-            //@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true);
-        }
+@each $name, $font-size in $plain-ui__font-sizes {
+    .t-size-#{$name} {
+        font-size: $font-size !important;
+        //@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true);
     }
+}
 
-    /**
-     *  colors
-     *
-     *
-     */
-
-
-
-    /**
-     *  floating
-     *
-     *
-     */
+/**
+ *  floating
+ *
+ *
+ */
 
-    .float-left {
-        float: left;
-    }
+.float-left {
+    float: left;
+}
 
-    .float-right {
-        float: right;
-    }
+.float-right {
+    float: right;
+}
 
-    .float-none {
-        float: none;
-    }
+.float-none {
+    float: none;
+}
 
-    .centered {
-        margin-left: auto;
-        margin-right: auto;
-    }
+.centered {
+    margin-left: auto;
+    margin-right: auto;
+}
 
-    .clearfix {
-        @include plain-ui__clearfix();
-    }
+.clearfix {
+    @include plain-ui__clearfix();
+}
 
-    /**
-     *  position
-     *
-     *
-     */
+/**
+ *  position
+ *
+ *
+ */
 
-    .absolute {
-        position: absolute !important;
-    }
+.absolute {
+    position: absolute !important;
+}
 
-    .fixed {
-        position: fixed !important;
-    }
+.fixed {
+    position: fixed !important;
+}
 
-    .relative {
-        position: relative !important;
-    }
+.relative {
+    position: relative !important;
+}
 
-    /**
-     *
-     *
-     */
+/**
+ *
+ *
+ */
 
-    .vertical-align-bottom {
-        vertical-align: bottom;
-    }
+.vertical-align-bottom {
+    vertical-align: bottom;
+}
 
-    .vertical-align-top {
-        vertical-align: top;
-    }
+.vertical-align-top {
+    vertical-align: top;
+}
 
-    .vertical-align-baseline {
-        vertical-align: baseline;
-    }
+.vertical-align-baseline {
+    vertical-align: baseline;
+}
 
-    .marginless {
-        margin: 0 !important;
-    }
+.marginless {
+    margin: 0 !important;
+}
 
-    /**
-     *
-     *
-     */
+/**
+ *
+ *
+ */
 
-    .overflow-x-hidden {
-        overflow-x: hidden;
-    }
+.overflow-x-hidden {
+    overflow-x: hidden;
+}
 
-    .overflow-y-hidden {
-        overflow-y: hidden;
-    }
+.overflow-y-hidden {
+    overflow-y: hidden;
+}
 
-    .object-fit-cover {
-        object-fit: cover;
-    }
+.object-fit-cover {
+    object-fit: cover;
 }

src/scss/helpers/_spacing.scss

@@ -5,8 +5,8 @@ $plain-ui__spacing-direction: (
     'right'
 ) !default;
 
-$plain-ui__helpers__spacing-gap: 0.25 !default;
-$plain-ui__helpers__spacing-steps: 10 !default;
+$plain-ui__spacing-gap: 0.25 !default;
+$plain-ui__spacing-steps: 10 !default;
 
 /**
  *
@@ -19,24 +19,64 @@ $plain-ui__helpers__spacing-steps: 10 !default;
     }
 }
 
-@each $direction in $plain-ui__spacing-direction {
-
+@each $direction in $plain-ui__spacing-direction
+{
     @include spacing('m', 'margin', $direction, 0, 0);
     @include spacing('m', 'margin', $direction, 1, 1px);
 
-    @for $i from 2 through $plain-ui__helpers__spacing-steps {
-        $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
+    @for $i from 2 through $plain-ui__spacing-steps {
+        $value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
         @include spacing('m', 'margin', $direction, $i, $value);
+
+        @include plain-ui__media-xs() {
+            @include spacing('m', 'margin', $direction, 'xs-' + $i, $value);
+        }
+
+        @include plain-ui__media-sm() {
+            @include spacing('m', 'margin', $direction, 'sm-' + $i, $value);
+        }
+
+        @include plain-ui__media-md() {
+            @include spacing('m', 'margin', $direction, 'md-' + $i, $value);
+        }
+
+        @include plain-ui__media-lg() {
+            @include spacing('m', 'margin', $direction, 'lg-' + $i, $value);
+        }
+
+        @include plain-ui__media-xlg() {
+            @include spacing('m', 'margin', $direction, 'xlg-' + $i, $value);
+        }
     }
 }
 
-@each $direction in $plain-ui__spacing-direction {
-
+@each $direction in $plain-ui__spacing-direction
+{
     @include spacing('p', 'padding', $direction, 0, 0);
     @include spacing('p', 'padding', $direction, 1, 1px);
 
-    @for $i from 0 through $plain-ui__helpers__spacing-steps {
-        $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
+    @for $i from 0 through $plain-ui__spacing-steps {
+        $value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
         @include spacing('p', 'padding', $direction, $i, $value);
+
+        @include plain-ui__media-xs() {
+            @include spacing('p', 'padding', $direction, 'xs-' + $i, $value);
+        }
+
+        @include plain-ui__media-sm() {
+            @include spacing('p', 'padding', $direction, 'sm-' + $i, $value);
+        }
+
+        @include plain-ui__media-md() {
+            @include spacing('p', 'padding', $direction, 'md-' + $i, $value);
+        }
+
+        @include plain-ui__media-lg() {
+            @include spacing('p', 'padding', $direction, 'lg-' + $i, $value);
+        }
+
+        @include plain-ui__media-xlg() {
+            @include spacing('p', 'padding', $direction, 'xlg-' + $i, $value);
+        }
     }
 }

src/scss/layout/_masonry.scss

@@ -23,17 +23,18 @@ $plain-ui__masonry_sizes: (
 
 $plain-ui__masonry_height: 200px !default;
 $plain-ui__masonry_height--sm: 300px !default;
+$plain-ui__masonry_gap: 15px !default;
+$plain-ui__masonry_gap-offset: 10px !default;
 
 .masonry {
     display: flex;
     width: 100%;
     flex-flow: row wrap;
+    gap: $plain-ui__masonry_gap;
 
     &__item {
         width: 100%;
         height: $plain-ui__masonry_height;
-        padding-left: 1px;
-        padding-bottom: 1px;
 
         @include plain-ui__media-sm() {
             height: $plain-ui__masonry_height--sm;
@@ -41,7 +42,7 @@ $plain-ui__masonry_height--sm: 300px !default;
             // add width from data
             @each $index, $size in $plain-ui__masonry_sizes {
                 &:nth-child(4n+#{$index}) {
-                    width: #{$size};
+                    width: calc(#{$size} - #{$plain-ui__masonry_gap-offset});
                 }
             }
         }

src/scss/plain-ui.scss

@@ -31,8 +31,6 @@
     'helpers/spacing',
     'helpers/colors';
 
-@include plain-ui__helpers__core();
-
 @include plain-ui__component__media();
 @include plain-ui__component__table();
 @include plain-ui__component__slider();