adding

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 m-bottom-last-child-0">
+                            <div class="content m-last-child-0">
                                 <p>
                                     On development, a few styles and names will be change until release
                                 </p>
@@ -152,7 +152,7 @@
                     Basic Styles
                 </h2>
 
-                <h3 class="highlight">
+                <h3>
                     Normalize
                 </h3>
 
@@ -163,10 +163,9 @@
                     </p>
                 </div>
 
-                <h2 class="highlight">
+                <h2>
                     Heading
                 </h2>
-
                 <h1>Heading 1</h1>
                 <h2>Heading 2</h2>
                 <h3>Heading 3</h3>
@@ -174,23 +173,12 @@
                 <h5>Heading 5</h5>
                 <h6>Heading 6</h6>
 
-                <h3 class="highlight">
-                    Heading + .highlight
-                </h3>
-
-                <h1 class="highlight">Heading 1</h1>
-                <h2 class="highlight">Heading 2</h2>
-                <h3 class="highlight">Heading 3</h3>
-                <h4 class="highlight">Heading 4</h4>
-                <h5 class="highlight">Heading 5</h5>
-                <h6 class="highlight">Heading 6</h6>
-
-                <h3 class="highlight">
+                <h3>
                     Content
                 </h3>
                 <div class="panel panel--border-highlight border-color-info m-bottom-4">
                     <div class="panel__body">
-                        <div class="content marginless-last-child">
+                        <div class="content m-last-child-0">
                             <p>
                                 The Class "content" will trigger a few styles for
                             </p>

public/plain-ui.css

@@ -1672,6 +1672,7 @@
   --background-contrast: #ffffff;
   --border: #3e3e3e;
   --border-contrast: #ffffff;
+  --font-family: IBM Plex Mono, sans-serif;
 }
 
 html {
@@ -1692,7 +1693,7 @@ legend {
 }
 
 body {
-  font-family: "IBM Plex Mono", sans-serif;
+  font-family: var(--font-family);
   color: var(--text);
   background-color: var(--body);
   direction: ltr;
@@ -1758,7 +1759,7 @@ textarea {
 }
 
 fieldset {
-  margin: 0 0 1rem;
+  margin: 0.5rem 0 1rem;
 }
 
 button,
@@ -1825,7 +1826,7 @@ hr {
   overflow: visible;
   border: 0;
   border-top: 1px solid var(--border);
-  margin: 0 0 1rem;
+  margin: 0.5rem 0 1rem;
 }
 
 progress {
@@ -1844,7 +1845,7 @@ code,
 kbd,
 pre,
 samp {
-  font-family: "IBM Plex Mono", sans-serif;
+  font-family: var(--font-family);
   font-size: 0.9rem;
 }
 
@@ -1873,11 +1874,11 @@ samp {
    */
 }
 .content p {
-  margin: 0 0 1rem;
+  margin: 0.5rem 0 1rem;
 }
 @media only screen and (min-width: 992px) {
   .content p {
-    margin: 0 0 0.8rem;
+    margin: 0.6rem 0 1.2rem;
   }
 }
 .content a,
@@ -1929,13 +1930,13 @@ samp {
 .content ol,
 .content ul {
   padding: 0;
-  margin: 0 0 1rem;
+  margin: 0.5rem 0 1rem;
 }
 @media only screen and (min-width: 992px) {
   .content dl,
 .content ol,
 .content ul {
-    margin: 0 0 0.8rem;
+    margin: 0.6rem 0 1.2rem;
   }
 }
 .content ol,
@@ -1966,22 +1967,23 @@ samp {
 .content code {
   white-space: pre;
   display: block;
+  color: var(--text-contrast);
   overflow-y: hidden;
   overflow-x: auto;
   border: 1px solid var(--border);
   border-radius: 2px;
-  background-color: var(--background-contrast);
-  margin: 0 0 1rem;
+  background-color: var(--background);
+  margin: 0.5rem 0 1rem;
   padding: 0.6rem 0.8rem;
 }
 @media only screen and (min-width: 992px) {
   .content code {
-    margin: 0 0 0.8rem;
+    margin: 0.6rem 0 1.2rem;
   }
 }
 @media only screen and (min-width: 992px) {
   .content code {
-    padding: 0.8rem 1rem;
+    padding: 0.7rem 1rem 0.9rem;
   }
 }
 
@@ -2001,6 +2003,11 @@ samp {
  *  @link https://github.com/tentakelfabrik/crispy-css
  *
  */
+/**
+ * add font-size for heading as class and element
+ *
+ *
+ */
 h1, .h1,
 h2, .h2,
 h3, .h3,
@@ -2010,17 +2017,7 @@ h6, .h6 {
   font-family: "IBM Plex Mono", sans-serif;
   font-weight: bold;
   line-height: 1.2;
-  margin: 0.6rem 0 1.2rem;
-}
-@media only screen and (min-width: 992px) {
-  h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4,
-h5, .h5,
-h6, .h6 {
-    margin: 0.7rem 0 1.4rem;
-  }
+  margin: 0.5rem 0 1rem;
 }
 h1.highlight, .h1.highlight,
 h2.highlight, .h2.highlight,
@@ -2032,59 +2029,54 @@ h6.highlight, .h6.highlight {
 }
 
 h1, .h1 {
-  font-size: 2.25rem;
-}
-@media only screen and (min-width: 992px) {
-  h1, .h1 {
-    font-size: 1.2rem;
-  }
+  font-size: 2.5rem;
 }
 
 h2, .h2 {
   font-size: 2rem;
 }
-@media only screen and (min-width: 992px) {
-  h2, .h2 {
-    font-size: 1.2rem;
-  }
-}
 
 h3, .h3 {
-  font-size: 1.8rem;
-}
-@media only screen and (min-width: 992px) {
-  h3, .h3 {
-    font-size: 1.2rem;
-  }
+  font-size: 1.75rem;
 }
 
 h4, .h4 {
-  font-size: 1.6rem;
-}
-@media only screen and (min-width: 992px) {
-  h4, .h4 {
-    font-size: 1.2rem;
-  }
+  font-size: 1.5rem;
 }
 
 h5, .h5 {
-  font-size: 1.4rem;
-}
-@media only screen and (min-width: 992px) {
-  h5, .h5 {
-    font-size: 1.2rem;
-  }
+  font-size: 1.25rem;
 }
 
 h6, .h6 {
-  font-size: 1.2rem;
+  font-size: 1rem;
 }
+
 @media only screen and (min-width: 992px) {
+  h1, .h1 {
+    font-size: 2.75rem;
+  }
+
+  h2, .h2 {
+    font-size: 2.5rem;
+  }
+
+  h3, .h3 {
+    font-size: 2rem;
+  }
+
+  h4, .h4 {
+    font-size: 1.75rem;
+  }
+
+  h5, .h5 {
+    font-size: 1.5rem;
+  }
+
   h6, .h6 {
     font-size: 1.2rem;
   }
 }
-
 /**
  *  <span class="badge">
  *     A
@@ -2112,13 +2104,21 @@ h6, .h6 {
 }
 
 /**
- *
+ *  Button
  *
  *  @author Björn Hase, Tentakelfabrik
  *  @license http://opensource.org/licenses/MIT The MIT License
  *  @link https://github.com/tentakelfabrik/plain-ui
  *
  */
+/**
+ *
+ *
+ */
+/**
+ *
+ *
+ */
 .button {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -2127,16 +2127,16 @@ h6, .h6 {
   display: inline-flex;
   align-items: center;
   text-decoration: none;
-  font-family: "IBM Plex Mono", sans-serif;
+  font-family: var(--font-family);
   font-size: 1rem;
   border: 1px solid var(--border);
   background-color: var(--background-contrast);
   color: var(--text);
   border-radius: 2px;
   transition: background-color 0.1s;
-  margin-bottom: 0.5em;
-  padding: 0 1.3em;
-  min-height: 2.8em;
+  margin-bottom: 0.5rem;
+  padding: 0 1.3rem;
+  min-height: 2.8rem;
   width: 100%;
 }
 @media only screen and (min-width: 768px) {
@@ -2182,7 +2182,7 @@ h6, .h6 {
   background-color: var(--danger);
 }
 .button--danger:focus, .button--danger:active {
-  outline: 2px solid var(--active);
+  outline: 2px solid var(--danger);
 }
 .button--info {
   border-color: var(--info);
@@ -2225,6 +2225,9 @@ h6, .h6 {
 .button--info.button--outline:hover {
   border-color: #3bc0ff;
 }
+.button--warning.button--outline:hover {
+  border-color: #f8d9ac;
+}
 .button--success.button--outline:hover {
   border-color: #a6d0a6;
 }
@@ -2236,7 +2239,7 @@ h6, .h6 {
  *
  */
 .field-group {
-  margin: 0 0 1rem;
+  margin: 0.5rem 0 1rem;
 }
 .field-group--valid input.field-text, .field-group--valid textarea.field-text {
   border-color: var(--success);
@@ -2253,7 +2256,7 @@ h6, .h6 {
 
 .field-label {
   font-size: 1rem;
-  font-family: "IBM Plex Mono", sans-serif;
+  font-family: var(--font-family);
 }
 .field-label .icon {
   vertical-align: text-bottom;
@@ -2263,7 +2266,7 @@ h6, .h6 {
 }
 
 input.field-text, textarea.field-text, select.field-choice {
-  font-family: "IBM Plex Mono", sans-serif;
+  font-family: var(--font-family);
   font-size: 0.95rem;
   width: 100%;
   border: 1px solid var(--active);
@@ -2476,7 +2479,7 @@ svg.field-choice__checked {
 }
 @media only screen and (min-width: 992px) {
   .panel__body {
-    padding: 0.8rem 1rem;
+    padding: 0.7rem 1rem 0.9rem;
   }
 }
 .panel--border-highlight {
@@ -8139,6 +8142,10 @@ svg.field-choice__checked {
   padding: 0;
 }
 
+.m-last-child-0 > *:last-child {
+  margin: 0;
+}
+
 .m-top-last-child-0 > *:last-child {
   margin-top: 0;
 }

src/scss/_components.scss

@@ -0,0 +1,14 @@
+@import
+    'components/badge',
+    'components/button',
+    'components/field',
+    'components/icon',
+    'components/hero',
+    'components/tabs',
+    'components/panel',
+    'components/media',
+    'components/table',
+    'components/slider',
+    'components/bar',
+    'components/modal',
+    'components/loading';

src/scss/_layouts.scss

@@ -0,0 +1,3 @@
+@import
+    'layouts/masonry',
+    'layouts/flex';

src/scss/_variables.scss

@@ -21,6 +21,7 @@ $breakpoint__md : 992px !default;
 $breakpoint__lg : 1200px !default;
 $breakpoint__xlg: 1600px !default;
 
+
 /**
  *  fonts
  *
@@ -30,6 +31,7 @@ $direction: ltr !default;
 
 $font-family: 'IBM Plex Mono', sans-serif !default;
 $font-weight: normal !default;
+
 $font-size: 0.9rem !default;
 $font-size-breakpoints: (
     $breakpoint__md: 1rem
@@ -110,16 +112,18 @@ $colors: (
     '--border-contrast': $color__border-contrast
 ) !default;
 
+
 /**
  *  margin
  *
  */
 
-$margin: 0 0 1rem !default;
+$margin: 0.5rem 0 1rem !default;
 $margin-breakpoints: (
-    $breakpoint__md: 0 0 0.8rem
+    $breakpoint__md: 0.6rem 0 1.2rem
 ) !default;
 
+
 /**
  *  padding
  *
@@ -127,9 +131,10 @@ $margin-breakpoints: (
 
 $padding: 0.6rem 0.8rem !default;
 $padding-breakpoints: (
-    $breakpoint__md: 0.8rem 1rem
+    $breakpoint__md: 0.7rem 1rem 0.9rem
 ) !default;
 
+
 /**
  *  border
  *

src/scss/components/_button.scss

@@ -1,5 +1,5 @@
 /**
- *
+ *  Button
  *
  *  @author Björn Hase, Tentakelfabrik
  *  @license http://opensource.org/licenses/MIT The MIT License
@@ -7,6 +7,38 @@
  *
  */
 
+/**
+ *
+ *
+ */
+@mixin button-color($name)
+{
+    &--#{$name} {
+        border-color: var(--#{$name});
+
+        &:hover {
+            background-color: var(--#{$name});
+        }
+
+        &:focus, &:active {
+            outline: 2px solid var(--#{$name});
+        }
+    }
+}
+
+/**
+ *
+ *
+ */
+@mixin button-outline-color($name, $color)
+{
+    &--#{$name}.button--outline {
+        &:hover {
+            border-color: $color;
+        }
+    }
+}
+
 .button {
     appearance: none;
     position: relative;
@@ -15,7 +47,7 @@
     align-items: center;
     text-decoration: none;
 
-    font-family: $font-family;
+    font-family: var(--font-family);
     font-size: 1rem;
 
     border: 1px solid var(--border);
@@ -25,9 +57,9 @@
     border-radius: $border-radius;
     transition: background-color 0.1s;
 
-    margin-bottom: 0.5em;
-    padding: 0 1.3em;
-    min-height: 2.8em;
+    margin-bottom: 0.5rem;
+    padding: 0 1.3rem;
+    min-height: 2.8rem;
     width: 100%;
 
     @include media-sm() {
@@ -72,53 +104,10 @@
         }
     }
 
-    &--danger {
-        border-color: var(--danger);
-
-        &:hover {
-            background-color: var(--danger);
-        }
-
-        &:focus, &:active {
-            outline: 2px solid var(--active);
-        }
-    }
-
-    &--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(--success);
-        }
-
-        &:focus, &:active {
-            outline: 2px solid var(--success);
-        }
-    }
+    @include button-color('danger');
+    @include button-color('info');
+    @include button-color('warning');
+    @include button-color('success');
 
     &--outline {
         background-color: transparent;
@@ -130,21 +119,8 @@
         }
     }
 
-    &--danger.button--outline {
-        &:hover {
-            border-color: lighten($color__danger, 20%);
-        }
-    }
-
-    &--info.button--outline {
-        &:hover {
-            border-color: lighten($color__info, 20%);
-        }
-    }
-
-    &--success.button--outline {
-        &:hover {
-            border-color: lighten($color__success, 20%);
-        }
-    }
+    @include button-outline-color('danger', lighten($color__danger, 20%));
+    @include button-outline-color('info', lighten($color__info, 20%));
+    @include button-outline-color('warning', lighten($color__warning, 20%));
+    @include button-outline-color('success', lighten($color__success, 20%));
 }

src/scss/components/_field.scss

@@ -31,7 +31,7 @@
 
 .field-label {
     font-size: 1rem;
-    font-family: $font-family;
+    font-family: var(--font-family);
 
     .icon {
         vertical-align: text-bottom;
@@ -43,7 +43,7 @@
 }
 
 input.field-text, textarea.field-text, select.field-choice {
-    font-family: $font-family;
+    font-family: var(--font-family);
     font-size: 0.95rem;
 
     width: 100%;

src/scss/core/_content.scss

@@ -131,11 +131,12 @@
         white-space: pre;
         display: block;
 
+        color: var(--text-contrast);
         overflow-y: hidden;
         overflow-x: auto;
         border: $border;
         border-radius: $border-radius;
-        background-color: var(--background-contrast);
+        background-color: var(--background);
 
         margin: $margin;
         @include media-breakpoints('margin', $margin-breakpoints);

src/scss/core/_heading.scss

@@ -8,17 +8,37 @@
  *
  */
 
+
+/**
+ * add font-size for heading as class and element
+ *
+ *
+ */
+@mixin heading-font-size($h, $font-size)
+{
+    #{$h}, .#{$h} {
+        font-size: $font-size;
+    }
+}
+
 $heading__font-sizes: (
-    'h1': 2.25rem,
+    'h1': 2.5rem,
     'h2': 2rem,
-    'h3': 1.8rem,
-    'h4': 1.6rem,
-    'h5': 1.4rem,
-    'h6': 1.2rem
+    'h3': 1.75rem,
+    'h4': 1.5rem,
+    'h5': 1.25rem,
+    'h6': 1rem
 ) !default;
 
-$heading__font-sizes__breakpoints: (
-    $breakpoint__md: 1.2rem
+$heading__font-sizes-breakpoints: (
+    $breakpoint__md: (
+        'h1': 2.75rem,
+        'h2': 2.5rem,
+        'h3': 2rem,
+        'h4': 1.75rem,
+        'h5': 1.5rem,
+        'h6': 1.2rem
+    )
 ) !default;
 
 $heading__font-weight: bold!default;
@@ -26,10 +46,8 @@ $heading__font-family: $font-family !default;
 
 $heading__line-height: 1.2 !default;
 
-$heading__margin: 0.6rem 0 1.2rem !default;
-$heading__margin-breakpoints: (
-    $breakpoint__md: 0.7rem 0 1.4rem
-) !default;
+$heading__margin: $margin !default;
+$heading__margin-breakpoints: margin-breakpoints !default;
 
 h1, .h1,
 h2, .h2,
@@ -49,9 +67,16 @@ h6, .h6 {
     }
 }
 
+// adding font-size for each
 @each $h, $font-size in $heading__font-sizes {
-    #{$h}, .#{$h} {
-        font-size: $font-size;
-        @include breakpoints-font-size($heading__font-sizes__breakpoints, $font-size, $font-size);
+    @include heading-font-size($h, $font-size);
+}
+
+// adding breakpoints for each breakpoint and each heading
+@each $breakpoint, $headings in $heading__font-sizes-breakpoints {
+    @media only screen and (min-width: $breakpoint) {
+        @each $h, $font-size in $headings {
+            @include heading-font-size($h, $font-size);
+        }
     }
 }

src/scss/core/_normalize.scss

@@ -13,6 +13,7 @@
     @each $var, $color in $colors {
         #{$var}: $color;
     }
+    --font-family: #{$font-family};
 }
 
 html {
@@ -33,7 +34,7 @@ legend {
 }
 
 body {
-    font-family: $font-family;
+    font-family: var(--font-family);
     color: var(--text);
 
     background-color: var(--body);
@@ -198,7 +199,7 @@ code,
 kbd,
 pre,
 samp {
-    font-family: $font-family;
+    font-family: var(--font-family);
     font-size: $font-size;
     // @TODO
 }

src/scss/helpers/_spacing.scss

@@ -56,6 +56,7 @@ $spacing-steps: 10 !default;
     }
 }
 
+
 /**
  *
  *
@@ -70,6 +71,12 @@ $spacing-steps: 10 !default;
     padding: 0;
 }
 
+.m-last-child-0 {
+    > *:last-child {
+        margin: 0;
+    }
+}
+
 .m-top-last-child-0 {
     > *:last-child {
         margin-top: 0;

src/scss/plain-ui.scss

@@ -6,23 +6,9 @@
     'functions',
     'mixins',
     'variables',
-    'core',
-
-    'components/badge',
-    'components/button',
-    'components/field',
-    'components/icon',
-    'components/hero',
-    'components/tabs',
-    'components/panel',
-    'components/media',
-    'components/table',
-    'components/slider',
-    'components/bar',
-    'components/modal',
-    'components/loading',
-
-    'layout/masonry',
-    'layout/flex',
 
+    'core',
+    
+    'components',
+    'layouts',
     'helpers';