adding

dist/index.html

@@ -43,6 +43,9 @@
                 <button class="button button--danger">
                     Danger
                 </button>
+                <button class="button button--hover">
+                    Hover
+                </button>
             </div>
         </div>
 
@@ -62,6 +65,23 @@
             </div>
         </div>
 
+        <div class="grid">
+            <div class="col-12">
+                <div class="bar">
+                    <div class="bar__start">
+                        <button class="button button--no-style">
+                            <svg class="icon fill-white marginless" aria-hidden="true">
+                                <use xlink:href="symbol-defs.svg#icon-close"></use>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="bar__main">
+                        Bar
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="grid">
             <div class="col-12">
                 <h2>Icon</h2>
@@ -284,18 +304,68 @@
             <div class="col-12">
                 <h2>Layout</h2>
             </div>
+
             <div class="col-12">
-                <h2>Masonry</h3>
+                <h2>Slider</h3>
             </div>
-            <div class="col-12">
+        </div>
-                <div class="masonry">
+    </div>
-                    <div class="masonry__item">
+
+    <div class="slider">
+        <div class="slider__inner">
+            <div class="slider__item">
+                <figure class="figure">
+                    <img class="media" src="https://via.placeholder.com/600/200" />
+                    <figcaption class="figure__caption">
+                        food truck yr franzen pabst
+                    </figcaption>
+                </figure>
+                </div>
+                <div class="slider__item">
+                    <figure class="figure">
+                        <img class="media" src="https://via.placeholder.com/600/200" />
+                        <figcaption class="figure__caption">
+                            food truck yr franzen pabst
+                        </figcaption>
+                    </figure>
+                </div>
+                <div class="slider__item">
+                    <figure class="figure">
+                        <img class="media" src="https://via.placeholder.com/600/200" />
+                        <figcaption class="figure__caption">
+                            food truck yr franzen pabst
+                        </figcaption>
+                    </figure>
+                </div>
+                <div class="slider__item">
                     <figure class="figure">
                         <img class="media" src="https://via.placeholder.com/600/200" />
                         <figcaption class="figure__caption">
                             food truck yr franzen pabst
                         </figcaption>
                     </figure>
+                </div>
+                <div class="slider__item">
+                    <figure class="figure">
+                        <img class="media" src="https://via.placeholder.com/600/200" />
+                        <figcaption class="figure__caption">
+                            food truck yr franzen pabst
+                        </figcaption>
+                    </figure>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="grid">
+            <div class="col-12">
+                <h2>Masonry</h3>
+            </div>
+            <div class="col-12">
+                <div class="masonry">
+                    <div class="masonry__item">
+
                     </div>
                     <div class="masonry__item">
                         <figure class="figure">

dist/plain-ui.css

@@ -285,6 +285,12 @@ summary {
  *
  *
  */
+/**
+ *
+ *
+ *
+ *
+ */
 /**
  *
  *
@@ -328,12 +334,17 @@ summary {
  *
  */
 /**
- *  <figure class="media-figure">
+ *  <div class="slider">
- *      <img class="media__img" src="https://via.placeholder.com/150" />
+ *      <div class="slider__inner">
- *      <figcaption class="media-figure__caption">
+ *          <div class="slider__item w-10"></div>
- *          food truck yr franzen pabst
+ *      </div>
- *      </figcaption>
+ *  </div>
- *  </figure>
+ *
+ */
+/**
+ *
+ *
+ *
  *
  */
 a {
@@ -360,6 +371,200 @@ body {
   line-height: 1.4;
 }
 
+/**
+ *  borders
+ *
+ *
+ */
+.border {
+  border: 1px solid #3e3e3e !important;
+}
+
+.border-round {
+  border-radius: 2px !important;
+}
+
+.borderless {
+  border: 0 !important;
+}
+
+.radiusless {
+  border-radius: 0 !important;
+}
+
+/**
+ *
+ *
+ */
+.round {
+  border-radius: 50% !important;
+}
+
+/**
+ * typography
+ *
+ *
+ */
+.left {
+  text-align: left !important;
+}
+
+.right {
+  text-align: right !important;
+}
+
+.center {
+  text-align: center !important;
+}
+
+.justify {
+  text-align: justify !important;
+}
+
+.uppercase {
+  text-transform: uppercase !important;
+}
+
+.lowercase {
+  text-transform: lowercase !important;
+}
+
+.crossed {
+  text-decoration: line-through !important;
+}
+
+.underline {
+  text-decoration: underline !important;
+}
+
+.capitalize {
+  text-transform: capitalize !important;
+}
+
+.italic {
+  font-style: italic !important;
+}
+
+.light {
+  font-weight: lighter !important;
+}
+
+.normal {
+  font-weight: normal !important;
+}
+
+.medium {
+  font-weight: medium !important;
+}
+
+.bold {
+  font-weight: bolder !important;
+}
+
+.text-size-default {
+  font-size: 1rem !important;
+}
+
+.text-size-small {
+  font-size: 0.75rem !important;
+}
+
+.text-size-medium {
+  font-size: 1.5rem !important;
+}
+
+.text-size-large {
+  font-size: 2rem !important;
+}
+
+.text-size-big {
+  font-size: 3rem !important;
+}
+
+/**
+ *  colors
+ *
+ *
+ */
+.text-color-primary {
+  color: #3e3e3e !important;
+}
+
+.text-color-white {
+  color: #fff !important;
+}
+
+.fill-primary {
+  fill: #3e3e3e !important;
+}
+
+.fill-white {
+  fill: #fff !important;
+}
+
+.border-color-primary {
+  border-color: #3e3e3e !important;
+}
+
+.border-color-white {
+  border-color: #fff !important;
+}
+
+.background-color-primary {
+  background-color: #3e3e3e !important;
+}
+
+.background-color-white {
+  background-color: #fff !important;
+}
+
+/**
+ *  floating
+ *
+ *
+ */
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
+
+.float-none {
+  float: none;
+}
+
+.centered {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.clearfix::before, .clearfix::after {
+  display: table;
+  content: " ";
+}
+.clearfix::after {
+  clear: both;
+}
+
+/**
+ *  position
+ *
+ *
+ */
+.absolute {
+  position: absolute !important;
+}
+
+.fixed {
+  position: fixed !important;
+}
+
+.relative {
+  position: relative !important;
+}
+
 .badge {
   display: inline-block;
   background-color: #3e3e3e;
@@ -402,7 +607,13 @@ body {
 .button--small {
   font-size: 0.8em;
 }
-.button:hover {
+.button--no-style {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+.button:hover, .button--hover {
   cursor: pointer;
   text-decoration: none;
   color: white;
@@ -684,13 +895,32 @@ img.media {
      object-fit: contain;
 }
 
-.masonry {
+.slider {
+  display: flex;
+}
+.slider__inner {
+  display: flex;
+  overflow: hidden;
+}
+.slider__item {
+  flex: none;
+  width: 33%;
+}
+
+.bar {
   display: flex;
-  flex-direction: column;
+  background-color: #3e3e3e;
-  flex-wrap: wrap;
+  color: white;
+  padding: 0.8em 1.2em;
+}
+.bar__start {
+  justify-content: start;
+  margin-right: 0.75em;
+}
+.bar__main {
   width: 100%;
 }
-.masonry__item {
+.bar__end {
-  width: 33.3%;
+  justify-content: end;
-  flex: 1;
+  margin-left: 0.75em;
 }

src/scss/_mixins.scss

@@ -142,7 +142,7 @@
  *
  */
 
-@mixin plain-ui__media-breakpoints($property, $breakpoints, $important: false) {
+@mixin plain-ui__breakpoints($property, $breakpoints, $important: false) {
     @each $breakpoint, $value in $breakpoints {
         @media only screen and (min-width: $breakpoint) {
             @if $important == false {
@@ -169,7 +169,7 @@
  *
  */
 
-@mixin plain-ui__media-breakpoints-calculate($property, $factor, $breakpoints, $important: false) {
+@mixin plain-ui__breakpoints-calculate($property, $factor, $breakpoints, $important: false) {
     @each $breakpoint, $value in $breakpoints {
         @media only screen and (min-width: $breakpoint) {
             @if $important == false {
@@ -194,7 +194,7 @@
  *  @param  {Boolean} $important   [false]
  *
  */
-@mixin plain-ui__media-breakpoints-font-size($breakpoints, $font-size, $default, $important: false) {
+@mixin plain-ui__breakpoints-font-size($breakpoints, $font-size, $default, $important: false) {
     @each $breakpoint, $value in $breakpoints {
 
         // getting diff

src/scss/_variables.scss

@@ -21,7 +21,6 @@ $plain-ui__md : 992px !default;
 $plain-ui__lg : 1200px !default;
 $plain-ui__xlg: 1600px !default;
 
-
 /**
  *  fonts
  *
@@ -70,6 +69,11 @@ $plain-ui__border-light: #dfdfdf !default;
 
 $plain-ui__link-light: #fff !default;
 
+$plain-ui__colors: (
+    'primary'    : $plain-ui__primary-light,
+    'white'      : #fff
+) !default;
+
 /**
  *  padding & margin
  *
@@ -117,3 +121,6 @@ $plain-ui__heading__margin-breakpoints: $plain-ui__margin-breakpoints !default;
 
 $plain-ui__z-index__modal: 1000 !default;
 $plain-ui__z-index__overlay: 999 !default;
+
+$plain-ui__border-radius: 2px;
+$plain-ui__border: 1px solid $plain-ui__primary-light;

src/scss/components/_bar.scss

@@ -0,0 +1,31 @@
+/**
+ *
+ *
+ *
+ *
+ */
+
+@mixin plain-ui__component__bar()
+{
+    .bar {
+        display: flex;
+
+        background-color: $plain-ui__primary-light;
+        color: white;
+        padding: 0.8em 1.2em;
+
+        &__start {
+            justify-content: start;
+            margin-right: 0.75em;
+        }
+
+        &__main {
+            width: 100%;
+        }
+
+        &__end {
+            justify-content: end;
+            margin-left: 0.75em;
+        }
+    }
+}

src/scss/components/_button.scss

@@ -37,7 +37,14 @@
             font-size: 0.8em;
         }
 
-        &:hover {
+        &--no-style {
+            margin: 0;
+            padding: 0;
+            border: none;
+            background: transparent;
+        }
+
+        &:hover, &--hover {
             cursor: pointer;
             text-decoration: none;
             color: white;

src/scss/components/_content.scss

@@ -8,5 +8,13 @@
 {
     .content {
         font-size: 1rem;
+
+        // list 
+
+        ul {
+            li {
+
+            }
+        }
     }
 }

src/scss/components/_group.scss

@@ -5,21 +5,17 @@
  *
  */
 
-@mixin plain-ui__component__bar()
+@mixin plain-ui__component__group()
 {
-    .bar {
+    .group {
-        display: flex;
+        &__item {
+            width: auto;
+            display: inline-block;
+            margin: 0 1em 1em;
 
-        &__start {
+            &:last-child {
-            justify-content: start;
+                margin-right: 0;
             }
-
-        &__title {
-            @extend .w-100;
-        }
-
-        &__end {
-            justify-content: end;
         }
     }
 }

src/scss/components/_progress.scss

@@ -0,0 +1,9 @@
+/**
+ *
+ *
+ *  
+ */
+@mixin component__loading()
+{
+
+}

src/scss/components/_slider.scss

@@ -0,0 +1,25 @@
+/**
+ *  <div class="slider">
+ *      <div class="slider__inner">
+ *          <div class="slider__item w-10"></div>
+ *      </div>
+ *  </div>
+ *
+ */
+
+@mixin plain-ui__component__slider()
+{
+    .slider {
+        display: flex;
+
+        &__inner {
+            display: flex;
+            overflow: hidden;
+        }
+
+        &__item {
+            flex: none;
+            width: 33%;
+        }
+    }
+}

src/scss/core/helpers/_core.scss

@@ -14,11 +14,11 @@
      */
 
     .border {
-        border: $crispy__border !important;
+        border: $plain-ui__border !important;
     }
 
     .border-round {
-        border-radius: $crispy__border-radius !important;
+        border-radius: $plain-ui__border-radius !important;
     }
 
     .borderless {
@@ -100,11 +100,10 @@
         font-weight: bolder !important;
     }
 
-    // create
     @each $name, $font-size in $plain-ui__font-sizes {
         .text-size-#{$name} {
             font-size: $font-size !important;
-            @include plain-ui__breakpoints-font-size($crispy__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true);
+            //@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true);
         }
     }
 
@@ -120,6 +119,12 @@
         }
     }
 
+    @each $name, $color in $plain-ui__colors {
+        .fill-#{$name} {
+            fill: $color !important;
+        }
+    }
+
     @each $name, $color in $plain-ui__colors {
         .border-color-#{$name} {
             border-color: $color !important;

src/scss/layout/_flex.scss

@@ -0,0 +1,4 @@
+@import 'reflex-grid';
+
+$reflex-prefix: 'flex';
+$legacy-support: false;

src/scss/layout/_masonry.scss

@@ -1,37 +0,0 @@
-/**
- *  <figure class="media-figure">
- *      <img class="media__img" src="https://via.placeholder.com/150" />
- *      <figcaption class="media-figure__caption">
- *          food truck yr franzen pabst
- *      </figcaption>
- *  </figure>
- *
- */
-
-@mixin plain-ui__layout__masonry()
-{
-    .masonry {
-        display: flex;
-        flex-flow: column wrap;
-        align-content: space-between;
-
-        &__item {
-            width: 32%;
-            margin-bottom: 2%; /* Optional */
-        }
-
-        /* Re-order items into 3 rows */
-        &__item:nth-child(3n+1) { order: 1; }
-        &__item:nth-child(3n+2) { order: 2; }
-        &__item:nth-child(3n)   { order: 3; }
-
-        /* Force new columns */
-        &:before,
-        &:after {
-            content: "";
-            flex-basis: 100%;
-            width: 0;
-            order: 2;
-        }
-    }
-}

src/scss/layout/_slider.scss

@@ -1,20 +0,0 @@
-/**
- *  <figure class="media-figure">
- *      <img class="media__img" src="https://via.placeholder.com/150" />
- *      <figcaption class="media-figure__caption">
- *          food truck yr franzen pabst
- *      </figcaption>
- *  </figure>
- *
- */
-
-@mixin plain-ui__layout__slider()
-{
-    .slider {
-        display: flex;
-        
-        &__item {
-
-        }
-    }
-}

src/scss/plain-ui.scss

@@ -6,6 +6,8 @@
     'variables',
     'core',
 
+    'core/helpers/core',
+
     'components/badge',
     'components/button',
     'components/field',
@@ -14,10 +16,11 @@
     'components/panel',
     'components/media',
     'components/table',
-
+    'components/slider',
-    'layout/masonry';
+    'components/bar';
 
 @include plain-ui__core();
+@include plain-ui__helpers__core();
 
 @include plain-ui__component__badge();
 
@@ -30,5 +33,5 @@
 @include plain-ui__component__media();
 @include plain-ui__component__table();
 @include plain-ui__component__hero();
-
+@include plain-ui__component__slider();
-@include plain-ui__layout__masonry();
+@include plain-ui__component__bar();