adding layout documentation

public/layout.html

@@ -46,18 +46,6 @@
         </div>
     </div>
 
-    <div class="container">
-        <div class="grid">
-            <div class="col-6">
-                <div class="content">
-                    <p>
-                        Some Text
-                    </p>
-                </div>
-            </div>
-        </div>
-    </div>
-
     <div class="container">
         <div class="grid">
             <div class="col-12">
@@ -65,32 +53,48 @@
                     Layout
                 </h2>
 
-                <h3 class="highlight">
+                <h3>
                     Grid
                 </h3>
 
-                <p class="m-bottom-4">
-                    The grid is a small modificated Version from the Reflex Grid
-                </p>
+                <div class="panel panel--border-highlight border-color-info m-bottom-4">
+                    <div class="panel__body">
+                        <div class="content m-bottom-last-child-0">
+                            <p>
+                                Plain UI uses the <a href="https://reflexgrid.com/" target="_blank" rel=“noopener“>Reflex Grid</a>,
+                                there will be a full integration of this Grid for better Support.
+                            </p>
+                        </div>
+                    </div>
+                </div>
 
-                <h3 class="highlight">
+                <h3>
                     Masonry
                 </h3>
 
+                <div class="content">
+<code>&lt;div class=&quot;masonry&quot;&gt;
+    &lt;figure class=&quot;masonry__item&quot;&gt;
+        &lt;img class=&quot;media object-fit-cover h-100&quot; src=&quot;/image.jpg&quot; /&gt;
+    &lt;/figure&gt;
+&lt;/div&gt;
+</code>
+                </div>
+
                 <div class="masonry">
-                    <figure class="masonry__item marginless">
+                    <figure class="masonry__item">
                         <img class="media object-fit-cover h-100" src="/image.jpg" />
                     </figure>
-                    <figure class="masonry__item marginless">
+                    <figure class="masonry__item">
                         <img class="media object-fit-cover h-100" src="/image.jpg" />
                     </figure>
-                    <figure class="masonry__item marginless">
+                    <figure class="masonry__item">
                         <img class="media object-fit-cover h-100" src="/image.jpg" />
                     </figure>
-                    <figure class="masonry__item marginless">
+                    <figure class="masonry__item">
                         <img class="media object-fit-cover h-100" src="/image.jpg" />
                     </figure>
-                    <figure class="masonry__item marginless">
+                    <figure class="masonry__item">
                         <img class="media object-fit-cover h-100" src="/image.jpg" />
                     </figure>
                 </div>

src/scss/_variables.scss

@@ -87,53 +87,29 @@ $plain-ui__link: $plain-ui__text !default;
 $plain-ui__link-hover: $plain-ui__danger !default;
 
 $plain-ui__colors: (
-    --body,
-    --text,
-    --text-contrast,
-    --primary,
-    --primary-contrast,
-    --active,
-    --active-contrast,
-    --link,
-    --link-hover,
-    --danger,
-    --danger-contrast,
-    --info,
-    --info-constrast,
-    --success,
-    --success-contrast,
-    --warning,
-    --warning-contrast,
-    --background,
-    --background-contrast,
-    --border,
-    --border-contrast
+    '--body': $plain-ui__body,
+    '--text': $plain-ui__text,
+    '--text-contrast': $plain-ui__text-contrast,
+    '--primary': $plain-ui__primary,
+    '--primary-contrast': $plain-ui__primary-contrast,
+    '--active': #{$plain-ui__active},
+    '--active-contrast': $plain-ui__active-contrast,
+    '--link': $plain-ui__link,
+    '--link-hover': $plain-ui__link-hover,
+    '--danger': $plain-ui__danger,
+    '--danger-contrast': $plain-ui__danger-contrast,
+    '--info': $plain-ui__info,
+    '--info-constrast': $plain-ui__info-contrast,
+    '--success': $plain-ui__success,
+    '--success-contrast': $plain-ui__success-contrast,
+    '--warning': $plain-ui__warning,
+    '--warning-contrast': $plain-ui__warning-contrast,
+    '--background': $plain-ui__background,
+    '--background-contrast': $plain-ui__background-contrast,
+    '--border': $plain-ui__border,
+    '--border-contrast': $plain-ui__border-contrast
 ) !default;
 
-:root {
-    --body: #{$plain-ui__body};
-    --text: #{$plain-ui__text};
-    --text-contrast: #{$plain-ui__text-contrast};
-    --primary: #{$plain-ui__primary};
-    --primary-contrast: #{$plain-ui__primary-contrast};
-    --active: #{$plain-ui__active};
-    --active-contrast: #{$plain-ui__active-contrast};
-    --link: #{$plain-ui__link};
-    --link-hover: #{$plain-ui__link-hover};
-    --danger: #{$plain-ui__danger};
-    --danger-contrast: #{$plain-ui__danger-contrast};
-    --info: #{$plain-ui__info};
-    --info-constrast: #{$plain-ui__danger-contrast};
-    --success: #{$plain-ui__success};
-    --success-contrast: #{$plain-ui__success-contrast};
-    --warning: #{$plain-ui__warning};
-    --warning-contrast: #{$plain-ui__warning-contrast};
-    --background: #{$plain-ui__background};
-    --background-contrast: #{$plain-ui__background-contrast};
-    --border: #{$plain-ui__border};
-    --border-contrast: #{$plain-ui__border-contrast};
-}
-
 /**
  *  margin
  *

src/scss/core/_normalize.scss

@@ -9,6 +9,12 @@
  *
  */
 
+:root {
+    @each $var, $color in $plain-ui__colors {
+        #{$var}: $color;
+    }
+}
+
 html {
     font-size: 100%;
     line-height: 1.15; // Correct the line height in all browsers.

src/scss/helpers/_colors.scss

@@ -6,7 +6,7 @@
  *
  */
 
-@each $name in $plain-ui__colors {
+@each $name, $color in $plain-ui__colors {
     $class: str-replace($name, '--', '');
 
     .color-#{$class} {
@@ -14,7 +14,7 @@
     }
 }
 
-@each $name in $plain-ui__colors {
+@each $name, $color in $plain-ui__colors {
     $class: str-replace($name, '--', '');
 
     .fill-#{$class} {
@@ -22,7 +22,7 @@
     }
 }
 
-@each $name in $plain-ui__colors {
+@each $name, $color in $plain-ui__colors {
     $class: str-replace($name, '--', '');
 
     .border-color-#{$class} {
@@ -30,7 +30,7 @@
     }
 }
 
-@each $name in $plain-ui__colors {
+@each $name, $color in $plain-ui__colors {
     $class: str-replace($name, '--', '');
 
     .background-color-#{$class} {