adding new helpers

refactoring

src/scss/_config.scss

@@ -11,7 +11,7 @@ $crispy__font-size: 16px !default;
 $crispy__golden-ratio: 1.618 !default;
 
 // margin
-$crispy__margin: pxToEm(20px) !default;
+$crispy__margin: 5px !default;
 
 // colors
 $crispy__color-primary: #f0c209 !default;
@@ -23,6 +23,7 @@ $crispy__color-info: #0090d4 !default;
 $crispy__color-text: #363636 !default;
 $crispy__color-background: #ffffff !default;
 
+// colors as map
 $crispy__colors: (
     'primary': $crispy__color-primary,
     'secondary': $crispy__color-secondary,
@@ -39,3 +40,38 @@ $crispy__body__line-height: $crispy__golden-ratio !default;
 $crispy__body__direction: ltr !default;
 $crispy__body__color: $crispy__color-text !default;
 $crispy__body__background-color: $crispy__color-background !default;
+
+// font-sizes as map
+$crispy__font-sizes: (
+    'default': $crispy__body__font-size,
+    'small': 16px,
+    'large': 20px
+) !default;
+
+// buttons colors
+$crispy__button__colors: (
+    'default': (
+        'color': #ffffff,
+        'background-color': $crispy__color-primary
+    ),
+    'secondary': (
+        'color': #ffffff,
+        'background-color': $crispy__color-secondary
+    ),
+    'success': (
+        'color': #ffffff,
+        'background-color': $crispy__color-success
+    ),
+    'warning': (
+        'color': #ffffff,
+        'background-color': $crispy__color-warning
+    ),
+    'danger': (
+        'color': #ffffff,
+        'background-color': $crispy__color-danger
+    ),
+    'info': (
+        'color': #ffffff,
+        'background-color': $crispy__color-info
+    )
+) !default;

src/scss/components/_button.scss

@@ -12,39 +12,6 @@ $crispy__button__border: 0 !default;
 $crispy__button__up-margin: pxToEm(20px) !default;
 $crispy__button__up-padding: pxToEm(8px) pxToEm(13px) !default;
 
-$crispy__button__font-sizes: (
-    'default': $crispy__body__font-size,
-    'small': 14px,
-    'large': 28px
-) !default;
-
-$crispy__button__colors: (
-    'default': (
-        'color': #ffffff,
-        'background-color': $crispy__color-primary
-    ),
-    'secondary': (
-        'color': #ffffff,
-        'background-color': $crispy__color-secondary
-    ),
-    'success': (
-        'color': #ffffff,
-        'background-color': $crispy__color-success
-    ),
-    'warning': (
-        'color': #ffffff,
-        'background-color': $crispy__color-warning
-    ),
-    'danger': (
-        'color': #ffffff,
-        'background-color': $crispy__color-danger
-    ),
-    'info': (
-        'color': #ffffff,
-        'background-color': $crispy__color-info
-    )
-) !default;
-
 @mixin crispy__button() {
     .button {
         position: relative;
@@ -86,10 +53,6 @@ $crispy__button__colors: (
         &:focus {
             outline: none;
         }
-
-        // font-sizes & colors
-        @include font-sizes($crispy__button__font-sizes);
-        @include crispy__button__colors($crispy__button__colors);
     }
 
     /**
@@ -106,6 +69,10 @@ $crispy__button__colors: (
     }
 }
 
+/**
+ *
+ *
+ */
 @mixin crispy__button__colors($colors) {
     @each $name, $color in $colors {
 
@@ -121,6 +88,10 @@ $crispy__button__colors: (
     }
 }
 
+/**
+ *
+ *
+ */
 @mixin crispy__button__color($color) {
     $background-color: false;
     $text-color: false;

src/scss/components/_code.scss

@@ -0,0 +1,29 @@
+/**
+ * code
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+$crispy__code__font-family: monospace, monospace !default;
+$crispy__code__padding: pxToEm(10px) pxToEm(20px) !default;
+$crispy__code__margin: 0 0 pxToEm($crispy__margin) !default;
+$crispy__code__border: 1px solid #d4d4d4 !default;
+$crispy__code__background-color: #f9f9f9 !default;
+
+@mixin crispy__code() {
+    .code {
+        font-family: $crispy__code__font-family;
+        white-space: pre;
+        display: block;
+
+        overflow-y: hidden;
+        overflow-x: auto;
+        padding: $crispy__code__padding;
+        border: $crispy__code__border;
+        background-color: $crispy__code__background-color;
+
+        margin: $crispy__code__margin;
+    }
+}

src/scss/components/_table.scss

@@ -40,6 +40,10 @@ $crispy__table__striped__background-color: lighten($crispy__color-text, 75%) !de
             }
         }
 
+        &--scroll {
+            overflow-x: auto;
+        }
+
         td {
             color: $crispy__table__color;
         }

src/scss/components/_typography.scss

@@ -1,24 +0,0 @@
-/**
- *
- *
- * @author Björn Hase
- *
- */
-
-
-@mixin crispy__typography() {
-    code {
-        font-family: monospace, monospace;
-        font-size: 1em;
-        white-space: pre;
-        display: block;
-
-        overflow-y: hidden;
-        overflow-x: auto;
-        padding: 10px 20px;
-        border: 1px solid #d4d4d4;
-        background-color: #f9f9f9;
-
-        margin: 0 0 $crispy__margin;
-    }
-}

src/scss/crispy.scss

@@ -13,11 +13,20 @@
 
     'helpers/helpers';
 
+// button
 @include crispy__button();
+
+// font-sizes & colors
+.button {
+    @include crispy__font-sizes($crispy__button__font-sizes);
+    @include crispy__button__colors($crispy__button__colors);
+}
+
 @include crispy__heading();
 @include crispy__table();
 @include crispy__typography();
 
+// helpers
 @include crispy__align();
 @include crispy__margin();
 @include crispy__background-color();

src/scss/helpers/_align.scss

@@ -1,5 +1,5 @@
 /**
- * align
+ * helpers for align
  *
  *
  *

src/scss/helpers/_background-color.scss

@@ -1,19 +0,0 @@
-/**
- * background-color
- *
- * modificators for text-color
- *
- *
- * @author Björn Hase
- *
- */
-
-$crispy__background-colors: $crispy__colors !default;
-
-@mixin crispy__background-color() {
-     @each $name, $color in $crispy__background-colors {
-        .background-#{$name} {
-            background-color: $color;
-        }
-    }
-}

src/scss/helpers/_helpers.scss

@@ -1,7 +1,5 @@
 @import
     'align',
-    'background-color',
     'margin',
     'media',
-    'text-color',
-    'visibilty';
+    'text';

src/scss/helpers/_margin.scss

@@ -1,15 +1,14 @@
 /**
- * margin
- *
- *
+ * helpers for margin
  *
+ * 
  *
  * @author Björn Hase
  *
  */
 
-$crispy__margin-top: $crispy__margin !default;
-$crispy__margin-bottom: $crispy__margin !default;
+$crispy__margin-top: pxToEm($crispy__margin) !default;
+$crispy__margin-bottom: pxToEm($crispy__margin) !default;
 
 @mixin crispy__margin() {
     .margin-top-0x {

src/scss/helpers/_media.scss

@@ -0,0 +1,40 @@
+/**
+ * helpers for media elements
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+@mixin crispy__media() {
+    .img-responsive {
+
+    }
+
+    .img-fit-contain {
+        object-fit: contain;
+    }
+
+    .img-fit-cover {
+        object-fit: cover;
+    }
+
+    .video-responsive {
+        display: block;
+        overflow: hidden;
+        padding: 0;
+        position: relative;
+        width: 100%;
+
+        iframe, object, embed {
+            border: 0;
+            bottom: 0;
+            height: 100%;
+            left: 0;
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 100%;
+        }
+    }
+}

src/scss/helpers/_text-color.scss

@@ -1,19 +0,0 @@
-/**
- * text-colors
- *
- * modificators for text-color
- *
- *
- * @author Björn Hase
- *
- */
-
-$crispy__text-colors: $crispy__colors !default;
-
-@mixin crispy__text-colors() {
-     @each $name, $color in $crispy__text-colors {
-        .text-#{$name} {
-            color: $color;
-        }
-    }
-}

src/scss/helpers/_text.scss

@@ -0,0 +1,33 @@
+/**
+ * helpers for text
+ *
+ * - font-sizes
+ * - color
+ * - background-color
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+$crispy__text-colors: $crispy__colors !default;
+
+@mixin crispy__text() {
+    @each $name, $color in $crispy__font-sizes {
+        .text-#{$name} {
+            @include font-size($font-size);
+        }
+    }
+
+    @each $name, $color in $crispy__text-colors {
+		.text-#{$name} {
+			color: $color;
+		}
+	}
+
+    @each $name, $color in $crispy__text-colors {
+        .background-#{$name} {
+            background-color: $color;
+        }
+    }
+}

src/scss/mixins/_font.scss

@@ -1,4 +1,5 @@
 /**
+ * fonts
  *
  *
  *
@@ -13,26 +14,7 @@
  * @param {px} $font-size
  *
  */
-@mixin font-size($font-size) {
+@mixin crispy__font-size($font-size) {
     font-size: $font-size;
     font-size: pxToRem($font-size);
 }
-
-/**
- * add modificators for font-size from a map
- *
- *
- * @param {map} $font-sizes
- *
- */
-@mixin font-sizes($font-sizes) {
-    @each $name, $font-size in $font-sizes {
-        @if ($name == 'default') {
-            @include font-size($font-size);
-        } @else {
-            &--#{$name} {
-                @include font-size($font-size);
-            }
-        }
-    }
-}

src/scss/mixins/_mixins.scss

@@ -1,7 +1,3 @@
-@import
-    'font',
-    'media-queries';
-
 /**
  * clearfix to end floating
  *
@@ -25,7 +21,7 @@
  *
  *
  */
-@mixin crispy__list-clear() {
+@mixin crispy__clearlist() {
     list-style: none;
     margin: 0;
     padding: 0;