adding

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/_helpers.scss

@@ -0,0 +1,6 @@
+@import
+    'helpers/core',
+    'helpers/sizing',
+    'helpers/spacing',
+    'helpers/colors',
+    'helpers/typography';

src/scss/_mixins.scss

@@ -16,7 +16,7 @@
  *
  */
 
-@mixin plain-ui__clearfix() {
+@mixin clearfix() {
     &::before,
     &::after {
         display: table;
@@ -35,7 +35,7 @@
  *
  */
 
-@mixin plain-ui__clearlist() {
+@mixin clearlist() {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -55,74 +55,74 @@
  *
  */
 
-@mixin plain-ui__media-xs() {
-    @media only screen and (min-width:$plain-ui__xs) {
+@mixin media-xs() {
+    @media only screen and (min-width: $breakpoint__xs) {
         @content;
     }
 }
 
-@mixin plain-ui__media-sm() {
-    @media only screen and (min-width: $plain-ui__sm) {
+@mixin media-sm() {
+    @media only screen and (min-width: $breakpoint__sm) {
         @content;
     }
 }
 
-@mixin plain-ui__media-md() {
-    @media only screen and (min-width: $plain-ui__md) {
+@mixin media-md() {
+    @media only screen and (min-width: $breakpoint__md) {
         @content;
     }
 }
 
-@mixin plain-ui__media-lg() {
-    @media only screen and (min-width: $plain-ui__lg) {
+@mixin media-lg() {
+    @media only screen and (min-width: $breakpoint__lg) {
         @content;
     }
 }
 
-@mixin plain-ui__media-xlg() {
-    @media only screen and (min-width: $plain-ui__xlg) {
+@mixin media-xlg() {
+    @media only screen and (min-width: $breakpoint__xlg) {
         @content;
     }
 }
 
-@mixin plain-ui__media-xxs-only() {
-    @media only screen and (max-width: $plain-ui__xs) {
+@mixin media-xxs-only() {
+    @media only screen and (max-width: $breakpoint__xs) {
         @content;
     }
 }
 
-@mixin plain-ui__media-xxs-only() {
-    @media only screen and (max-width: $plain-ui__xs - 1) {
+@mixin media-xxs-only() {
+    @media only screen and (max-width: $breakpoint__xs - 1) {
         @content;
     }
 }
 
-@mixin plain-ui__media-xs-only() {
-    @media only screen and (min-width: $plain-ui__xs) and (max-width: $plain-ui__sm - 1) {
+@mixin media-xs-only() {
+    @media only screen and (min-width: $breakpoint__xs) and (max-width: $breakpoint__sm - 1) {
         @content;
     }
 }
 
-@mixin plain-ui__media-sm-only() {
-    @media only screen and (min-width: $plain-ui__sm) and (max-width: $plain-ui__md - 1) {
+@mixin media-sm-only() {
+    @media only screen and (min-width: $breakpoint__sm) and (max-width: $breakpoint__md - 1) {
         @content;
     }
 }
 
-@mixin plain-ui__media-md-only() {
-    @media only screen and (min-width: $plain-ui__md) and (max-width: $plain-ui__lg - 1) {
+@mixin media-md-only() {
+    @media only screen and (min-width: $breakpoint__md) and (max-width: $breakpoint__lg - 1) {
         @content;
     }
 }
 
-@mixin plain-ui__media-lg-only() {
-    @media only screen and (min-width: $plain-ui__lg) and (max-width: $plain-ui__xlg - 1) {
+@mixin media-lg-only() {
+    @media only screen and (min-width: $breakpoint__lg) and (max-width: $breakpoint__xlg - 1) {
         @content;
     }
 }
 
-@mixin plain-ui__media-xlg-only() {
-    @media only screen and (min-width: $plain-ui__xlg) {
+@mixin media-xlg-only() {
+    @media only screen and (min-width: $breakpoint__xlg) {
         @content;
     }
 }
@@ -132,7 +132,7 @@
  *  Set property and his value for each Breakpoint
  *
  *  (
- *      $plain-ui__md: 10px
+ *      $md: 10px
  *  )
  *
  *
@@ -142,7 +142,7 @@
  *
  */
 
-@mixin plain-ui__breakpoints($property, $breakpoints, $important: false) {
+@mixin breakpoints($property, $breakpoints, $important: false) {
     @each $breakpoint, $value in $breakpoints {
         @media only screen and (min-width: $breakpoint) {
             @if $important == false {
@@ -171,7 +171,7 @@
  *  Set property and his value with an factor for each Breakpoint
  *
  *  (
- *      $plain-ui__md: 10px
+ *      $md: 10px
  *  )
  *
  *  @param  {css} $property
@@ -181,7 +181,7 @@
  *
  */
 
-@mixin plain-ui__breakpoints-calculate($property, $factor, $breakpoints, $important: false) {
+@mixin breakpoints-calculate($property, $factor, $breakpoints, $important: false) {
     @each $breakpoint, $value in $breakpoints {
         @media only screen and (min-width: $breakpoint) {
             @if $important == false {
@@ -197,7 +197,7 @@
  *  Set font-size from Breakpoints, use for calculating difference from font-size and default font-size
  *
  *  (
- *      $plain-ui__md: 1rem
+ *      $md: 1rem
  *  )
  *
  *  @param  {map}  $breakpoints
@@ -206,7 +206,7 @@
  *  @param  {Boolean} $important   [false]
  *
  */
-@mixin plain-ui__breakpoints-font-size($breakpoints, $font-size, $default, $important: false) {
+@mixin breakpoints-font-size($breakpoints, $font-size, $default, $important: false) {
     @each $breakpoint, $value in $breakpoints {
 
         // getting diff

src/scss/_variables.scss

@@ -15,37 +15,37 @@
  *
  */
 
-$plain-ui__xs : 576px !default;
-$plain-ui__sm : 768px !default;
-$plain-ui__md : 992px !default;
-$plain-ui__lg : 1200px !default;
-$plain-ui__xlg: 1600px !default;
+$breakpoint__xs : 576px !default;
+$breakpoint__sm : 768px !default;
+$breakpoint__md : 992px !default;
+$breakpoint__lg : 1200px !default;
+$breakpoint__xlg: 1600px !default;
 
 /**
  *  fonts
  *
  */
 
-$plain-ui__direction: ltr !default;
+$direction: ltr !default;
 
-$plain-ui__font-family: 'IBM Plex Mono', sans-serif !default;
-$plain-ui__font-weight: normal !default;
-$plain-ui__font-size: 0.9rem !default;
-$plain-ui__font-size-breakpoints: (
-    $plain-ui__md: 1rem
+$font-family: 'IBM Plex Mono', sans-serif !default;
+$font-weight: normal !default;
+$font-size: 0.9rem !default;
+$font-size-breakpoints: (
+    $breakpoint__md: 1rem
 ) !default;
 
-$plain-ui__font-sizes: (
-    'default': $plain-ui__font-size,
-    'small'  : $plain-ui__font-size * 0.75,
-    'medium' : $plain-ui__font-size * 1.5,
-    'large'  : $plain-ui__font-size * 2,
-    'big'    : $plain-ui__font-size * 3
+$font-sizes: (
+    'default': $font-size,
+    'small'  : $font-size * 0.75,
+    'medium' : $font-size * 1.5,
+    'large'  : $font-size * 2,
+    'big'    : $font-size * 3
 ) !default;
 
-$plain-ui__line-height: 1.618;
-$plain-ui__line-height__breakpoints: (
-    $plain-ui__md: 1.8
+$line-height: 1.618;
+$line-height__breakpoints: (
+    $breakpoint__md: 1.8
 ) !default;
 
 
@@ -55,59 +55,59 @@ $plain-ui__line-height__breakpoints: (
  *
  */
 
-$plain-ui__white: #ffffff !default;
-$plain-ui__black: #212121 !default;
-
-$plain-ui__primary: #3e3e3e !default;
-$plain-ui__primary-contrast: $plain-ui__primary !default;
-
-$plain-ui__active: lighten($plain-ui__primary, 20%) !default;
-$plain-ui__active-contrast: #ffffff !default;
-
-$plain-ui__background: $plain-ui__primary !default;
-$plain-ui__background-contrast: #ffffff !default;
-
-$plain-ui__body: #f9f9f9 !default;
-$plain-ui__text: #363636 !default;
-$plain-ui__text-contrast: #ffffff !default;
-
-$plain-ui__border: $plain-ui__primary !default;
-$plain-ui__border-contrast: #ffffff !default;
-
-$plain-ui__success: #64ac64 !default;
-$plain-ui__success-contrast: lighten($plain-ui__success, 20%) !default;
-$plain-ui__warning: #f0ad4e !default;
-$plain-ui__warning-contrast: lighten($plain-ui__warning, 20%) !default;
-$plain-ui__danger: #d95959 !default;
-$plain-ui__danger-contrast: lighten($plain-ui__danger, 20%) !default;
-$plain-ui__info: #0090d4 !default;
-$plain-ui__info-contrast: lighten($plain-ui__info, 20%) !default;
-
-$plain-ui__link: $plain-ui__text !default;
-$plain-ui__link-hover: $plain-ui__danger !default;
-
-$plain-ui__colors: (
-    '--body': $plain-ui__body,
-    '--text': $plain-ui__text,
-    '--text-contrast': $plain-ui__text-contrast,
-    '--primary': $plain-ui__primary,
-    '--primary-contrast': $plain-ui__primary-contrast,
-    '--active': #{$plain-ui__active},
-    '--active-contrast': $plain-ui__active-contrast,
-    '--link': $plain-ui__link,
-    '--link-hover': $plain-ui__link-hover,
-    '--danger': $plain-ui__danger,
-    '--danger-contrast': $plain-ui__danger-contrast,
-    '--info': $plain-ui__info,
-    '--info-constrast': $plain-ui__info-contrast,
-    '--success': $plain-ui__success,
-    '--success-contrast': $plain-ui__success-contrast,
-    '--warning': $plain-ui__warning,
-    '--warning-contrast': $plain-ui__warning-contrast,
-    '--background': $plain-ui__background,
-    '--background-contrast': $plain-ui__background-contrast,
-    '--border': $plain-ui__border,
-    '--border-contrast': $plain-ui__border-contrast
+$color__white: #ffffff !default;
+$color__black: #212121 !default;
+
+$color__primary: #3e3e3e !default;
+$color__primary-contrast: $color__primary !default;
+
+$color__active: lighten($color__primary, 20%) !default;
+$color__active-contrast: #ffffff !default;
+
+$color__background: $color__primary !default;
+$color__background-contrast: #ffffff !default;
+
+$color__body: #f9f9f9 !default;
+$color__text: #363636 !default;
+$color__text-contrast: #ffffff !default;
+
+$color__border: $color__primary !default;
+$color__border-contrast: #ffffff !default;
+
+$color__success: #64ac64 !default;
+$color__success-contrast: lighten($color__success, 20%) !default;
+$color__warning: #f0ad4e !default;
+$color__warning-contrast: lighten($color__warning, 20%) !default;
+$color__danger: #d95959 !default;
+$color__danger-contrast: lighten($color__danger, 20%) !default;
+$color__info: #0090d4 !default;
+$color__info-contrast: lighten($color__info, 20%) !default;
+
+$color__link: $color__text !default;
+$color__link-hover: $color__danger !default;
+
+$colors: (
+    '--body': $color__body,
+    '--text': $color__text,
+    '--text-contrast': $color__text-contrast,
+    '--primary': $color__primary,
+    '--primary-contrast': $color__primary-contrast,
+    '--active': #{$color__active},
+    '--active-contrast': $color__active-contrast,
+    '--link': $color__link,
+    '--link-hover': $color__link-hover,
+    '--danger': $color__danger,
+    '--danger-contrast': $color__danger-contrast,
+    '--info': $color__info,
+    '--info-constrast': $color__info-contrast,
+    '--success': $color__success,
+    '--success-contrast': $color__success-contrast,
+    '--warning': $color__warning,
+    '--warning-contrast': $color__warning-contrast,
+    '--background': $color__background,
+    '--background-contrast': $color__background-contrast,
+    '--border': $color__border,
+    '--border-contrast': $color__border-contrast
 ) !default;
 
 /**
@@ -115,9 +115,9 @@ $plain-ui__colors: (
  *
  */
 
-$plain-ui__margin: 0 0 1rem !default;
-$plain-ui__margin-breakpoints: (
-    $plain-ui__md: 0 0 0.8rem
+$margin: 0 0 1rem !default;
+$margin-breakpoints: (
+    $breakpoint__md: 0 0 0.8rem
 ) !default;
 
 /**
@@ -125,9 +125,9 @@ $plain-ui__margin-breakpoints: (
  *
  */
 
-$plain-ui__padding: 0.6rem 0.8rem !default;
-$plain-ui__padding-breakpoints: (
-    $plain-ui__md: 0.8rem 1rem
+$padding: 0.6rem 0.8rem !default;
+$padding-breakpoints: (
+    $breakpoint__md: 0.8rem 1rem
 ) !default;
 
 /**
@@ -135,5 +135,5 @@ $plain-ui__padding-breakpoints: (
  *
  */
 
-$plain-ui__border-radius: 2px;
-$plain-ui__border: 1px solid var(--border);
+$border-radius: 2px;
+$border: 1px solid var(--border);

src/scss/components/_badge.scss

@@ -18,8 +18,8 @@
     font-size: 0.85rem;
     padding: 0.4rem 0.8rem;
 
-    border: $plain-ui__border;
-    border-radius: $plain-ui__border-radius;
+    border: $border;
+    border-radius: $border-radius;
 
     &--round {
         display: inline-flex;

src/scss/components/_bar.scss

@@ -21,8 +21,8 @@
     background-color: var(--background);
     color: var(--text-contrast);
 
-    border: $plain-ui__border;
-    border-radius: $plain-ui__border-radius;
+    border: $border;
+    border-radius: $border-radius;
 
     &__start {
         justify-content: start;

src/scss/components/_button.scss

@@ -15,14 +15,14 @@
     align-items: center;
     text-decoration: none;
 
-    font-family: $plain-ui__font-family;
+    font-family: $font-family;
     font-size: 1rem;
 
     border: 1px solid var(--border);
     background-color: var(--background-contrast);
     color: var(--text);
 
-    border-radius: $plain-ui__border-radius;
+    border-radius: $border-radius;
     transition: background-color 0.1s;
 
     margin-bottom: 0.5em;
@@ -30,7 +30,7 @@
     min-height: 2.8em;
     width: 100%;
 
-    @include plain-ui__media-sm() {
+    @include media-sm() {
         width: auto;
     }
 
@@ -125,26 +125,26 @@
 
         &:hover {
             color: var(--border);
-            border-color: lighten($plain-ui__primary, 40%);
+            border-color: lighten($color__primary, 40%);
             background-color: transparent;
         }
     }
 
     &--danger.button--outline {
         &:hover {
-            border-color: lighten($plain-ui__danger, 20%);
+            border-color: lighten($color__danger, 20%);
         }
     }
 
     &--info.button--outline {
         &:hover {
-            border-color: lighten($plain-ui__info, 20%);
+            border-color: lighten($color__info, 20%);
         }
     }
 
     &--success.button--outline {
         &:hover {
-            border-color: lighten($plain-ui__success, 20%);
+            border-color: lighten($color__success, 20%);
         }
     }
 }

src/scss/components/_field.scss

@@ -6,7 +6,7 @@
  */
 
 .field-group {
-    margin: $plain-ui__margin;
+    margin: $margin;
 
     &--valid {
         input.field-text, textarea.field-text {
@@ -31,7 +31,7 @@
 
 .field-label {
     font-size: 1rem;
-    font-family: $plain-ui__font-family;
+    font-family: $font-family;
 
     .icon {
         vertical-align: text-bottom;
@@ -43,14 +43,14 @@
 }
 
 input.field-text, textarea.field-text, select.field-choice {
-    font-family: $plain-ui__font-family;
+    font-family: $font-family;
     font-size: 0.95rem;
 
     width: 100%;
 
     border: 1px solid var(--active);
     background-color: var(--background-contrast);
-    border-radius: $plain-ui__border-radius;
+    border-radius: $border-radius;
 
     margin: 0.7rem 0 0;
 

src/scss/components/_group.scss

@@ -12,7 +12,7 @@
  *
  */
 
-@mixin plain-ui__component__group()
+@mixin component__group()
 {
     .group {
         &__item {

src/scss/components/_loading.scss

@@ -22,7 +22,7 @@
 
         background-color: var(--background);
 
-        animation-name: plain-ui__loading-animation;
+        animation-name: loading-animation;
         animation-duration: 0.5s;
         animation-iteration-count: infinite;
 
@@ -43,7 +43,7 @@
     }
 }
 
-@keyframes plain-ui__loading-animation {
+@keyframes loading-animation {
     0%   {  height: 60px; }
     50%  {  height: 40px; }
     100% {  height: 60px; }

src/scss/components/_media.scss

@@ -13,8 +13,8 @@
     display: inline-block;
     line-height: 0;
 
-    border: $plain-ui__border;
-    border-radius: $plain-ui__border-radius;
+    border: $border;
+    border-radius: $border-radius;
 
     overflow: hidden;
 
@@ -22,7 +22,7 @@
         padding: 0.75em 1.1em;
         font-size: 0.7rem;
         background: var(--background);
-        line-height: $plain-ui__line-height;
+        line-height: $line-height;
         margin: 0;
         color: var(--text-contrast);
     }
@@ -33,8 +33,8 @@
 }
 
 .media {
-    border-radius: $plain-ui__border-radius;
-    border: $plain-ui__border;
+    border-radius: $border-radius;
+    border: $border;
     width: 100%;
     height: auto;
 }

src/scss/components/_panel.scss

@@ -6,12 +6,12 @@
 
 .panel {
     border: 1px solid var(--border);
-    border-radius: $plain-ui__border-radius;
+    border-radius: $border-radius;
     background-color: var(--background-contrast);
 
     &__body {
-        padding: $plain-ui__padding;
-        @include media-breakpoints('padding', $plain-ui__padding-breakpoints);
+        padding: $padding;
+        @include media-breakpoints('padding', $padding-breakpoints);
     }
 
     &--border-highlight {

src/scss/components/_table.scss

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

src/scss/components/_tabs.scss

@@ -9,9 +9,9 @@
     flex-direction: column;
 
     width: 100%;
-    border-bottom: $plain-ui__border;
+    border-bottom: $border;
 
-    @include plain-ui__media-sm() {
+    @include media-sm() {
         width: auto;
         flex-direction: row;
     }
@@ -31,7 +31,7 @@
 
         width: 100%;
 
-        @include plain-ui__media-sm() {
+        @include media-sm() {
             width: auto;
             display: inline-flex;
         }
@@ -41,8 +41,8 @@
             background-color: var(--active);
             color: var(--text-contrast);
 
-            border-top-left-radius: $plain-ui__border-radius;
-            border-top-right-radius: $plain-ui__border-radius;
+            border-top-left-radius: $border-radius;
+            border-top-right-radius: $border-radius;
         }
 
         &--selected {

src/scss/core/_content.scss

@@ -12,8 +12,8 @@
 
     // paragraphs
     p {
-        margin: $plain-ui__margin;
-        @include media-breakpoints('margin', $plain-ui__margin-breakpoints);
+        margin: $margin;
+        @include media-breakpoints('margin', $margin-breakpoints);
     }
 
     // Semantic text elements
@@ -74,9 +74,9 @@
      *
      */
     blockquote {
-        border-left: $plain-ui__border;
+        border-left: $border;
         margin-left: 0;
-        padding: $plain-ui__padding;
+        padding: $padding;
 
         p:last-child {
             margin-bottom: 0;
@@ -91,8 +91,8 @@
     ol,
     ul {
         padding: 0;
-        margin: $plain-ui__margin;
-        @include media-breakpoints('margin', $plain-ui__margin-breakpoints);
+        margin: $margin;
+        @include media-breakpoints('margin', $margin-breakpoints);
     }
 
     ol,
@@ -133,15 +133,15 @@
 
         overflow-y: hidden;
         overflow-x: auto;
-        border: $plain-ui__border;
-        border-radius: $plain-ui__border-radius;
+        border: $border;
+        border-radius: $border-radius;
         background-color: var(--background-contrast);
 
-        margin: $plain-ui__margin;
-        @include media-breakpoints('margin', $plain-ui__margin-breakpoints);
+        margin: $margin;
+        @include media-breakpoints('margin', $margin-breakpoints);
 
-        padding: $plain-ui__padding;
-        @include media-breakpoints('padding', $plain-ui__padding-breakpoints);
+        padding: $padding;
+        @include media-breakpoints('padding', $padding-breakpoints);
     }
 }
 
@@ -149,6 +149,6 @@
     padding: 0.15rem 0.4rem 0.25rem;
     background: var(--primary);
     color: var(--text-contrast);
-    border-radius: $plain-ui__border-radius;
+    border-radius: $border-radius;
 }
 

src/scss/core/_heading.scss

@@ -8,7 +8,7 @@
  *
  */
 
-$plain-ui__heading__font-sizes: (
+$heading__font-sizes: (
     'h1': 2.25rem,
     'h2': 2rem,
     'h3': 1.8rem,
@@ -17,18 +17,18 @@ $plain-ui__heading__font-sizes: (
     'h6': 1.2rem
 ) !default;
 
-$plain-ui__heading__font-sizes__breakpoints: (
-    $plain-ui__md: 1.2rem
+$heading__font-sizes__breakpoints: (
+    $breakpoint__md: 1.2rem
 ) !default;
 
-$plain-ui__heading__font-weight: bold!default;
-$plain-ui__heading__font-family: $plain-ui__font-family !default;
+$heading__font-weight: bold!default;
+$heading__font-family: $font-family !default;
 
-$plain-ui__heading__line-height: 1.2 !default;
+$heading__line-height: 1.2 !default;
 
-$plain-ui__heading__margin: 0.6rem 0 1.2rem !default;
-$plain-ui__heading__margin-breakpoints: (
-    $plain-ui__md: 0.7rem 0 1.4rem
+$heading__margin: 0.6rem 0 1.2rem !default;
+$heading__margin-breakpoints: (
+    $breakpoint__md: 0.7rem 0 1.4rem
 ) !default;
 
 h1, .h1,
@@ -37,21 +37,21 @@ h3, .h3,
 h4, .h4,
 h5, .h5,
 h6, .h6 {
-    font-family: $plain-ui__heading__font-family;
-    font-weight: $plain-ui__heading__font-weight;
-    line-height: $plain-ui__heading__line-height;
+    font-family: $heading__font-family;
+    font-weight: $heading__font-weight;
+    line-height: $heading__line-height;
 
-    margin: $plain-ui__heading__margin;
-    @include plain-ui__breakpoints('margin', $plain-ui__heading__margin-breakpoints);
+    margin: $heading__margin;
+    @include breakpoints('margin', $heading__margin-breakpoints);
 
     &.highlight {
         display: table;
     }
 }
 
-@each $h, $font-size in $plain-ui__heading__font-sizes {
+@each $h, $font-size in $heading__font-sizes {
     #{$h}, .#{$h} {
         font-size: $font-size;
-        @include plain-ui__breakpoints-font-size($plain-ui__heading__font-sizes__breakpoints, $font-size, $plain-ui__font-size);
+        @include breakpoints-font-size($heading__font-sizes__breakpoints, $font-size, $font-size);
     }
 }

src/scss/core/_normalize.scss

@@ -10,7 +10,7 @@
  */
 
 :root {
-    @each $var, $color in $plain-ui__colors {
+    @each $var, $color in $colors {
         #{$var}: $color;
     }
 }
@@ -33,16 +33,16 @@ legend {
 }
 
 body {
-    font-family: $plain-ui__font-family;
+    font-family: $font-family;
     color: var(--text);
 
     background-color: var(--body);
-    direction: $plain-ui__direction;
+    direction: $direction;
 
-    font-size: $plain-ui__font-size;
-    @include media-breakpoints('font-size', $plain-ui__font-size-breakpoints);
+    font-size: $font-size;
+    @include media-breakpoints('font-size', $font-size-breakpoints);
 
-    line-height: $plain-ui__line-height;
+    line-height: $line-height;
     //@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
 }
 
@@ -103,7 +103,7 @@ textarea {
 }
 
 fieldset {
-    margin: $plain-ui__margin;
+    margin: $margin;
 }
 
 // Remove the inheritance of text transform in Firefox
@@ -176,7 +176,7 @@ hr {
     overflow: visible; // Show the overflow in Edge and IE.
     border: 0;
     border-top: 1px solid var(--border);
-    margin: $plain-ui__margin;
+    margin: $margin;
 }
 
 // Add the correct vertical alignment in Chrome, Firefox, and Opera.
@@ -198,7 +198,7 @@ code,
 kbd,
 pre,
 samp {
-    font-family: $plain-ui__font-family;
-    font-size: $plain-ui__font-size;
+    font-family: $font-family;
+    font-size: $font-size;
     // @TODO
 }

src/scss/helpers/_colors.scss

@@ -6,7 +6,7 @@
  *
  */
 
-@each $name, $color in $plain-ui__colors {
+@each $name, $color in $colors {
     $class: str-replace($name, '--', '');
 
     .color-#{$class} {
@@ -14,7 +14,7 @@
     }
 }
 
-@each $name, $color in $plain-ui__colors {
+@each $name, $color in $colors {
     $class: str-replace($name, '--', '');
 
     .fill-#{$class} {
@@ -22,7 +22,7 @@
     }
 }
 
-@each $name, $color in $plain-ui__colors {
+@each $name, $color in $colors {
     $class: str-replace($name, '--', '');
 
     .border-color-#{$class} {
@@ -30,7 +30,7 @@
     }
 }
 
-@each $name, $color in $plain-ui__colors {
+@each $name, $color in $colors {
     $class: str-replace($name, '--', '');
 
     .background-color-#{$class} {

src/scss/helpers/_core.scss

@@ -6,11 +6,11 @@
  */
 
 .border {
-    border: $plain-ui__border;
+    border: $border;
 }
 
 .border-round {
-    border-radius: $plain-ui__border-radius;
+    border-radius: $border-radius;
 }
 
 .border-0 {
@@ -31,9 +31,9 @@
  *
  */
 
-$plain-ui__z-index: 20;
+$z-index: 20;
 
-@for $i from 1 through $plain-ui__z-index {
+@for $i from 1 through $z-index {
     .z-index-#{$i} {
         z-index: $i;
     }
@@ -63,7 +63,7 @@ $plain-ui__z-index: 20;
 }
 
 .clearfix {
-    @include plain-ui__clearfix();
+    @include clearfix();
 }
 
 /**

src/scss/helpers/_sizing.scss

@@ -7,7 +7,7 @@
  *
  */
 
-$plain-ui__sizing_steps: 50 !default;
+$sizing_steps: 50 !default;
 
 /**
  *  mixin: sizing
@@ -27,23 +27,23 @@ $plain-ui__sizing_steps: 50 !default;
  */
 @mixin sizing_breakpoints($class, $style, $i, $value)
 {
-    @include plain-ui__media-xs() {
+    @include media-xs() {
         @include sizing($class, $style, 'xs-' + $i, $value);
     }
 
-    @include plain-ui__media-sm() {
+    @include media-sm() {
         @include sizing($class, $style, 'sm-' + $i, $value);
     }
 
-    @include plain-ui__media-md() {
+    @include media-md() {
         @include sizing($class, $style, 'md-' + $i, $value);
     }
 
-    @include plain-ui__media-lg() {
+    @include media-lg() {
         @include sizing($class, $style, 'lg-' + $i, $value);
     }
 
-    @include plain-ui__media-xlg() {
+    @include media-xlg() {
         @include sizing($class, $style, 'xlg-' + $i, $value);
     }
 }
@@ -68,7 +68,7 @@ $plain-ui__sizing_steps: 50 !default;
     @include sizing_breakpoints('h-col', 'height', $i, $value);
 }
 
-@for $i from 1 through $plain-ui__sizing_steps
+@for $i from 1 through $sizing_steps
 {
     $value: #{($i * 0.5)}rem;
 
@@ -76,7 +76,7 @@ $plain-ui__sizing_steps: 50 !default;
     @include sizing_breakpoints('w', 'width', $i, $value);
 }
 
-@for $i from 1 through $plain-ui__sizing_steps
+@for $i from 1 through $sizing_steps
 {
     $value: #{($i * 0.5)}rem;
 

src/scss/helpers/_spacing.scss

@@ -6,15 +6,15 @@
  *
  */
 
-$plain-ui__spacing-direction: (
+$spacing-direction: (
     'top',
     'bottom',
     'left',
     'right'
 ) !default;
 
-$plain-ui__spacing-gap: 0.25 !default;
-$plain-ui__spacing-steps: 10 !default;
+$spacing-gap: 0.25 !default;
+$spacing-steps: 10 !default;
 
 /**
  *  mixin: spacing for single padding or margin
@@ -35,23 +35,23 @@ $plain-ui__spacing-steps: 10 !default;
  */
 @mixin spacing_breakpoints($class, $style, $direction, $i, $value)
 {
-    @include plain-ui__media-xs() {
+    @include media-xs() {
         @include spacing($class, $style, $direction, 'xs-' + $i, $value);
     }
 
-    @include plain-ui__media-sm() {
+    @include media-sm() {
         @include spacing($class, $style, $direction, 'sm-' + $i, $value);
     }
 
-    @include plain-ui__media-md() {
+    @include media-md() {
         @include spacing($class, $style, $direction, 'md-' + $i, $value);
     }
 
-    @include plain-ui__media-lg() {
+    @include media-lg() {
         @include spacing($class, $style, $direction, 'lg-' + $i, $value);
     }
 
-    @include plain-ui__media-xlg() {
+    @include media-xlg() {
         @include spacing($class, $style, $direction, 'xlg-' + $i, $value);
     }
 }
@@ -82,25 +82,25 @@ $plain-ui__spacing-steps: 10 !default;
     }
 }
 
-@each $direction in $plain-ui__spacing-direction
+@each $direction in $spacing-direction
 {
     @include spacing('m', 'margin', $direction, 0, 0);
     @include spacing('m', 'margin', $direction, 1, 1px);
 
-    @for $i from 2 through $plain-ui__spacing-steps {
-        $value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
+    @for $i from 2 through $spacing-steps {
+        $value: $spacing-gap * factor($i - 1) * 1rem;
         @include spacing('m', 'margin', $direction, $i, $value);
         @include spacing_breakpoints('m', 'margin', $direction, $i, $value);
     }
 }
 
-@each $direction in $plain-ui__spacing-direction
+@each $direction in $spacing-direction
 {
     @include spacing('p', 'padding', $direction, 0, 0);
     @include spacing('p', 'padding', $direction, 1, 1px);
 
-    @for $i from 0 through $plain-ui__spacing-steps {
-        $value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
+    @for $i from 0 through $spacing-steps {
+        $value: $spacing-gap * factor($i - 1) * 1rem;
         @include spacing('p', 'padding', $direction, $i, $value);
         @include spacing_breakpoints('p', 'padding', $direction, $i, $value);
     }

src/scss/helpers/_typography.scss

@@ -66,26 +66,26 @@
     }
 }
 
-@each $name, $font-size in $plain-ui__font-sizes {
+@each $name, $font-size in $font-sizes {
     @include add_font_size($name, $font-size);
 
-    @include plain-ui__media-xs() {
+    @include media-xs() {
         @include add_font_size('xs-' + $name, $font-size);
     }
 
-    @include plain-ui__media-sm() {
+    @include media-sm() {
         @include add_font_size('sm-' + $name, $font-size);
     }
 
-    @include plain-ui__media-md() {
+    @include media-md() {
         @include add_font_size('md-' + $name, $font-size);
     }
 
-    @include plain-ui__media-lg() {
+    @include media-lg() {
         @include add_font_size('lg-' + $name, $font-size);
     }
 
-    @include plain-ui__media-xlg() {
+    @include media-xlg() {
         @include add_font_size('xlg-' + $name, $font-size);
     }
 }

src/scss/layout/_masonry.scss

@@ -13,7 +13,7 @@
  *
  */
 
-$plain-ui__masonry_sizes: (
+$masonry_sizes: (
     1: 25%,
     2: 55%,
     3: 20%,
@@ -21,28 +21,28 @@ $plain-ui__masonry_sizes: (
     5: 33%
 ) !default;
 
-$plain-ui__masonry_height: 200px !default;
-$plain-ui__masonry_height--sm: 300px !default;
-$plain-ui__masonry_gap: 15px !default;
-$plain-ui__masonry_gap-offset: 10px !default;
+$masonry_height: 200px !default;
+$masonry_height--sm: 300px !default;
+$masonry_gap: 15px !default;
+$masonry_gap-offset: 10px !default;
 
 .masonry {
     display: flex;
     width: 100%;
     flex-flow: row wrap;
-    gap: $plain-ui__masonry_gap;
+    gap: $masonry_gap;
 
     &__item {
         width: 100%;
-        height: $plain-ui__masonry_height;
+        height: $masonry_height;
 
-        @include plain-ui__media-sm() {
-            height: $plain-ui__masonry_height--sm;
+        @include media-sm() {
+            height: $masonry_height--sm;
 
             // add width from data
-            @each $index, $size in $plain-ui__masonry_sizes {
+            @each $index, $size in $masonry_sizes {
                 &:nth-child(4n+#{$index}) {
-                    width: calc(#{$size} - #{$plain-ui__masonry_gap-offset});
+                    width: calc(#{$size} - #{$masonry_gap-offset});
                 }
             }
         }

src/scss/plain-ui.scss

@@ -25,8 +25,4 @@
     'layout/masonry',
     'layout/flex',
 
-    'helpers/core',
-    'helpers/sizing',
-    'helpers/spacing',
-    'helpers/colors',
-    'helpers/typography';
+    'helpers';