adding

public/components.html

@@ -48,52 +48,63 @@
         </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">
-                <h2>Components</h2>
+                <h2 class="highlight">
+                    Components
+                </h2>
 
-                <h3>Buttons</h3>
+                <h3>
+                    Buttons
+                </h3>
+
+                <div class="content">
+<code>&lt;button class=&quot;button&quot;&gt;
+    Default
+&lt;/button&gt;
+</code>
+                </div>
 
+                <div class="m-bottom-4">
                     <button class="button">
                         Default
                     </button>
                     <button class="button">
-                    Default
+                        Icon
                         <svg class="icon fill-success" aria-hidden="true">
                             <use xlink:href="symbol-defs.svg#icon-check"></use>
                         </svg>
                     </button>
+                    <button class="button button--selected">
+                        Selected
+                    </button>
+                    <button class="button" disabled>
+                        Disabled
+                    </button>
+                </div>
+
+                <div class="m-bottom-4">
                     <button class="button button--danger">
-                    Danger
+                        danger
                     </button>
-                <button class="button button--selected">
+                    <button class="button button--success">
-                    Hover
+                        success
                     </button>
-                <button class="button button--outline">
+                    <button class="button button--warning">
-                    Outline
+                        warning
                     </button>
-                <button class="button button--danger button--outline">
+                    <button class="button button--info">
-                    Danger Outline
+                        info
                     </button>
                 </div>
-            <div class="col-12">
+
-                <button class="button" disabled>
+                <div class="m-bottom-4">
-                    Disabled
+                    <button class="button button--outline">
+                        outline
                     </button>
                 </div>
-            <div class="col-12">
+
                 <button class="button button--small">
                     Small
                 </button>
@@ -408,11 +419,14 @@
                 <h2>
                     Hero
                 </h2>
-                <div class="hero">
+                <code>
-                    <img style="max-height: 400px;" src="/image.jpg" />
+
+                </code>
             </div>
         </div>
     </div>
+    <div class="hero">
+        <img style="max-height: 400px;" src="/image.jpg" />
     </div>
 
     <div class="container">

public/index.html

@@ -66,7 +66,7 @@
                 <div class="content">
                     <div class="panel panel--border-highlight border-color-danger m-bottom-4">
                         <div class="panel__body">
-                            <div class="content marginless-last-child">
+                            <div class="content m-bottom-last-child-0">
                                 <p>
                                     On development, a few styles and names will be change until release
                                 </p>
@@ -118,7 +118,18 @@
 
                         <a href="https://purgecss.com/" target="_blank">PurgeCSS</a>
                     </p>
-<code></code>
+<code>mix
+    .setPublicPath('./public')
+    .sass('src/scss/plain-ui.scss', 'public/plain-ui.css')
+    .purgeCss({
+        extend: {
+            enabled: true,
+            content: [
+                path.join(__dirname, 'public/*.html'),
+            ]
+        }
+    })
+</code>
                 </div>
             </div>
         </div>

public/spritemap.js

@@ -1 +1,13 @@
-(self.webpackChunkplain_ui=self.webpackChunkplain_ui||[]).push([[355],{256:()=>{}}]);
+(self["webpackChunkplain_ui"] = self["webpackChunkplain_ui"] || []).push([["spritemap"],{
+
+/***/ "?4e0c":
+/*!******************************!*\
+  !*** spritemap-dummy-module ***!
+  \******************************/
+/***/ (() => {
+
+
+
+/***/ })
+
+}]);

src/scss/_variables.scss

@@ -160,4 +160,4 @@ $plain-ui__padding-breakpoints: (
  */
 
 $plain-ui__border-radius: 2px;
-$plain-ui__border: 1px solid var(--primary);
+$plain-ui__border: 1px solid var(--border);

src/scss/components/_button.scss

@@ -84,15 +84,39 @@
         }
     }
 
+    &--info {
+        border-color: var(--info);
+
+        &:hover {
+            background-color: var(--info);
+        }
+
+        &:focus, &:active {
+            outline: 2px solid var(--info);
+        }
+    }
+
+    &--warning {
+        border-color: var(--warning);
+
+        &:hover {
+            background-color: var(--warning);
+        }
+
+        &:focus, &:active {
+            outline: 2px solid var(--warning);
+        }
+    }
+
     &--success {
         border-color: var(--success);
 
         &:hover {
-            background-color: var(--sucess);
+            background-color: var(--success);
         }
 
         &:focus, &:active {
-            outline: 2px solid var(--active);
+            outline: 2px solid var(--success);
         }
     }
 
@@ -101,20 +125,26 @@
 
         &:hover {
             color: var(--border);
-            border-color: var(--border-contrast);
+            border-color: lighten($plain-ui__primary, 40%);
             background-color: transparent;
         }
     }
 
     &--danger.button--outline {
         &:hover {
-            border-color: var(--danger);
+            border-color: lighten($plain-ui__danger, 20%);
+        }
+    }
+
+    &--info.button--outline {
+        &:hover {
+            border-color: lighten($plain-ui__info, 20%);
         }
     }
 
     &--success.button--outline {
         &:hover {
-            border-color: var(--success);
+            border-color: lighten($plain-ui__success, 20%);
         }
     }
 }

src/scss/helpers/_sizing.scss

@@ -7,7 +7,46 @@
  *
  */
 
-$plain-ui__helpers__height-steps: 50;
+$plain-ui__sizing_steps: 50 !default;
+
+/**
+ *  mixin: sizing
+ *
+ */
+@mixin sizing($class, $style, $i, $value)
+{
+    .#{$class}-#{$i} {
+        #{$style}: $value;
+    }
+}
+
+/**
+ *  mixin: sizing for each breakpoint
+ *
+ *
+ */
+@mixin sizing_breakpoints($class, $style, $i, $value)
+{
+    @include plain-ui__media-xs() {
+        @include sizing($class, $style, 'xs-' + $i, $value);
+    }
+
+    @include plain-ui__media-sm() {
+        @include sizing($class, $style, 'sm-' + $i, $value);
+    }
+
+    @include plain-ui__media-md() {
+        @include sizing($class, $style, 'md-' + $i, $value);
+    }
+
+    @include plain-ui__media-lg() {
+        @include sizing($class, $style, 'lg-' + $i, $value);
+    }
+
+    @include plain-ui__media-xlg() {
+        @include sizing($class, $style, 'xlg-' + $i, $value);
+    }
+}
 
 .w-0 { width: 0; }
 .h-0 { height: 0; }
@@ -16,24 +55,31 @@ $plain-ui__helpers__height-steps: 50;
 .w-100 { width: 100%; }
 .h-100 { height: 100%; }
 
-@for $i from 1 through $reflex-columns {
+@for $i from 1 through $reflex-columns
-    .w-col-#{$i} {
+{
-        width: percentage(($i / $reflex-columns));
+    $value: percentage(($i / $reflex-columns));
-    }
 
-    .h-col-#{$i} {
+    @include sizing('w-col', 'width', $i, $value);
-        height: percentage(($i / $reflex-columns));
+    @include sizing_breakpoints('w-col', 'width', $i, $value);
-    }
+
+    $value: percentage(($i / $reflex-columns));
+
+    @include sizing('h-col', 'height', $i, $value);
+    @include sizing_breakpoints('h-col', 'height', $i, $value);
 }
 
-@for $i from 1 through $plain-ui__helpers__height-steps {
+@for $i from 1 through $plain-ui__sizing_steps
-    .w-#{$i} {
+{
-        width: #{($i * 0.5)}rem;
+    $value: #{($i * 0.5)}rem;
-    }
+
+    @include sizing('w', 'width', $i, $value);
+    @include sizing_breakpoints('w', 'width', $i, $value);
 }
 
-@for $i from 1 through $plain-ui__helpers__height-steps {
+@for $i from 1 through $plain-ui__sizing_steps
-    .h-#{$i} {
+{
-        height: #{($i * 0.5)}rem;
+    $value: #{($i * 0.5)}rem;
-    }
+
+    @include sizing('h', 'height', $i, $value);
+    @include sizing_breakpoints('h', 'height', $i, $value);
 }

src/scss/helpers/_spacing.scss

@@ -1,3 +1,11 @@
+/**
+ *  Spacing
+ *
+ *  creates margin and padding for each direction and for each breakpont
+ *
+ *
+ */
+
 $plain-ui__spacing-direction: (
     'top',
     'bottom',
@@ -8,6 +16,46 @@ $plain-ui__spacing-direction: (
 $plain-ui__spacing-gap: 0.25 !default;
 $plain-ui__spacing-steps: 10 !default;
 
+/**
+ *  mixin: spacing for single padding or margin
+ *
+ *
+ */
+@mixin spacing($class, $style, $direction, $name, $value)
+{
+    .#{$class}-#{$direction}-#{$name} {
+        #{$style}-#{$direction}: $value;
+    }
+}
+
+/**
+ *  mixin: spacing for each breakpoint
+ *
+ *
+ */
+@mixin spacing_breakpoints($class, $style, $direction, $i, $value)
+{
+    @include plain-ui__media-xs() {
+        @include spacing($class, $style, $direction, 'xs-' + $i, $value);
+    }
+
+    @include plain-ui__media-sm() {
+        @include spacing($class, $style, $direction, 'sm-' + $i, $value);
+    }
+
+    @include plain-ui__media-md() {
+        @include spacing($class, $style, $direction, 'md-' + $i, $value);
+    }
+
+    @include plain-ui__media-lg() {
+        @include spacing($class, $style, $direction, 'lg-' + $i, $value);
+    }
+
+    @include plain-ui__media-xlg() {
+        @include spacing($class, $style, $direction, 'xlg-' + $i, $value);
+    }
+}
+
 /**
  *
  *
@@ -22,22 +70,15 @@ $plain-ui__spacing-steps: 10 !default;
     padding: 0;
 }
 
-.marginless-last-child {
+.m-top-last-child-0 {
     > *:last-child {
-        margin-bottom: 0;
+        margin-top: 0;
     }
 }
 
-
+.m-bottom-last-child-0 {
-/**
+    > *:last-child {
- *  spacing for single padding or margin
+        margin-bottom: 0;
- *
- *
- */
-@mixin spacing($class, $style, $direction, $name, $value)
-{
-    .#{$class}-#{$direction}-#{$name} {
-        #{$style}-#{$direction}: $value;
     }
 }
 
@@ -49,26 +90,7 @@ $plain-ui__spacing-steps: 10 !default;
     @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 spacing_breakpoints('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);
-        }
     }
 }
 
@@ -80,25 +102,6 @@ $plain-ui__spacing-steps: 10 !default;
     @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 spacing_breakpoints('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);
-        }
     }
 }

webpack.mix.js

@@ -44,14 +44,8 @@ mix
     .sass('src/scss/plain-ui.scss', 'public/plain-ui.css')
     .purgeCss({
         extend: {
-            enabled: true,
             content: [
                 path.join(__dirname, 'public/*.html'),
             ]
         }
     })
-    .options({
-        terser: {
-            extractComments: false,
-        }
-    })