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()
+.border {
-{
-    /**
-     *  borders
-     *
-     *
-     */
-
-    .border {
     border: $plain-ui__border !important;
-    }
+}
 
-    .border-round {
+.border-round {
     border-radius: $plain-ui__border-radius;
-    }
+}
 
-    .borderless {
+.borderless {
     border: 0 !important;
-    }
+}
 
-    .radiusless {
+.radiusless {
     border-radius: 0 !important;
-    }
+}
 
     /**
      *  z-index
@@ -110,105 +102,96 @@
         font-weight: medium !important;
     }
 
-    .bold {
+.bold {
     font-weight: bolder !important;
-    }
+}
 
-    @each $name, $font-size in $plain-ui__font-sizes {
+@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
  *
  *
  */
 
-    .float-left {
+.float-left {
     float: left;
-    }
+}
 
-    .float-right {
+.float-right {
     float: right;
-    }
+}
 
-    .float-none {
+.float-none {
     float: none;
-    }
+}
 
-    .centered {
+.centered {
     margin-left: auto;
     margin-right: auto;
-    }
+}
 
-    .clearfix {
+.clearfix {
     @include plain-ui__clearfix();
-    }
+}
 
-    /**
+/**
  *  position
  *
  *
  */
 
-    .absolute {
+.absolute {
     position: absolute !important;
-    }
+}
 
-    .fixed {
+.fixed {
     position: fixed !important;
-    }
+}
 
-    .relative {
+.relative {
     position: relative !important;
-    }
+}
 
-    /**
+/**
  *
  *
  */
 
-    .vertical-align-bottom {
+.vertical-align-bottom {
     vertical-align: bottom;
-    }
+}
 
-    .vertical-align-top {
+.vertical-align-top {
     vertical-align: top;
-    }
+}
 
-    .vertical-align-baseline {
+.vertical-align-baseline {
     vertical-align: baseline;
-    }
+}
 
-    .marginless {
+.marginless {
     margin: 0 !important;
-    }
+}
 
-    /**
+/**
  *
  *
  */
 
-    .overflow-x-hidden {
+.overflow-x-hidden {
     overflow-x: hidden;
-    }
+}
 
-    .overflow-y-hidden {
+.overflow-y-hidden {
     overflow-y: hidden;
-    }
+}
 
-    .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__spacing-gap: 0.25 !default;
-$plain-ui__helpers__spacing-steps: 10 !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 {
+    @for $i from 2 through $plain-ui__spacing-steps {
-        $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
+        $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);
         }
-}
 
-@each $direction in $plain-ui__spacing-direction {
+        @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
+{
     @include spacing('p', 'padding', $direction, 0, 0);
     @include spacing('p', 'padding', $direction, 1, 1px);
 
-    @for $i from 0 through $plain-ui__helpers__spacing-steps {
+    @for $i from 0 through $plain-ui__spacing-steps {
-        $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
+        $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();