adding

src/scss/_components.scss

@@ -1,10 +0,0 @@
-@import
-    'components/button',
-    'components/code',
-    'components/group',
-    'components/heading',
-    'components/hero',
-    'components/modal',
-    'components/panel',
-    'components/table',
-    'components/field';

src/scss/_core.scss

@@ -1,8 +1,12 @@
 /**
- * normalize
+ * core
+ *
+ * import normalize
  *
  *
  * @author Björn Hase
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
  *
  */
 
@@ -48,10 +52,10 @@
     }
 
     a {
-        color: $crispy__color-primary;
+        color: $crispy__color-link;
 
         &:hover {
-            color: $crispy__color-hover;
+            color: $crispy__color-link-hover;
         }
 
         &:focus {
@@ -135,6 +139,6 @@
         background-color: $crispy__color-background;
         direction: $crispy__direction;
 
-        @include crispy__font-size($crispy__font-size);
+        font-size: toRem($crispy__font-size);
     }
 }

src/scss/_functions.scss

@@ -99,3 +99,36 @@
         @return null;
     }
 }
+
+/**
+ *
+ *
+ *
+ * @param  {[type]} $directions [description]
+ * @return {[type]}             [description]
+ * 
+ */
+@function opposite-direction($directions) {
+  $opposite-directions: ();
+  $direction-map: (
+    'top':    'bottom',
+    'right':  'left',
+    'bottom': 'top',
+    'left':   'right',
+    'center': 'center',
+    'ltr':    'rtl',
+    'rtl':    'ltr'
+  );
+
+  @each $direction in $directions {
+    $direction: to-lower-case($direction);
+
+    @if map-has-key($direction-map, $direction) {
+      $opposite-directions: append($opposite-directions, unquote(map-get($direction-map, $direction)));
+    } @else {
+      @warn "No opposite direction can be found for `#{$direction}`. Direction omitted.";
+    }
+  }
+
+  @return $opposite-directions;
+}

src/scss/_mixins.scss

@@ -28,6 +28,7 @@
     }
 }
 
+
 /**
  * clear styles from list
  *
@@ -44,12 +45,13 @@
     }
 }
 
+
 /**
  * media-queries
  *
  *
  *
- * @author Björn Hase
+ *
  *
  */
 @mixin crispy__media-xs() {
@@ -82,7 +84,6 @@
     }
 }
 
-// only
 @mixin crispy__media-xs-only() {
     @media only screen and (min-width: $crispy__xs) and (max-width: $crispy__sm - 1) {
         @content;
@@ -112,3 +113,35 @@
         @content;
     }
 }
+
+
+/**
+ *  triangle
+ *
+ *
+ *  @param {Direction} $direction - Triangle direction, either 'top', 'right', 'bottom' or 'left'
+ *  @param {Color} $color [currentcolor] - Triangle color
+ *  @param {Length} $size [1em] - Triangle size
+ *
+ */
+@mixin triangle($direction, $color: currentcolor, $size: 1em) {
+    @if not index(top right bottom left, $direction) {
+        @error "Direction must be either `top`, `right`, `bottom` or `left`.";
+    }
+
+    width: 0;
+    height: 0;
+    content: '';
+    z-index: 2;
+    border-#{opposite-position($direction)}: ($size * 1.5) solid $color;
+
+    $perpendicular-borders: $size solid transparent;
+
+    @if $direction == top or $direction == bottom {
+        border-left: $perpendicular-borders;
+        border-right: $perpendicular-borders;
+    } @else if $direction == right or $direction == left {
+        border-bottom: $perpendicular-borders;
+        border-top: $perpendicular-borders;
+    }
+}

src/scss/_modifiers.scss

@@ -0,0 +1,245 @@
+/**
+ * helper: visibility
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+@mixin crispy__modifiers() {
+
+    /**
+     * typography
+     *
+     *
+     */
+
+    .text-left {
+        text-align: left !important;
+    }
+
+    .text-right {
+        text-align: right !important;
+    }
+
+    .text-center {
+        text-align: center !important;
+    }
+
+    .text-justify {
+        text-align: justify !important;
+    }
+
+    .text-uppercase {
+        text-transform: uppercase !important;
+    }
+
+    .text-lowercase {
+        text-transform: lowercase !important;
+    }
+
+    .text-crossed {
+        text-decoration: line-through !important;
+    }
+
+    .text-underline {
+        text-decoration: underline !important;
+    }
+
+    .text-capitalized {
+        text-transform: capitalize !important;
+    }
+
+    .text-italic {
+        font-style: italic !important;
+    }
+
+    .text-weight-light {
+        font-weight: lighter !important;
+    }
+
+    .text-weight-normal {
+        font-weight: normal !important;
+    }
+
+    .text-weight-bold {
+        font-weight: bolder !important;
+    }
+
+    .text-weight-medium {
+        font-weight: medium !important;
+    }
+
+    @each $name, $font-size in $crispy__font-sizes {
+        .text-size-#{$name} {
+            font-size: $font-size !important;
+        }
+    }
+
+    /**
+     *  floating
+     *
+     *
+     */
+
+    .float-left {
+        float: left;
+    }
+
+    .float-right {
+        float: right;
+    }
+
+    .float-none {
+        float: none;
+    }
+
+    .centered {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .clearfix {
+        @include crispy__clearfix();
+    }
+
+    /**
+     *  colors
+     *
+     *
+     */
+
+    @each $name, $color in $crispy__colors {
+        .text-color-#{$name} {
+            color: $color !important;
+        }
+    }
+
+    @each $name, $color in $crispy__colors {
+        .background-color-#{$name} {
+            background-color: $color !important;
+        }
+    }
+
+    /**
+     *  position
+     *
+     *
+     */
+
+    .absolute {
+        position: absolute !important;
+    }
+
+    .fixed {
+        position: fixed !important;
+    }
+
+    .relative {
+        position: relative !important;
+    }
+
+    /**
+     *  visibility
+     *
+     *
+     */
+
+    .hidden {
+        display: none !important;
+    }
+
+    .visible {
+        display: block !important;
+
+        &--inline {
+            display: inline !important;
+        }
+
+        &--inline-block {
+            display: inline-block !important;
+        }
+    }
+
+    /**
+     *  borders
+     *
+     *
+     */
+
+    .bordered {
+        border: $crispy__border !important;
+    }
+
+    .rounded {
+        border-radius: 50% !important;
+    }
+
+    .borderless {
+        border: 0 !important;
+    }
+
+    .radiusless
+        border-radius: 0 !important;
+    }
+
+    /**
+     *  width
+     *
+     *
+     */
+
+    @each $name, $width in $crispy__width {
+        .width-#{$name} {
+            width: $width !important;
+        }
+    }
+
+    /**
+     *  margin & padding
+     *
+     *
+     */
+
+    .marginless {
+        margin: 0 !important;
+    }
+
+    .paddingless {
+        padding: 0 !important;
+    }
+
+    @for $i from 0 through $crispy__spacing__steps {
+        .margin-top-#{($i + 1)} {
+            margin-top: ($crispy__spacing * $i) !important;
+        }
+
+        .margin-left-#{($i + 1)} {
+            margin-left: ($crispy__spacing * $i) !important;
+        }
+
+        .margin-bottom-#{($i + 1)} {
+            margin-bottom: ($crispy__spacing * $i) !important;
+        }
+
+        .margin-right-#{($i + 1)} {
+            margin-right: ($crispy__spacing * ($i)) !important;
+        }
+
+        .padding-top-#{($i + 1)} {
+            padding-top: ($crispy__spacing * $i) !important;
+        }
+
+        .padding-left-#{($i + 1)} {
+            padding-left: ($crispy__spacing * $i) !important;
+        }
+
+        .padding-bottom-#{($i + 1)} {
+            padding-bottom: ($crispy__spacing * $i) !important;
+        }
+
+        .padding-right-#{($i + 1)} {
+            padding-right: ($crispy__spacing * $i) !important;
+        }
+    }
+}

src/scss/_variables.scss

@@ -23,7 +23,6 @@ $crispy__family-secondary: $family-sans-serif !default
 $crispy__family-code: $family-monospace !default
 
 $crispy__direction: ltr !default;
-$crispy__border-radius: 0 !default;
 
 // spacing
 $crispy__spacing: 10px !default;
@@ -36,6 +35,7 @@ $crispy__color-success: #5cb85c !default;
 $crispy__color-warning: #f0ad4e !default;
 $crispy__color-danger: #d9534f !default;
 $crispy__color-info: #0090d4 !default;
+
 $crispy__color-text: #363636 !default;
 $crispy__color-border: #d0d0d0 !default;
 $crispy__color-background: #ffffff !default;
@@ -46,6 +46,10 @@ $crispy__color-link-visited: $purple !default;
 $crispy__color-link-focus: $grey-darker !default;
 $crispy__color-link-active: $grey-darker !default;
 
+// borders
+$crispy__border-radius: 0 !default;
+$cirspy__border: 1px solid $crispy__color-border !default;
+
 // breakpoints
 $crispy__xs: 576px !default;
 $crispy__sm: 768px !default;
@@ -74,3 +78,10 @@ $crispy__font-sizes: (
 $crispy__z-index: (
     'modal': 100
 ) !default;
+
+$crispy__width: (
+    '25' : 25%,
+    '50' : 50%,
+    '75' : 75%,
+    '100': 100%
+) !default;

src/scss/components/_code.scss

@@ -8,6 +8,8 @@
  * </pre>
  *
  * @author Björn Hase
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
  *
  */
 
@@ -31,7 +33,6 @@ $crispy__code__background-color: #f9f9f9 !default;
         background-color: $crispy__code__background-color;
 
         margin: $crispy__code__margin;
-
-        @include crispy__font-size($crispy__code__font-size);
+        font-size: $crispy__code__font-size;
     }
 }

src/scss/components/_group.scss

@@ -8,6 +8,8 @@
  * </nav>
  *
  * @author Björn Hase
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
  *
  */
 

src/scss/components/_heading.scss

@@ -6,6 +6,8 @@
  *
  *
  * @author Björn Hase
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
  *
  */
 
@@ -38,7 +40,7 @@ $crispy__heading__margin: toEm(0 0 5px) !default;
 
     @each $h, $font-size in $crispy__heading__font-sizes {
         #{$h}, .#{$h} {
-            @include crispy__font-size($font-size);
+            font-size: toRem($font-size);
         }
     }
 }

src/scss/components/_hero.scss

@@ -2,10 +2,15 @@
  * component: hero
  *
  * background-size is as default: cover - Resize the background image to cover the entire container
- * <div class="hero" style="width: value; height: value; background-image: url(path)"></div>
+ * 
+ * <div class="hero" style="width: value; height: value; background-image: url(path)">
+ *
+ * </div>
  *
  *
  * @author Björn Hase
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
  *
  */
 

src/scss/helpers/_media.scss → src/scss/components/_media.scss

@@ -15,10 +15,6 @@
         height: auto;
     }
 
-    .img-rounded {
-        border-radius: 50%;
-    }
-
     .video-responsive {
         display: block;
         overflow: hidden;

src/scss/components/_modal.scss

@@ -6,10 +6,11 @@
  * </div>
  *
  * @author Björn Hase
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
  *
  */
 
-
 $crispy__modal__margin: toEm($crispy__spacing * 2) !default;
 $crispy__modal__z-index: zIndex('modal') !default;
 
@@ -42,6 +43,12 @@ $crispy__modal__z-index: zIndex('modal') !default;
             bottom: 0;
         }
 
+        &--center {
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
         .panel {
             margin: $crispy__modal__margin;
         }

src/scss/components/_panel.scss

@@ -1,5 +1,5 @@
 /**
- * component: panel
+ * componente: panel
  *
  * <div class="panel">
  *     <div class="panel__inner">
@@ -8,6 +8,8 @@
  * </div>
  *
  * @author Björn Hase
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
  *
  */
 

src/scss/components/_table.scss

@@ -1,5 +1,5 @@
 /**
- * component: table
+ * componente: table
  *
  * <table class="table table--striped">
  *     <thead>
@@ -16,7 +16,10 @@
  *     </tbody>
  * </table>
  *
+ *
  * @author Björn Hase
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
  *
  */
 

src/scss/crispy.scss

@@ -1,16 +1,18 @@
 @import
 
+    'functions',
     'variables',
+    'core',
 
     'components/button',
+    'components/code',
+    'components/group',
+    'components/heading',
+    'components/hero',
+    'components/modal',
+    'components/panel',
+    'components/table',
+    'components/field',
 
-
-    'helpers/float',
-    'helpers/spacing',
-    'helpers/media',
-    'helpers/text',
-    'helpers/visibility',
-    'helpers/width',
-
-    'mixins',
-    'mixins/media-queries';
+    'modifiers',
+    'mixins';

src/scss/functions/_units.scss

@@ -1,82 +0,0 @@
-/**
- * functions: units
- *
- * convert px to em and rem
- *
- *
- * @author Björn Hase
- *
- */
-
-
- /**
-  * to em, wrapper of toRelatives
-  *
-  * @param  {mixed} $values
-  * @param  {mixed} $base
-  * @return {rem}
-  */
-@function toEm($values, $base: $crispy__font-size) {
-    @return toRelatives($values, 1em, $base);
-}
-
-/**
- * to rem, wrapper of toRelatives
- *
- * @param  {mixed} $values
- * @param  {mixed} $base
- * @return {rem}
- */
-@function toRem($values, $base: $crispy__font-size) {
-    @return toRelatives($values, 1rem, $base);
-}
-
-/**
- * values to relative
- *
- * @param  {mixed} $values
- * @param  {mixed} $unit
- * @param  {mixed} $base
- * @return {number}
- */
-@function toRelatives($values, $unit, $base: $crispy__font-size) {
-    $results: 0;
-
-    @if type-of($values) == 'number' {
-		$results: toRelative($values, $base) * $unit;
-    } @else {
-        $results: ();
-
-        @each $value in $values {
-			@if $value == 0 {
-				$results: append($results, $value);
-			}
-			@else {
-				$results: append($results, toRelative($value, $base) * $unit);
-			}
-        }
-    }
-
-    @return $results;
-}
-
-/**
- * to relative
- *
- * @param  {mixed} $value
- * @param  {mixed} $base
- * @return {number}
- */
-@function toRelative($value, $base: $crispy__font-size) {
-    @return stripUnit($value) / stripUnit($base);
-}
-
-/**
- * strip unit from value
- *
- * @param  {mixed} $value
- * @return {number}
- */
-@function stripUnit($value) {
-    @return $value / ($value * 0 + 1);
-}

src/scss/functions/_zIndex.scss

@@ -1,17 +0,0 @@
-/**
- * function: z-index
- *
- * uses map $crispy__z-index to get value by key
- *
- * @author Björn Hase
- *
- */
-
-@function zIndex($name) {
-    @if map-has-key($crispy__z-index, $name) {
-        @return map-get($crispy__z-index, $name);
-    } @else {
-        @warn 'There is no item "#{$name}" in this list; choose one of: #{$crispy__z-index}';
-        @return null;
-    }
-}

src/scss/helpers/_float.scss

@@ -1,33 +0,0 @@
-/**
- * helper: float
- *
- * float & centering
- *
- *
- *
- * @author Björn Hase
- *
- */
-
-@mixin crispy__float() {
-    .has-float-left {
-        float: left;
-    }
-
-    .has-float-right {
-        float: right;
-    }
-
-    .has-float-none {
-        float: none;
-    }
-
-    .is-centered {
-        margin-left: auto;
-        margin-right: auto;
-    }
-
-    .is-clearfixed {
-        @include crispy__clearfix();
-    }
-}

src/scss/helpers/_modifizer.scss

@@ -1,42 +0,0 @@
-/**
- * helper: visibility
- *
- *
- * @author Björn Hase
- *
- */
-
-@mixin crispy__modifiers() {
-
-    .is-absolute {
-        position: absolute !important;
-    }
-
-    .is-fixed {
-        position: fixed !important;
-    }
-
-    .is-relative {
-        position: relative !important;
-    }
-
-    .is-hidden {
-        display: none !important;
-    }
-
-    .is-visible {
-        display: block !important;
-
-        &--inline {
-            display: inline !important;
-        }
-
-        &--inline-block {
-            display: inline !important;
-        }
-    }
-
-    .is-radiusless
-      border-radius: 0 !important
-    }
-}

src/scss/helpers/_spacing.scss

@@ -1,52 +0,0 @@
-/**
- * helper: spacing
- *
- *
- * @author Björn Hase
- *
- */
-
-@mixin crispy__spacing() {
-
-    .is-marginless {
-        margin: 0 !important;
-    }
-
-    .is-paddingless {
-        padding: 0 !important;
-    }
-
-    @for $i from 0 through $crispy__spacing__steps {
-        .has-margin-top-#{($i + 1)}x {
-            margin-top: ($crispy__spacing * $i) !important;
-        }
-
-        .has-margin-left-#{($i + 1)}x {
-            margin-left: ($crispy__spacing * $i) !important;
-        }
-
-        .has-margin-bottom-#{($i + 1)}x {
-            margin-bottom: ($crispy__spacing * $i) !important;
-        }
-
-        .has-margin-right-#{($i + 1)}x {
-            margin-right: ($crispy__spacing * ($i)) !important;
-        }
-
-        .has-padding-top-#{($i + 1)}x {
-            padding-top: ($crispy__spacing * $i) !important;
-        }
-
-        .has-padding-left-#{($i + 1)}x {
-            padding-left: ($crispy__spacing * $i) !important;
-        }
-
-        .has-padding-bottom-#{($i + 1)}x {
-            padding-bottom: ($crispy__spacing * $i) !important;
-        }
-
-        .has-padding-right-#{($i + 1)}x {
-            padding-right: ($crispy__spacing * $i) !important;
-        }
-    }
-}

src/scss/helpers/_typography.scss

@@ -1,92 +0,0 @@
-/**
- * helper: typography
- *
- * align, font-sizes, color, background-color
- *
- *
- * @author Björn Hase
- *
- */
-
-$crispy__typography-colors: $crispy__colors !default;
-$crispy__typography-font-sizes: $crispy__font-sizes !default;
-
-@mixin crispy__typography() {
-
-    // text align
-    .has-text-left {
-        text-align: left !important;
-    }
-
-    .has-text-right {
-        text-align: right !important;
-    }
-
-    .has-text-center {
-        text-align: center !important;
-    }
-
-    .has-text-justify {
-        text-align: justify !important;
-    }
-
-    //
-    .is-text-uppercase {
-        text-transform: uppercase !important;
-    }
-
-    .is-text-lowercase {
-        text-transform: lowercase !important;
-    }
-
-    .is-text-crossed {
-    	text-decoration: line-through !important;
-    }
-
-    .is-capitalized {
-        text-transform: capitalize !important;
-    }
-
-    .is-text-italic {
-        font-style: italic !important;
-    }
-
-    // text weight
-    .is-text-weight-light {
-        font-weight: light !important;
-    }
-
-    .is-text-weight-normal {
-        font-weight: normal !important;
-    }
-
-    .is-text-weight-bold {
-        font-weight: bold !important;
-    }
-
-    .is-text-weight-medium {
-        font-weight: medium !important;
-    }
-
-    .ist-text-weight-semibold {
-        font-weight: semibold !important;
-    }
-
-    @each $name, $font-size in $crispy__typography-font-sizes {
-        .has-text-size-#{$name} {
-            font-size: $font-size !important;
-        }
-    }
-
-    @each $name, $color in $crispy__typography-colors {
-		.has-text-color-#{$name} {
-			color: $color !important;
-		}
-	}
-
-    @each $name, $color in $crispy__typography-colors {
-        .has-background-color-#{$name} {
-            background-color: $color !important;
-        }
-    }
-}

src/scss/helpers/_width.scss

@@ -1,25 +0,0 @@
-/**
- * helper: width
- *
- *
- * @author Björn Hase
- *
- */
-
-@mixin crispy__width() {
-    .has-width-25 {
-        width: 25%;
-    }
-
-    .has-width-50 {
-        width: 50%;
-    }
-
-    .has-width-75 {
-        width: 75%;
-    }
-
-    .has-width-100 {
-        width: 100%;
-    }
-}