adding

dist/index.html

@@ -28,12 +28,11 @@
     </header>
 
     <div class="container m-top-7">
-
         <div class="grid">
             <div class="col-12">
                 <div class="content">
                     <p>
-                        <span class="t-bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components.
+                        <span class="bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components.
                     </p>
                     <p>
                         Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS.
@@ -42,13 +41,28 @@
                         The Basic Idea was a quick
                     </p>
                 </div>
+                <div class="center">
+                    <a href="#">
+                        <svg class="icon fill-success" aria-hidden="true">
+                            <use xlink:href="symbol-defs.svg#icon-check"></use>
+                        </svg>
+                    </a>
+                    <a href="https://gitea.tentakelfabrik.de/">
+                        <svg class="icon fill-success" aria-hidden="true">
+                            <use xlink:href="symbol-defs.svg#icon-check"></use>
+                        </svg>
+                    </a>
+                </div>
             </div>
         </div>
+    </div>
 
+    <div class="container">
         <div class="grid">
             <div class="col-12">
-                <h2 class="m-bottom-0">Heading</h2>
+                <h2 class="m-bottom-2">Heading</h2>
                 <hr>
+                
                 <h1>Heading 1</h1>
                 <h2>Heading 2</h2>
                 <h3>Heading 3</h3>
@@ -57,32 +71,14 @@
                 <h6>Heading 6</h6>
             </div>
         </div>
+    </div>
+
+    <div class="container">
         <div class="grid">
             <div class="col-12">
-                <p>
-                    <span class="t-bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components.
-                </p>
-                <p>
-                    Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS.
-                </p>
-                <p>
-                    The Basic Idea was a quick
-                </p>
-
-                <div class="center">
-                    <a href="#">
-                        <svg class="icon icon--success" aria-hidden="true">
-                            <use xlink:href="symbol-defs.svg#icon-check"></use>
-                        </svg>
-                    </a>
-                    <a href="https://gitea.teantakelfabrik.de/">
-                        <svg class="icon icon--success" aria-hidden="true">
-                            <use xlink:href="symbol-defs.svg#icon-check"></use>
-                        </svg>
-                    </a>
-                </div>
+                <h2 class="m-bottom-2">Components</h2>
+                <hr>
 
-                <h2>Components</h2>
                 <h3>Buttons</h3>
                 <button class="button">
                     Default
@@ -106,17 +102,11 @@
                     Danger Outline
                 </button>
             </div>
-        </div>
-
-        <div class="grid">
             <div class="col-12">
                 <button class="button" disabled>
                     Disabled
                 </button>
             </div>
-        </div>
-
-        <div class="grid">
             <div class="col-12">
                 <button class="button button--small">
                     Small

dist/plain-ui.css

@@ -1614,28 +1614,31 @@
  *
  */
 :root {
-  --primary: #585858;
-  --primary-light: #585858;
+  --primary: #3e3e3e;
   --primary-active: #717171;
-  --primary-dark: #252525;
-  --link: #585858;
-  --link-hover: #ecacac;
+  --link: #3e3e3e;
+  --link-hover: #d95959;
   --danger: #d95959;
-  --danger-light: #ecacac;
+  --danger-light: #d95959;
   --success: #64ac64;
   --white: #ffffff;
-  --black: #000000;
+  --black: #212121;
   --text: #363636;
+  --text-secondary: #ffffff;
   --background: #f9f9f9;
   --border: #dfdfdf;
 }
 
 /**
- *  padding & margin
+ *  margin
  *
  */
 /**
- *  z-index
+ *  padding
+ *
+ */
+/**
+ *  border
  *
  */
 /**
@@ -1654,7 +1657,7 @@
  *
  *  @author Björn Hase, Tentakelfabrik
  *  @license http://opensource.org/licenses/MIT The MIT License
- *  @link https://github.com/tentakelfabrik/crispy-css
+ *  @link https://github.com/tentakelfabrik/plain-ui
  *
  */
 html {
@@ -1682,10 +1685,16 @@ body {
   font-size: 1rem;
   line-height: 1.618;
 }
+@media only screen and (min-width: 992px) {
+  body {
+    font-size: 1.1rem;
+  }
+}
 
 a {
   color: var(--link);
   transition: color 0.5s;
+  text-decoration: none;
 }
 a:hover {
   color: var(--link-hover);
@@ -1710,13 +1719,17 @@ table {
 }
 
 figure {
-  margin: 0 0 1rem;
+  margin: 0;
 }
 
 figcaption {
   margin: 0;
 }
 
+p {
+  margin: 0;
+}
+
 /**
  *  form elements
  *
@@ -1848,7 +1861,7 @@ h3, .h3,
 h4, .h4,
 h5, .h5,
 h6, .h6 {
-    margin: 0 0 1.5rem;
+    margin: 0 0 0.8rem;
   }
 }
 
@@ -1921,7 +1934,7 @@ h6, .h6 {
  *
  *  @author Björn Hase, Tentakelfabrik
  *  @license http://opensource.org/licenses/MIT The MIT License
- *  @link https://github.com/tentakelfabrik/crispy-css
+ *  @link https://github.com/tentakelfabrik/plain-ui
  *
  */
 .badge {
@@ -1929,13 +1942,13 @@ h6, .h6 {
   background-color: var(--primary);
   color: var(--white);
   font-size: 0.85rem;
-  padding: 0.4em 0.8em;
+  padding: 0.4rem 0.8rem;
 }
 .badge--round {
   display: inline-flex;
   justify-content: center;
   border-radius: 50%;
-  width: 2.5em;
+  width: 2.8em;
 }
 
 /**
@@ -1965,6 +1978,11 @@ h6, .h6 {
 .content p {
   margin: 0 0 1rem;
 }
+@media only screen and (min-width: 992px) {
+  .content p {
+    margin: 0 0 0.8rem;
+  }
+}
 .content a,
 .content ins,
 .content u {
@@ -2000,9 +2018,9 @@ h6, .h6 {
   padding: 0.25em;
 }
 .content blockquote {
-  border-left: 1px solid #585858;
+  border-left: 1px solid var(--primary);
   margin-left: 0;
-  padding: 5px 12px;
+  padding: 0.5rem 1rem;
 }
 .content blockquote p:last-child {
   margin-bottom: 0;
@@ -2013,6 +2031,13 @@ h6, .h6 {
   padding: 0;
   margin: 0 0 1rem;
 }
+@media only screen and (min-width: 992px) {
+  .content dl,
+.content ol,
+.content ul {
+    margin: 0 0 0.8rem;
+  }
+}
 .content ol,
 .content ul {
   margin-left: 1.5em;
@@ -2042,6 +2067,9 @@ h6, .h6 {
 /**
  *
  *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://github.com/tentakelfabrik/plain-ui
  *
  */
 .button {
@@ -2326,6 +2354,33 @@ svg.field-choice__checked {
  *  </figure>
  *
  */
+.figure {
+  margin: 0;
+  display: inline-block;
+  line-height: 0;
+  border: 1px solid var(--primary);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.figure__caption {
+  padding: 0.75em 1.1em;
+  font-size: 0.7rem;
+  background: var(--background);
+  line-height: 1.618;
+  margin: 0;
+  color: var(--text-secondary);
+}
+.figure .media {
+  border: 0;
+}
+
+.media {
+  border-radius: 2px;
+  border: 1px solid var(--primary);
+  width: 100%;
+  height: auto;
+}
+
 /**
  *
  *
@@ -2349,14 +2404,16 @@ svg.field-choice__checked {
  *      </div>
  *  </div>
  *
- *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://gitea.com/tentakelfabrik/plain-ui
  *
  */
 .bar {
   display: flex;
   min-height: 2.8em;
-  background-color: #585858;
-  color: var(--white);
+  background-color: var(--primary);
+  color: var(--text-secondary);
 }
 .bar .icon {
   font-size: 1.5rem;
@@ -4048,19 +4105,23 @@ svg.field-choice__checked {
  *
  */
 .border, .badge {
-  border: 1px solid #585858 !important;
+  border: 1px solid var(--primary);
 }
 
-.border-round, .badge {
+.border-round {
   border-radius: 2px;
 }
 
-.borderless {
-  border: 0 !important;
+.border-0 {
+  border: 0;
 }
 
-.radiusless {
-  border-radius: 0 !important;
+.radius-0 {
+  border-radius: 0;
+}
+
+.round {
+  border-radius: 50%;
 }
 
 /**
@@ -4108,93 +4169,44 @@ svg.field-choice__checked {
   z-index: 10;
 }
 
-/**
- *
- *
- */
-.round {
-  border-radius: 50%;
-}
-
-/**
- * typography
- *
- *
- */
-.left {
-  text-align: left !important;
-}
-
-.right {
-  text-align: right !important;
+.z-index-11 {
+  z-index: 11;
 }
 
-.center {
-  text-align: center !important;
+.z-index-12 {
+  z-index: 12;
 }
 
-.justify {
-  text-align: justify !important;
+.z-index-13 {
+  z-index: 13;
 }
 
-.uppercase {
-  text-transform: uppercase !important;
+.z-index-14 {
+  z-index: 14;
 }
 
-.lowercase {
-  text-transform: lowercase !important;
+.z-index-15 {
+  z-index: 15;
 }
 
-.crossed {
-  text-decoration: line-through !important;
+.z-index-16 {
+  z-index: 16;
 }
 
-.underline {
-  text-decoration: underline !important;
+.z-index-17 {
+  z-index: 17;
 }
 
-.capitalize {
-  text-transform: capitalize !important;
+.z-index-18 {
+  z-index: 18;
 }
 
-.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;
-}
-
-.t-size-default {
-  font-size: 1rem !important;
-}
-
-.t-size-small {
-  font-size: 0.75rem !important;
-}
-
-.t-size-medium {
-  font-size: 1.5rem !important;
-}
-
-.t-size-large {
-  font-size: 2rem !important;
+.z-index-19 {
+  z-index: 19;
 }
 
-.t-size-big {
-  font-size: 3rem !important;
+.z-index-20 {
+  z-index: 20;
 }
 
 /**
@@ -4260,10 +4272,6 @@ svg.field-choice__checked {
   vertical-align: baseline;
 }
 
-.marginless {
-  margin: 0 !important;
-}
-
 /**
  *
  *
@@ -4305,6 +4313,14 @@ svg.field-choice__checked {
   height: 1px;
 }
 
+.w-100 {
+  width: 100%;
+}
+
+.h-100 {
+  height: 100%;
+}
+
 .w-col-1 {
   width: 8.3333333333%;
 }
@@ -4802,6 +4818,20 @@ svg.field-choice__checked {
 }
 
 /**
+ *
+ *
+ *
+ */
+.marginless {
+  margin: 0;
+}
+
+.paddingless {
+  padding: 0;
+}
+
+/**
+ *  spacing for single padding or margin
  *
  *
  */
@@ -7196,15 +7226,15 @@ svg.field-choice__checked {
  *
  *
  */
-.text-color-primary {
+.color-primary {
   color: var(--primary);
 }
 
-.text-color-success {
+.color-success {
   color: var(--success);
 }
 
-.text-color-white {
+.color-white {
   color: var(--white);
 }
 
@@ -7244,59 +7274,238 @@ svg.field-choice__checked {
   background-color: var(--white);
 }
 
-.figure {
-  margin: 0;
-  display: inline-block;
-  line-height: 0;
-  border: 1px solid #585858;
-  border-radius: 2px;
-  overflow: hidden;
+/**
+ *  typography
+ *
+ *
+ */
+.left {
+  text-align: left;
 }
-.figure__caption {
-  padding: 0.75em 1.1em;
-  font-size: 0.7rem;
-  background: #585858;
-  line-height: 1.618;
-  margin: 0;
-  color: white;
+
+.right {
+  text-align: right;
 }
-.figure img.media {
-  border: 0;
+
+.center {
+  text-align: center;
 }
 
-img.media {
-  border-radius: 2px;
-  border: 1px solid #585858;
-  width: 100%;
-  height: auto;
+.justify {
+  text-align: justify;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.lowercase {
+  text-transform: lowercase;
+}
+
+.crossed {
+  text-decoration: line-through;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.light {
+  font-weight: lighter;
+}
+
+.normal {
+  font-weight: normal;
+}
+
+.medium {
+  font-weight: medium;
 }
 
+.bold {
+  font-weight: bolder;
+}
+
+.size-default {
+  font-size: 1rem;
+}
+
+@media only screen and (min-width: 576px) {
+  .size-xs-default {
+    font-size: 1rem;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .size-sm-default {
+    font-size: 1rem;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .size-md-default {
+    font-size: 1rem;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .size-lg-default {
+    font-size: 1rem;
+  }
+}
+@media only screen and (min-width: 1600px) {
+  .size-xlg-default {
+    font-size: 1rem;
+  }
+}
+.size-small {
+  font-size: 0.75rem;
+}
+
+@media only screen and (min-width: 576px) {
+  .size-xs-small {
+    font-size: 0.75rem;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .size-sm-small {
+    font-size: 0.75rem;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .size-md-small {
+    font-size: 0.75rem;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .size-lg-small {
+    font-size: 0.75rem;
+  }
+}
+@media only screen and (min-width: 1600px) {
+  .size-xlg-small {
+    font-size: 0.75rem;
+  }
+}
+.size-medium {
+  font-size: 1.5rem;
+}
+
+@media only screen and (min-width: 576px) {
+  .size-xs-medium {
+    font-size: 1.5rem;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .size-sm-medium {
+    font-size: 1.5rem;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .size-md-medium {
+    font-size: 1.5rem;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .size-lg-medium {
+    font-size: 1.5rem;
+  }
+}
+@media only screen and (min-width: 1600px) {
+  .size-xlg-medium {
+    font-size: 1.5rem;
+  }
+}
+.size-large {
+  font-size: 2rem;
+}
+
+@media only screen and (min-width: 576px) {
+  .size-xs-large {
+    font-size: 2rem;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .size-sm-large {
+    font-size: 2rem;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .size-md-large {
+    font-size: 2rem;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .size-lg-large {
+    font-size: 2rem;
+  }
+}
+@media only screen and (min-width: 1600px) {
+  .size-xlg-large {
+    font-size: 2rem;
+  }
+}
+.size-big {
+  font-size: 3rem;
+}
+
+@media only screen and (min-width: 576px) {
+  .size-xs-big {
+    font-size: 3rem;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .size-sm-big {
+    font-size: 3rem;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .size-md-big {
+    font-size: 3rem;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .size-lg-big {
+    font-size: 3rem;
+  }
+}
+@media only screen and (min-width: 1600px) {
+  .size-xlg-big {
+    font-size: 3rem;
+  }
+}
 .table {
   width: 100%;
-  border: 1px solid #e4e4e4;
-  background: white;
+  border: 1px solid #cacaca;
+  background: var(--white);
 }
 .table--striped tr:nth-child(even) {
-  background-color: white;
+  background-color: #fdfdfd;
 }
 .table--scroll {
   overflow-x: auto;
 }
 .table td {
-  color: #585858;
+  color: var(--text);
 }
 .table td,
 .table th {
   text-align: left;
-  border-bottom: 1px solid #e4e4e4;
+  border-bottom: 1px solid #cacaca;
   padding: 0.5em 1.25em;
 }
 .table th {
   color: white;
-  background-color: #585858;
+  background-color: #3e3e3e;
 }
 .table tr:hover {
-  background-color: #717171;
+  background-color: #585858;
 }
 .table tr:hover td {
   color: white;
@@ -7336,8 +7545,8 @@ img.media {
   background-color: white;
   transition: background-color 0.1s;
   background-color: white;
-  color: #585858;
-  border: 1px solid #585858;
+  color: var(--text);
+  border: 1px solid var(--primary);
   border-bottom-width: 0;
   width: 100%;
 }
@@ -7351,9 +7560,9 @@ img.media {
 }
 .tabs__item:hover, .tabs__item--selected {
   cursor: pointer;
-  background-color: #717171;
+  background-color: var(--primary-active);
   color: white;
-  border-color: #717171;
+  border-color: var(--primary-active);
 }
 .tabs__item:last-child {
   border-bottom-width: 1px;

src/scss/_functions.scss

@@ -16,7 +16,8 @@
  *  @return {number}
  *
  */
-@function stripUnit($value) {
+@function stripUnit($value)
+{
     @return $value / ($value * 0 + 1);
 }
 
@@ -28,8 +29,8 @@
  *  @return {boolean|unit}
  *
  */
-@function getDefault($map) {
-
+@function getDefault($map)
+{
     $default: false;
 
     @if map-has-key($map, 'default') {
@@ -49,6 +50,7 @@
  *  @return {float}
  *
  */
-@function factor($x) {
+@function factor($x)
+{
     @return ($x * $x) / 2;
 }

src/scss/_mixins.scss

@@ -154,6 +154,18 @@
     }
 }
 
+@mixin media-breakpoints($property, $breakpoints, $important: false) {
+    @each $breakpoint, $value in $breakpoints {
+        @media only screen and (min-width: $breakpoint) {
+            @if $important == false {
+                #{$property}: $value;
+            } @else {
+                #{$property}: $value !important;
+            }
+        }
+    }
+}
+
 
 /**
  *  Set property and his value with an factor for each Breakpoint

src/scss/_variables.scss

@@ -27,7 +27,6 @@ $plain-ui__xlg: 1600px !default;
  */
 
 $plain-ui__direction: ltr !default;
-$plain-ui__golden-ratio: 1.618 !default;
 
 $plain-ui__font-family: 'IBM Plex Mono', sans-serif !default;
 $plain-ui__font-weight: normal !default;
@@ -46,7 +45,7 @@ $plain-ui__font-sizes: (
 
 $plain-ui__line-height: 1.618;
 $plain-ui__line-height__breakpoints: (
-    $plain-ui__md: $plain-ui__golden-ratio
+    $plain-ui__md: 1.8
 ) !default;
 
 
@@ -57,22 +56,23 @@ $plain-ui__line-height__breakpoints: (
  */
 
 $plain-ui__primary: #3e3e3e !default;
-$plain-ui__primary-light: lighten($plain-ui__primary, 10%) !default;
-$plain-ui__primary-light-active: lighten($plain-ui__primary-light, 10%) !default;
-$plain-ui__primary-light-dark: darken($plain-ui__primary-light, 20%) !default;
-
+$plain-ui__primary-active: lighten($plain-ui__primary, 20%) !default;
 $plain-ui__secondary: #b3b2af !default;
-$plain-ui__success-light: #64ac64 !default;
+
+$plain-ui__success: #64ac64 !default;
+$plain-ui__success-light: lighten($plain-ui__success, 20%) !default;
 $plain-ui__warning: #f0ad4e !default;
+$plain-ui__warning-light: lighten($plain-ui__warning, 20%) !default;
 $plain-ui__danger: #d95959 !default;
-$plain-ui__danger-light: lighten($plain-ui__danger, 20%);
+$plain-ui__danger-light: lighten($plain-ui__danger, 20%) !default;
 $plain-ui__info: #0090d4 !default;
+$plain-ui__info-light: lighten($plain-ui__info, 20%) !default;
 
-$plain-ui__background-light: #f9f9f9 !default;
-$plain-ui__text-light: #363636 !default;
-$plain-ui__border-light: #dfdfdf !default;
-
-$plain-ui__link-light: #fff !default;
+$plain-ui__background: #f9f9f9 !default;
+$plain-ui__text: #363636 !default;
+$plain-ui__text-secondary: #ffffff !default;
+$plain-ui__border: #dfdfdf !default;
+$plain-ui__link: #fff !default;
 
 $plain-ui__colors: (
     'primary' : --primary,
@@ -81,45 +81,45 @@ $plain-ui__colors: (
 ) !default;
 
 :root {
-    --primary: #{$plain-ui__primary-light};
-    --primary-light: #{$plain-ui__primary-light};
-    --primary-active: #{$plain-ui__primary-light-active};
-    --primary-dark: #{$plain-ui__primary-light-dark};
-    --link: #{$plain-ui__primary-light};
-    --link-hover: #{$plain-ui__danger-light};
+    --primary: #{$plain-ui__primary};
+    --primary-active: #{$plain-ui__primary-active};
+    --link: #{$plain-ui__primary};
+    --link-hover: #{$plain-ui__danger};
     --danger: #{$plain-ui__danger};
-    --danger-light: #{$plain-ui__danger-light};
-    --success: #{$plain-ui__success-light};
+    --danger-light: #{$plain-ui__danger};
+    --success: #{$plain-ui__success};
     --white: #ffffff;
-    --black: #000000;
-    --text: #{$plain-ui__text-light};
-    --background: #{$plain-ui__background-light};
-    --border: #{$plain-ui__border-light};
+    --black: #212121;
+    --text: #{$plain-ui__text};
+    --text-secondary: #{$plain-ui__text-secondary};
+    --background: #{$plain-ui__background};
+    --border: #{$plain-ui__border};
 }
 
 /**
- *  padding & margin
+ *  margin
  *
  */
 
 $plain-ui__margin: 0 0 1rem !default;
 $plain-ui__margin-breakpoints: (
-    $plain-ui__md: 0 0 1.5rem
+    $plain-ui__md: 0 0 0.8rem
 ) !default;
 
-$plain-ui__padding: 5px 12px !default;
+/**
+ *  padding
+ *
+ */
+
+$plain-ui__padding: 0.5rem 1rem !default;
 $plain-ui__padding-breakpoints: (
-    $plain-ui__md: 10px 17px
+    $plain-ui__md: 0.25rem 0.75rem
 ) !default;
 
-
 /**
- *  z-index
+ *  border
  *
  */
 
-$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;
+$plain-ui__border: 1px solid var(--primary);

src/scss/components/_badge.scss

@@ -5,7 +5,7 @@
  *
  *  @author Björn Hase, Tentakelfabrik
  *  @license http://opensource.org/licenses/MIT The MIT License
- *  @link https://github.com/tentakelfabrik/crispy-css
+ *  @link https://github.com/tentakelfabrik/plain-ui
  *
  */
 
@@ -16,16 +16,15 @@
     color: var(--white);
 
     font-size: 0.85rem;
-    padding: 0.4em 0.8em;
+    padding: 0.4rem 0.8rem;
 
     @extend .border;
-    @extend .border-round;
 
     &--round {
         display: inline-flex;
         justify-content: center;
 
         border-radius: 50%;
-        width: 2.5em;
+        width: 2.8em;
     }
 }

src/scss/components/_bar.scss

@@ -8,7 +8,9 @@
  *      </div>
  *  </div>
  *
- *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://gitea.com/tentakelfabrik/plain-ui
  *
  */
 
@@ -16,8 +18,8 @@
     display: flex;
 
     min-height: 2.8em;
-    background-color: $plain-ui__primary-light;
-    color: var(--white);
+    background-color: var(--primary);
+    color: var(--text-secondary);
 
     .icon {
         font-size: 1.5rem;

src/scss/components/_button.scss

@@ -1,6 +1,9 @@
 /**
  *
  *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://github.com/tentakelfabrik/plain-ui
  *
  */
 

src/scss/components/_content.scss

@@ -13,7 +13,7 @@
     // paragraphs
     p {
         margin: $plain-ui__margin;
-        //@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
+        @include media-breakpoints('margin', $plain-ui__margin-breakpoints);
     }
 
     // Semantic text elements
@@ -88,7 +88,7 @@
     ul {
         padding: 0;
         margin: $plain-ui__margin;
-        //@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
+        @include media-breakpoints('margin', $plain-ui__margin-breakpoints);
     }
 
     ol,

src/scss/components/_media.scss

@@ -8,36 +8,33 @@
  *
  */
 
-@mixin plain-ui__component__media()
-{
-    .figure {
-        margin: 0;
-        display: inline-block;
-        line-height: 0;
-
-        border: 1px solid $plain-ui__primary-light;
-        border-radius: 2px;
+.figure {
+    margin: 0;
+    display: inline-block;
+    line-height: 0;
 
-        overflow: hidden;
+    border: $plain-ui__border;
+    border-radius: $plain-ui__border-radius;
 
-        &__caption {
-            padding: 0.75em 1.1em;
-            font-size: 0.7rem;
-            background: $plain-ui__primary-light;
-            line-height: $plain-ui__line-height;
-            margin: 0;
-            color: white;
-        }
+    overflow: hidden;
 
-        img.media {
-            border: 0;
-        }
+    &__caption {
+        padding: 0.75em 1.1em;
+        font-size: 0.7rem;
+        background: var(--background);
+        line-height: $plain-ui__line-height;
+        margin: 0;
+        color: var(--text-secondary);
     }
 
-    img.media {
-        border-radius: 2px;
-        border: 1px solid $plain-ui__primary-light;
-        width: 100%;
-        height: auto;
+    .media {
+        border: 0;
     }
+}
+
+.media {
+    border-radius: $plain-ui__border-radius;
+    border: $plain-ui__border;
+    width: 100%;
+    height: auto;
 }

src/scss/components/_table.scss

@@ -8,13 +8,13 @@
 {
     .table {
         width: 100%;
-        border: 1px solid lighten($plain-ui__primary-light, 55%);
-        background: white;
+        border: 1px solid lighten($plain-ui__primary, 55%);
+        background: var(--white);
 
         &--striped {
             tr {
                 &:nth-child(even) {
-                    background-color: lighten($plain-ui__primary-light, 75%);
+                    background-color: lighten($plain-ui__primary, 75%);
                 }
             }
         }
@@ -24,13 +24,13 @@
         }
 
         td {
-            color: $plain-ui__primary-light;
+            color: var(--text);
         }
 
         td,
         th {
             text-align: left;
-            border-bottom: 1px solid lighten($plain-ui__primary-light, 55%);
+            border-bottom: 1px solid lighten($plain-ui__primary, 55%);
 
             padding: 0.5em 1.25em;
             //@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints);
@@ -38,11 +38,11 @@
 
         th {
             color: white;
-            background-color: $plain-ui__primary-light;
+            background-color: $plain-ui__primary;
         }
 
         tr:hover {
-            background-color: lighten($plain-ui__primary-light, 10%);
+            background-color: lighten($plain-ui__primary, 10%);
 
             td {
                 color: white;

src/scss/components/_tabs.scss

@@ -28,9 +28,9 @@
             transition: background-color 0.1s;
 
             background-color: white;
-            color: $plain-ui__primary-light;
+            color: var(--text);
 
-            border: 1px solid $plain-ui__primary-light;
+            border: $plain-ui__border;
             border-bottom-width: 0;
 
             width: 100%;
@@ -44,10 +44,10 @@
 
             &:hover, &--selected {
                 cursor: pointer;
-                background-color: lighten($plain-ui__primary-light, 10%);
+                background-color: var(--primary-active);
                 color: white;
 
-                border-color: lighten($plain-ui__primary-light, 10%);
+                border-color: var(--primary-active);
             }
 
             &:last-child {

src/scss/core/_normalize.scss

@@ -5,7 +5,7 @@
  *
  *  @author Björn Hase, Tentakelfabrik
  *  @license http://opensource.org/licenses/MIT The MIT License
- *  @link https://github.com/tentakelfabrik/crispy-css
+ *  @link https://github.com/tentakelfabrik/plain-ui
  *
  */
 
@@ -34,7 +34,7 @@ body {
     direction: $plain-ui__direction;
 
     font-size: $plain-ui__font-size;
-    //@include crispy__media-breakpoints('line-height', $crispy__line-height__breakpoints);
+    @include media-breakpoints('font-size', $plain-ui__font-size-breakpoints);
 
     line-height: $plain-ui__line-height;
     //@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
@@ -43,6 +43,7 @@ body {
 a {
     color: var(--link);
     transition: color 0.5s;
+    text-decoration: none;
 
     &:hover {
         color: var(--link-hover);
@@ -69,13 +70,17 @@ table {
 }
 
 figure {
-    margin: $plain-ui__margin;
+    margin: 0;
 }
 
 figcaption {
     margin: 0;
 }
 
+p {
+    margin: 0;
+}
+
 /**
  *  form elements
  *

src/scss/helpers/_colors.scss

@@ -7,7 +7,7 @@
  */
 
 @each $name, $color in $plain-ui__colors {
-    .text-color-#{$name} {
+    .color-#{$name} {
         color: var(#{$color});
     }
 }

src/scss/helpers/_core.scss

@@ -6,110 +6,36 @@
  */
 
 .border {
-    border: $plain-ui__border !important;
+    border: $plain-ui__border;
 }
 
 .border-round {
     border-radius: $plain-ui__border-radius;
 }
 
-.borderless {
-    border: 0 !important;
+.border-0 {
+    border: 0;
 }
 
-.radiusless {
-    border-radius: 0 !important;
+.radius-0 {
+    border-radius: 0;
 }
 
-    /**
-     *  z-index
-     *
-     *
-     */
-
-    $plain-ui__z-index: 10;
-
-    @for $i from 1 through $plain-ui__z-index {
-        .z-index-#{$i} {
-            z-index: $i;
-        }
-    }
-
-    /**
-     *
-     *
-     */
-
-    .round {
-        border-radius: 50%;
-    }
-
-    /**
-     * 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;
-    }
+.round {
+    border-radius: 50%;
+}
 
-    .medium {
-        font-weight: medium !important;
-    }
+/**
+ *  z-index
+ *
+ *
+ */
 
-.bold {
-    font-weight: bolder !important;
-}
+$plain-ui__z-index: 20;
 
-@each $name, $font-size in $plain-ui__font-sizes {
-    .t-size-#{$name} {
-        font-size: $font-size !important;
-        //@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true);
+@for $i from 1 through $plain-ui__z-index {
+    .z-index-#{$i} {
+        z-index: $i;
     }
 }
 
@@ -175,10 +101,6 @@
     vertical-align: baseline;
 }
 
-.marginless {
-    margin: 0 !important;
-}
-
 /**
  *
  *

src/scss/helpers/_sizing.scss

@@ -13,6 +13,8 @@ $plain-ui__helpers__height-steps: 50;
 .h-0 { height: 0; }
 .w-1 { width: 1px;}
 .h-1 { height: 1px; }
+.w-100 { width: 100%; }
+.h-100 { height: 100%; }
 
 @for $i from 1 through $reflex-columns {
     .w-col-#{$i} {

src/scss/helpers/_spacing.scss

@@ -9,10 +9,26 @@ $plain-ui__spacing-gap: 0.25 !default;
 $plain-ui__spacing-steps: 10 !default;
 
 /**
+ *
+ *
+ *
+ */
+
+.marginless {
+    margin: 0;
+}
+
+.paddingless {
+    padding: 0;
+}
+
+
+/**
+ *  spacing for single padding or margin
  *
  *
  */
-@mixin spacing($class, $style, $direction, $name, $value, $breakpoints: 0)
+@mixin spacing($class, $style, $direction, $name, $value)
 {
     .#{$class}-#{$direction}-#{$name} {
         #{$style}-#{$direction}: $value;

src/scss/helpers/_typography.scss

@@ -0,0 +1,92 @@
+/**
+ *  typography
+ *
+ *
+ */
+
+.left {
+    text-align: left;
+}
+
+.right {
+    text-align: right;
+}
+
+.center {
+    text-align: center;
+}
+
+.justify {
+    text-align: justify;
+}
+
+.uppercase {
+    text-transform: uppercase;
+}
+
+.lowercase {
+    text-transform: lowercase;
+}
+
+.crossed {
+    text-decoration: line-through;
+}
+
+.underline {
+    text-decoration: underline;
+}
+
+.capitalize {
+    text-transform: capitalize;
+}
+
+.italic {
+    font-style: italic;
+}
+
+.light {
+    font-weight: lighter;
+}
+
+.normal {
+    font-weight: normal;
+}
+
+.medium {
+    font-weight: medium;
+}
+
+.bold {
+    font-weight: bolder;
+}
+
+@mixin add_font_size($name, $font-size) {
+    .size-#{$name} {
+        font-size: $font-size;
+    }
+}
+
+@each $name, $font-size in $plain-ui__font-sizes {
+    @include add_font_size($name, $font-size);
+
+    @include plain-ui__media-xs() {
+        @include add_font_size('xs-' + $name, $font-size);
+    }
+
+    @include plain-ui__media-sm() {
+        @include add_font_size('sm-' + $name, $font-size);
+    }
+
+    @include plain-ui__media-md() {
+        @include add_font_size('md-' + $name, $font-size);
+    }
+
+    @include plain-ui__media-lg() {
+        @include add_font_size('lg-' + $name, $font-size);
+    }
+
+    @include plain-ui__media-xlg() {
+        @include add_font_size('xlg-' + $name, $font-size);
+    }
+}
+

src/scss/plain-ui.scss

@@ -29,9 +29,9 @@
     'helpers/core',
     'helpers/sizing',
     'helpers/spacing',
-    'helpers/colors';
+    'helpers/colors',
+    'helpers/typography';
 
-@include plain-ui__component__media();
 @include plain-ui__component__table();
 @include plain-ui__component__slider();
 @include plain-ui__component__tabs();