adding #25 #24 #20 #19 #18 #21 #22 #23

dist/example/index.html

@@ -18,11 +18,11 @@
 					<div class="text-center">
                         <hgroup>
 							<a href="/">
-                                <h1 class="h2 margin-top-4 margin-bottom-1">
-                                    <svg class="icon header__logo text-size-mega" alt="Crisp">
+                                <h1 class="h2 margin-top-4">
+                                    <svg class="icon header__logo" alt="Crisp">
                                         <use xlink:href="symbol-defs.svg#icon-logo" />
-                                    </svg>
-								    Crispy CSS 2.2.3
+                                    </svg><br />
+								    Crispy CSS 3.0.0
                                 </h1>
                             </a>
                             <h2 class="h6">
@@ -39,7 +39,7 @@
 		    <div class="col-12 col-md-6">
                 <h3 class="h4 text-center">
                     <span class="h3__icon">
-                        <svg class="icon icon-color-primary text-size-mega" alt="Lightweight">
+                        <svg class="icon icon-color-primary text-size-large" alt="Lightweight">
                             <use xlink:href="symbol-defs.svg#icon-paperplane" />
                         </svg>
                     </span>
@@ -54,7 +54,7 @@
             <div class="col-12 col-md-6">
                 <h3 class="h4 text-center">
                     <span class="h3__icon">
-                        <svg class="icon icon-color-primary text-size-mega" alt="Mixins and Functions">
+                        <svg class="icon icon-color-primary text-size-large" alt="Mixins and Functions">
                             <use xlink:href="symbol-defs.svg#icon-shipping" />
                         </svg>
                     </span>
@@ -68,7 +68,7 @@
             <div class="col-12 col-md-6">
                 <h3 class="h4 text-center">
                     <span class="h3__icon">
-                        <svg class="icon icon-color-primary text-size-mega" alt="Customizeable">
+                        <svg class="icon icon-color-primary text-size-large" alt="Customizeable">
                             <use xlink:href="symbol-defs.svg#icon-transformers" />
                         </svg>
                     </span>
@@ -82,7 +82,7 @@
             <div class="col-12 col-md-6">
                 <h3 class="h4 text-center">
                     <span class="h3__icon">
-                        <svg class="icon icon-color-primary text-size-mega" alt="Coding Style">
+                        <svg class="icon icon-color-primary text-size-large" alt="Coding Style">
                             <use xlink:href="symbol-defs.svg#icon-ruler" />
                         </svg>
                     </span>
@@ -102,7 +102,7 @@
                 <!-- getting started -->
 			    <hr class="margin-top-3">
                 <h2 class="h3">Installation</h2>
-                <pre class="code"><code>npm install crispy</code></pre>
+                <pre class="code"><code>npm install crispy-css</code></pre>
 
                 <h2 class="h3">How it works</h2>
 
@@ -118,7 +118,6 @@
 @include crispy__code();
 @include crispy__field();
 @include crispy__group();
-@include crispy__heading();
 @include crispy__hero();
 @include crispy__icon();
 @include crispy__media();
@@ -376,6 +375,24 @@
                         </svg>
                     </div>
                 </div>
+                <div class="panel">
+                    <div class="panel__inner">
+                        <button class="button">
+                            <svg class="icon text-size-small" aria-hidden="true">
+                                <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
+                            </svg>
+                        </button>
+                        <button class="button">
+                            <svg class="icon text-size-small" aria-hidden="true">
+                                <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
+                            </svg>
+                            Button
+                        </button>
+                        <button class="button">
+                            Button
+                        </button>
+                    </div>
+                </div>
                 <p class="margin-top-2">
                     To change Color you can use "icon-color-*".
                 </p>

src/_core.scss

@@ -39,7 +39,7 @@
 
     // paragraphs
     p {
-        margin: toEm(($crispy__spacing / 3) 0 $crispy__spacing 0);
+        margin: ($crispy__spacing * 0.3) 0 $crispy__spacing 0;
     }
 
     // Semantic text elements
@@ -68,14 +68,14 @@
     }
 
     mark {
-        padding: toEm(5px);
+        padding: 0.25em;
     }
 
     // blockquote
     blockquote {
         border-left: 1px solid $crispy__color-secondary;
         margin-left: 0;
-        padding: toEm(10px 20px);
+        padding: 0.125em 0.5em;
 
         p:last-child {
             margin-bottom: 0;
@@ -87,12 +87,12 @@
     ol,
     ul {
         padding: 0;
-        margin: toEm(0 0 $crispy__spacing ($crispy__spacing * 2));
+        margin: 0 0 $crispy__spacing ($crispy__spacing * 2);
     }
 
     ol ol,
     ul ul {
-        margin-top: toEm(($crispy__spacing / 2));
+        margin-top: $crispy__spacing * 0.125;
     }
 
     ol {
@@ -114,29 +114,68 @@
 
     // media
     figure {
-        margin: toEm(0 0 $crispy__spacing);
+        margin: 0 0 $crispy__spacing;
     }
 
     figcaption {
-        margin: toEm($crispy__spacing 0 0);
+        margin: $crispy__spacing 0 0;
     }
 
     // divider
     hr {
         border: 0;
         border-top: 1px solid $crispy__color-secondary;
-        margin: toEm($crispy__spacing 0);
+        margin: $crispy__spacing 0;
+    }
+
+    // heading
+    h1, .h1,
+    h2, .h2,
+    h3, .h3,
+    h4, .h4,
+    h5, .h5,
+    h6, .h6 {
+        font-family: $crispy__heading__font-family;
+        font-weight: $crispy__heading__font-weight;
+        line-height: $crispy__heading__line-height;
+        margin: $crispy__heading__margin;
+    }
+
+    @each $h, $font-size in $crispy__heading__font-sizes {
+        #{$h}, .#{$h} {
+            font-size: $font-size * 0.9;
+
+            @include crispy__media-md() {
+                font-size: $font-size;
+            }
+
+            @include crispy__media-xlg() {
+                font-size: $font-size * 1.2;
+            }
+        }
     }
 
     // body
     body {
         font-family: $crispy__font-family-primary;
-        font-weight: normal;
-        line-height: $crispy__golden-ratio;
+        font-weight: $crispy__font-weight;
+
+        font-size: $crispy__font-size-xxs;
+        @include crispy__media-md() {
+            font-size: $crispy__font-size-md;
+        }
+
+        @include crispy__media-xlg() {
+            font-size: $crispy__font-size-xlg;
+        }
+
+        line-height: $crispy__line-height-xxs;
+        @include crispy__media-md() {
+            line-height: $crispy__line-height-md;
+        }
+
         color: $crispy__color-text;
         background-color: $crispy__color-background;
         direction: $crispy__direction;
-
-        font-size: toRem($crispy__font-size);
     }
 }

src/_functions.scss

@@ -10,68 +10,6 @@
  *
  */
 
- /**
-  * px 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);
-}
-
-/**
- * px 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
  *
@@ -108,8 +46,8 @@
  * @return {[type]}             [description]
  *
  */
-@function oppositeDirection($direction) {
-
+@function oppositeDirection($direction)
+{
     $opposite-direction: 0;
 
     $direction-map: (

src/_modifiers.scss

@@ -76,7 +76,15 @@
 
     @each $name, $font-size in $crispy__font-sizes {
         .text-size-#{$name} {
-            font-size: $font-size !important;
+            font-size: $font-size * 0.9;
+
+            @include crispy__media-md() {
+                font-size: $font-size;
+            }
+
+            @include crispy__media-xlg() {
+                font-size: $font-size * 1.1;
+            }
         }
     }
 
@@ -314,35 +322,35 @@
 
     @for $i from 0 through $crispy__spacing__steps {
         .margin-top-#{$i} {
-            margin-top: ($crispy__spacing * $i) !important;
+            margin-top: ($crispy__spacing * $i * 0.5) !important;
         }
 
         .margin-left-#{$i} {
-            margin-left: ($crispy__spacing * $i) !important;
+            margin-left: ($crispy__spacing * $i * 0.5) !important;
         }
 
         .margin-bottom-#{$i} {
-            margin-bottom: ($crispy__spacing * $i) !important;
+            margin-bottom: ($crispy__spacing * $i * 0.5) !important;
         }
 
         .margin-right-#{$i} {
-            margin-right: ($crispy__spacing * $i) !important;
+            margin-right: ($crispy__spacing * $i * 0.5) !important;
         }
 
         .padding-top-#{$i} {
-            padding-top: ($crispy__spacing * $i) !important;
+            padding-top: ($crispy__spacing * $i * 0.5) !important;
         }
 
         .padding-left-#{$i} {
-            padding-left: ($crispy__spacing * $i) !important;
+            padding-left: ($crispy__spacing * $i * 0.5) !important;
         }
 
         .padding-bottom-#{$i} {
-            padding-bottom: ($crispy__spacing * $i) !important;
+            padding-bottom: ($crispy__spacing * $i * 0.5) !important;
         }
 
         .padding-right-#{$i} {
-            padding-right: ($crispy__spacing * $i) !important;
+            padding-right: ($crispy__spacing * $i * 0.5) !important;
         }
     }
 }

src/_variables.scss

@@ -13,17 +13,21 @@
  */
 
 // font
-$crispy__font-size: 16px !default;
+$crispy__font-size: 1rem !default;
+$crispy__font-size-xxs: $crispy__font-size * 0.9 !default;
+$crispy__font-size-md: $crispy__font-size !default;
+$crispy__font-size-xlg: $crispy__font-size * 1.1 !default;
+
+$crispy__font-weight: normal !default;
+
 $crispy__golden-ratio: 1.618 !default;
+$crispy__line-height-xxs: 1.4 !default;
+$crispy__line-height-md: $crispy__golden-ratio !default;
 
 $crispy__font-family-primary: Arial, Helvetica, Neue Helvetica, sans-serif !default;
 $crispy__font-family-monospace: Arial, Helvetica, Neue Helvetica, sans-serif !default;
 $crispy__direction: ltr !default;
 
-// spacing
-$crispy__spacing: 18px !default;
-$crispy__spacing__steps: 5 !default;
-
 // colors
 $crispy__color-primary: #f18f01 !default;
 $crispy__color-secondary: #b3b2af !default;
@@ -44,17 +48,6 @@ $crispy__color-link-visited: $crispy__color-primary !default;
 $crispy__color-link-focus: $crispy__color-primary !default;
 $crispy__color-link-active: $crispy__color-primary !default;
 
-// borders
-$crispy__border-radius: 0.5em !default;
-$crispy__border: 1px solid $crispy__color-border !default;
-
-// breakpoints
-$crispy__xs : 576px !default;
-$crispy__sm : 768px !default;
-$crispy__md : 992px !default;
-$crispy__lg : 1200px !default;
-$crispy__xlg: 1600px !default;
-
 // colors as map
 $crispy__colors: (
     'primary'  : $crispy__color-primary,
@@ -65,21 +58,53 @@ $crispy__colors: (
     'info'     : $crispy__color-info
 ) !default;
 
+// spacing
+$crispy__spacing: 1.25em !default;
+$crispy__spacing__steps: 5 !default;
+
 // font-sizes as map
 $crispy__font-sizes: (
-    'default': toRem($crispy__font-size),
-    'small'  : toRem(11px),
-    'large'  : toRem(26px),
-    'big'    : toRem(34px),
-    'mega'   : toRem(42px)
+    'default' : $crispy__font-size,
+    'small'   : $crispy__font-size * 0.875,
+    'medium'  : $crispy__font-size * 1.25,
+    'large'   : $crispy__font-size * 1.5,
+    'big'     : $crispy__font-size * 1.75,
+    'mega'    : $crispy__font-size * 2
+) !default;
+
+// heading
+$crispy__heading__font-sizes: (
+    'h1': $crispy__font-size * 2.5,
+    'h2': $crispy__font-size * 2,
+    'h3': $crispy__font-size * 1.75,
+    'h4': $crispy__font-size * 1.5,
+    'h5': $crispy__font-size * 1.25,
+    'h6': $crispy__font-size
 ) !default;
 
+$crispy__heading__font-weight: bold !default;
+$crispy__heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
+$crispy__heading__line-height: 1.2 !default;
+$crispy__heading__margin: 0 0 0.5em !default;
+
+// borders
+$crispy__border-radius: 3px !default;
+$crispy__border: 1px solid $crispy__color-border !default;
+
+// breakpoints
+$crispy__xs : 576px !default;
+$crispy__sm : 768px !default;
+$crispy__md : 992px !default;
+$crispy__lg : 1200px !default;
+$crispy__xlg: 1600px !default;
+
 // z-index
 $crispy__z-index: (
     'overlay': 90,
     'modal'  : 100
 ) !default;
 
+// width
 $crispy__width: (
     '25' : 25%,
     '50' : 50%,

src/components/_button.scss

@@ -6,7 +6,7 @@
  *
  */
 
-$crispy__button__padding: toEm(10px 25px) !default;
+$crispy__button__padding: ($crispy__spacing * 0.5) $crispy__spacing !default;
 
 @mixin crispy__button() {
     .button {

src/components/_code.scss

@@ -13,10 +13,9 @@
  *
  */
 
-$crispy__code__font-size: $crispy__font-size !default;
 $crispy__code__font-family: monospace, monospace !default;
-$crispy__code__padding: toEm(10px 20px) !default;
-$crispy__code__margin: toEm(0 0 $crispy__spacing) !default;
+$crispy__code__padding: ($crispy__spacing * 0.5) $crispy__spacing !default;
+$crispy__code__margin: 0 0 $crispy__spacing !default;
 $crispy__code__border: 1px solid $crispy__color-border !default;
 $crispy__code__background-color: #f9f9f9 !default;
 
@@ -33,6 +32,5 @@ $crispy__code__background-color: #f9f9f9 !default;
         background-color: $crispy__code__background-color;
 
         margin: $crispy__code__margin;
-        font-size: $crispy__code__font-size;
     }
 }

src/components/_field.scss

@@ -13,7 +13,7 @@
  *
  */
 
-$crispy__field__margin: toEm(0 0 $crispy__spacing 0) !default;
+$crispy__field__margin: 0 0 $crispy__spacing 0 !default;
 
 $crispy__field__border: 1px solid $crispy__color-secondary !default;
 
@@ -31,9 +31,9 @@ $crispy__field__input__font-size: $crispy__font-size !default;
 $crispy__field__input__padding: toEm(6px 8px) !default;
 $crispy__field__input__color: $crispy__color-text !default;
 
-$crispy__field__select__padding: toEm(8px) !default;
+$crispy__field__select__padding: 0.25em !default;
 
-$crispy__field__panel__padding: toEm(10px) !default;
+$crispy__field__panel__padding: 0.25em !default;
 
 $crispy__field__select__background-color: white !default;
 $crispy__field__select__border: $crispy__border !default;

src/components/_group.scss

@@ -14,7 +14,7 @@
  */
 
 $crispy__group__character: '/' !default;
-$crispy__group__character__margin: toEm(0 $crispy__spacing 0) !default;
+$crispy__group__character__margin: 0 $crispy__spacing 0 !default;
 
 @mixin crispy__group() {
     .group {

src/components/_heading.scss

@@ -1,46 +0,0 @@
-/**
- * component: heading
- *
- * create classes for heading similar to there name,
- * run map for sizes on each heading
- *
- *
- * @author Björn Hase
- * @license http://opensource.org/licenses/MIT The MIT License
- * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
- *
- */
-
-$crispy__heading__font-sizes: (
-    'h1': 40px,
-    'h2': 36px,
-    'h3': 32px,
-    'h4': 28px,
-    'h5': 24px,
-    'h6': 20px
-) !default;
-
-$crispy__heading__font-weight: bold !default;
-$crispy__heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
-$crispy__heading__line-height: $crispy__golden-ratio !default;
-$crispy__heading__margin: toEm(0 0 5px) !default;
-
-@mixin crispy__heading {
-    h1, .h1,
-    h2, .h2,
-    h3, .h3,
-    h4, .h4,
-    h5, .h5,
-    h6, .h6 {
-        font-family: $crispy__heading__font-family;
-        font-weight: $crispy__heading__font-weight;
-        line-height: $crispy__heading__line-height;
-        margin: $crispy__heading__margin;
-    }
-
-    @each $h, $font-size in $crispy__heading__font-sizes {
-        #{$h}, .#{$h} {
-            font-size: toRem($font-size);
-        }
-    }
-}

src/components/_icon.scss

@@ -9,15 +9,30 @@
  *
  */
 
-$crispy__icon__width: 1em !default;
+$crispy__icon__width: 1.125em !default;
 
 @mixin crispy__icon {
     .icon {
         width: $crispy__icon__width;
         height: $crispy__icon__width;
+
+        max-height: 100%;
+        max-width: 100%;
+
         vertical-align: middle;
         overflow: hidden;
-        line-height: $crispy__golden-ratio;
+
+        line-height: $crispy__line-height-xxs;
+
+        @include crispy__media-md() {
+            line-height: $crispy__line-height-md;
+        }
+    }
+
+    @each $name, $color in $crispy__colors {
+        .icon-color-#{$name} {
+            fill: $color !important;
+        }
     }
 
     @each $name, $color in $crispy__colors {

src/components/_modal.scss

@@ -14,8 +14,8 @@
  */
 
 $crispy__modal__margin: 1em !default;
-$crispy__modal__max-width: 50% !default; // @TODO add responsive 
-$crispy__modal__margin: toEm($crispy__spacing * 2) !default;
+$crispy__modal__max-width: 50% !default; // @TODO add responsive
+$crispy__modal__margin: ($crispy__spacing * 2) !default;
 $crispy__modal__z-index: zIndex('modal') !default;
 
 @mixin crispy__modal {

src/components/_panel.scss

@@ -13,7 +13,7 @@
  *
  */
 
-$crispy__panel__padding: toEm(15px 20px) !default;
+$crispy__panel__padding: ($crispy__spacing * 0.5) $crispy__spacing !default;
 
 @mixin crispy__panel {
     .panel {

src/components/_table.scss

@@ -23,7 +23,7 @@
  *
  */
 
-$crispy__table__padding: toEm(10px 8px) !default;
+$crispy__table__padding: ($crispy__spacing * 0.5) ($crispy__spacing * 0.75) !default;
 
 $crispy__table__td__border: 1px solid lighten($crispy__color-text, 40%) !default;
 $crispy__table__th__border-width: 2px !default;

src/crispy.scss

@@ -12,7 +12,6 @@
     'components/button',
     'components/code',
     'components/group',
-    'components/heading',
     'components/hero',
     'components/icon',
     'components/media',

src/crispy_all.scss

@@ -8,7 +8,6 @@
 @include crispy__progress();
 @include crispy__field();
 @include crispy__group();
-@include crispy__heading();
 @include crispy__hero();
 @include crispy__icon();
 @include crispy__media();

src/example/site/_header.scss

@@ -10,16 +10,13 @@
 
 @mixin site__header() {
     .header {
-        &__logo {
-            vertical-align: top;
-        }
+        text-align: center;
 
         a {
             text-decoration: none;
 
             .icon {
-                vertical-align: top;
-                font-size: 3.25rem !important;
+                font-size: 4rem;
             }
 
             &:hover {