adding

dist/index.html

@@ -265,6 +265,9 @@
 
     <div class="container">
         <div class="grid">
+            <div class="col-12">
+                <h2 class="">Media</h2>
+            </div>
             <div class="col-12">
                 <figure class="figure">
                     <img class="media" src="https://via.placeholder.com/150" />
@@ -276,5 +279,68 @@
         </div>
     </div>
 
+    <div class="container">
+        <div class="grid">
+            <div class="col-12">
+                <h2>Layout</h2>
+            </div>
+            <div class="col-12">
+                <h2>Masonry</h3>
+            </div>
+            <div class="col-12">
+                <div class="masonry">
+                    <div class="masonry__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="masonry__item">
+                        <figure class="figure">
+                            <img class="media" src="https://via.placeholder.com/400/600" />
+                            <figcaption class="figure__caption">
+                                food truck yr franzen pabst
+                            </figcaption>
+                        </figure>
+                    </div>
+                    <div class="masonry__item">
+                        <figure class="figure">
+                            <img class="media" src="https://via.placeholder.com/800/400" />
+                            <figcaption class="figure__caption">
+                                food truck yr franzen pabst
+                            </figcaption>
+                        </figure>
+                    </div>
+                    <div class="masonry__item">
+                        <figure class="figure">
+                            <img class="media" src="https://via.placeholder.com/600/400" />
+                            <figcaption class="figure__caption">
+                                food truck yr franzen pabst
+                            </figcaption>
+                        </figure>
+                    </div>
+                    <div class="masonry__item">
+                        <figure class="figure">
+                            <img class="media" src="https://via.placeholder.com/400/600" />
+                            <figcaption class="figure__caption">
+                                food truck yr franzen pabst
+                            </figcaption>
+                        </figure>
+                    </div>
+                    <div class="masonry__item">
+                        <figure class="figure">
+                            <img class="media" src="https://via.placeholder.com/800/400" />
+                            <figcaption class="figure__caption">
+                                food truck yr franzen pabst
+                            </figcaption>
+                        </figure>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
 </body>
 </html

dist/plain-ui.css

@@ -327,6 +327,15 @@ summary {
  *
  *
  */
+/**
+ *  <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>
+ *
+ */
 a {
   color: #fff;
 }
@@ -399,6 +408,9 @@ body {
   color: white;
   background-color: #3e3e3e;
 }
+.button:focus, .button:active {
+  outline: 1px solid #646464;
+}
 .button:disabled {
   opacity: 0.5;
 }
@@ -408,12 +420,16 @@ body {
   background-color: white;
   color: #3e3e3e;
 }
+
 .button--danger {
   border-color: #d95959;
 }
 .button--danger:hover {
   background-color: #d95959;
 }
+.button--danger:focus, .button--danger:active {
+  outline: 2px solid #e79797;
+}
 
 .field-group {
   margin-bottom: 1.2em;
@@ -667,3 +683,14 @@ img.media {
   -o-object-fit: contain;
      object-fit: contain;
 }
+
+.masonry {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  width: 100%;
+}
+.masonry__item {
+  width: 33.3%;
+  flex: 1;
+}

src/scss/components/_button.scss

@@ -45,7 +45,7 @@
         }
 
         &:focus, &:active {
-
+            outline: 1px solid lighten($plain-ui__primary-light, 15%);
         }
 
         &:disabled {
@@ -58,13 +58,22 @@
                 color: $plain-ui__primary-light;
             }
         }
+    }
+}
 
+@mixin plain-ui__component__button-colors()
+{
+    .button {
         &--danger {
             border-color: $plain-ui__danger-light;
 
             &:hover {
                 background-color: $plain-ui__danger-light;
             }
+
+            &:focus, &:active {
+                outline: 2px solid lighten($plain-ui__danger-light, 15%);
+            }
         }
     }
 }

src/scss/components/_group.scss

@@ -0,0 +1,25 @@
+/**
+ *
+ *
+ *
+ *
+ */
+
+@mixin plain-ui__component__bar()
+{
+    .bar {
+        display: flex;
+
+        &__start {
+            justify-content: start;
+        }
+
+        &__title {
+            @extend .w-100;
+        }
+
+        &__end {
+            justify-content: end;
+        }
+    }
+}

src/scss/core/helpers/_core.scss

@@ -0,0 +1,179 @@
+/**
+ *
+ *
+ *
+ *
+ */
+
+@mixin plain-ui__helpers__core()
+{
+    /**
+     *  borders
+     *
+     *
+     */
+
+    .border {
+        border: $crispy__border !important;
+    }
+
+    .border-round {
+        border-radius: $crispy__border-radius !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;
+    }
+
+    // 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);
+        }
+    }
+
+    /**
+     *  colors
+     *
+     *
+     */
+
+    @each $name, $color in $plain-ui__colors {
+        .text-color-#{$name} {
+            color: $color !important;
+        }
+    }
+
+    @each $name, $color in $plain-ui__colors {
+        .border-color-#{$name} {
+            border-color: $color !important;
+        }
+    }
+
+    @each $name, $color in $plain-ui__colors {
+        .background-color-#{$name} {
+            background-color: $color !important;
+        }
+    }
+
+    /**
+     *  floating
+     *
+     *
+     */
+
+    .float-left {
+        float: left;
+    }
+
+    .float-right {
+        float: right;
+    }
+
+    .float-none {
+        float: none;
+    }
+
+    .centered {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .clearfix {
+        @include plain-ui__clearfix();
+    }
+
+    /**
+     *  position
+     *
+     *
+     */
+
+    .absolute {
+        position: absolute !important;
+    }
+
+    .fixed {
+        position: fixed !important;
+    }
+
+    .relative {
+        position: relative !important;
+    }
+}

src/scss/core/helpers/_sizing.scss

@@ -0,0 +1,11 @@
+/**
+ *
+ *
+ *
+ *
+ */
+
+@mixin plain-ui__helpers__sizing()
+{
+
+}

src/scss/layout/_masonry.scss

@@ -0,0 +1,37 @@
+/**
+ *  <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

@@ -0,0 +1,20 @@
+/**
+ *  <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

@@ -13,15 +13,22 @@
     'components/hero',
     'components/panel',
     'components/media',
-    'components/table';
+    'components/table',
+
+    'layout/masonry';
 
 @include plain-ui__core();
 
 @include plain-ui__component__badge();
+
 @include plain-ui__component__button();
+@include plain-ui__component__button-colors();
+
 @include plain-ui__component__field();
 @include plain-ui__component__icon();
 @include plain-ui__component__panel();
 @include plain-ui__component__media();
 @include plain-ui__component__table();
-@include plain-ui__component__hero();
+@include plain-ui__component__hero();
+
+@include plain-ui__layout__masonry();