adding bugfix functions

adding text

dest/index.html

@@ -183,18 +183,9 @@
                     <h2 id="buttons" class="margin-top-1x">Buttons</h2>
 
                     <button class="button">Default</button>
-                    <button class="button button--secondary">Default</button>
-                    <button class="button button--success">Success</button>
-                    <button class="button button--warning">Warning</button>
-                    <button class="button button--danger">Danger</button>
-                    <button class="button button--info">Info</button>
-                    <button class="button button--info button--wide margin-top-1x">Info</button>
-                    <pre class="code"><code class="margin-top-1x margin-bottom-1x">&lt;button class=&quot;button button--danger&quot;&gt;&lt;/button&gt;
-&lt;button class=&quot;button button--success&quot;&gt;&lt;/button&gt;
-&lt;button class=&quot;button button--warning&quot;&gt;&lt;/button&gt;
-&lt;button class=&quot;button button--danger&quot;&gt;&lt;/button&gt;
-&lt;button class=&quot;button button--up&quot;&gt;&lt;/button&gt;
-&lt;button class=&quot;button button--down&quot;&gt;&lt;/button&gt;</code></pre>
+                    <button class="button button--wide margin-top-1x">Info</button>
+                    <pre class="code margin-top-1x"><code>&lt;button class=&quot;button&quot;&gt;&lt;/button&gt;
+&lt;button class=&quot;button button--wide&quot;&gt;&lt;/button&gt;</code></pre>
 
                     <hr>
                     <h2 id="table" class="margin-top-1x">Table</h2>
@@ -244,24 +235,14 @@
                         Media
                     </h3>
                     <pre class="code"><code>&lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;
-&lt;img class=&quot;img-fit-cover&quot; style=&quot;width: 100%; height: 200px;&quot; src=&quot;https://picsum.photos/400&quot;/&gt;
-&lt;img class=&quot;img-fit-contain&quot; style=&quot;width: 100%; height: 200px;&quot; src=&quot;https://picsum.photos/400&quot;/&gt;</code></pre>
-                    <div class="grid">
-                        <div class="col-6">
-                            <img class="img-responsive" src="https://picsum.photos/400" />
-                        </div>
-                        <div class="col-6">
-                            <img class="img-fit-cover" style="width: 100%; height: 200px;" src="https://picsum.photos/400" />
-                        </div>
-                        <div class="col-6">
-                            <img class="img-fit-contain" style="width: 100%; height: 200px;" src="https://picsum.photos/400" />
-                        </div>
-                    </div>
-                    <pre class="code"><code>&lt;figure&gt;
+&lt;figure&gt;
     &lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;
     &lt;figcaption class=&quot;text-center&quot;&gt;Lorem Ipsum&lt;/figcaption&gt;
 &lt;/figure&gt;</code></pre>
                     <div class="grid">
+                        <div class="col-6">
+                            <img class="img-responsive" src="https://picsum.photos/400" />
+                        </div>
                         <div class="col-6">
                             <figure>
                                 <img class="img-responsive" src="https://picsum.photos/400" />
@@ -270,7 +251,6 @@
                         </div>
                     </div>
 
-
                     <!-- Reflex Grid -->
                     <hr />
                     <h2 id="reflex-grid" class="margin-top-1x">

src/scss/_base.scss

@@ -37,7 +37,7 @@ table {
 
 // paragraphs
 p {
-    margin: 0 0 pxToEm($crispy__margin) 0;
+    margin: toEm(0 0 $crispy__margin 0);
 }
 
 // Semantic text elements
@@ -70,7 +70,7 @@ kbd {
 }
 
 mark {
-    padding: pxToEm(10px);
+    padding: toEm(10px);
 
 }
 
@@ -78,7 +78,7 @@ mark {
 blockquote {
     border-left: 1px solid $crispy__color-text;
     margin-left: 0;
-    padding: pxToEm(10px) pxToEm(20px);
+    padding: toEm(10px 20px);
 
     p:last-child {
         margin-bottom: 0;
@@ -88,11 +88,11 @@ blockquote {
 // lists
 ul, ol, dl {
     padding: 0;
-    margin: 0 0 pxToEm($crispy__margin) pxToEm($crispy__margin);
+    margin: toEm(0 0 $crispy__margin $crispy__margin);
 }
 
 ul ul, ol ol {
-    margin-top: pxToEm($crispy__margin / 2);
+    margin-top: toEm(($crispy__margin / 2));
 }
 
 ol {
@@ -113,18 +113,18 @@ dt {
 
 // media
 figure  {
-    margin: 0 0 pxToEm($crispy__margin);
+    margin: toEm(0 0 $crispy__margin);
 }
 
 figcaption {
-    margin: pxToEm($crispy__margin) 0 0;
+    margin: toEm($crispy__margin 0 0);
 }
 
 // divider
 hr {
     border: 0;
     border-top: 1px solid $crispy__color-text;
-    margin: pxToEm($crispy__margin) 0
+    margin: toEm($crispy__margin 0)
 }
 
 // body

src/scss/components/_icon.scss

@@ -17,7 +17,7 @@ $crispy__icon__vertical-align: text-bottom !default;
 $crispy__icon__margin: 0 2px !default;
 
 $crispy__icon__sizes: (
-    'default': $cripsy__font-size,
+    'default': $crispy__body__font-size,
     'small': 14px,
     'large': 28px
 ) !default;

src/scss/components/_panel.scss

@@ -9,11 +9,15 @@
  *
  */
 
-$crispy__panel__margin: toEm(20px) !default;
+
+$crispy__panel__margin: toEm($cripsy__margin * 2) !default;
+$crispy__panel__padding: toEm($cripsy__margin * 3) !default;
 
 @mixin crispy__panel {
     .panel {
         position: absolute;
+        margin: $crispy__panel__margin;
+        padding: $crispy__panel__padding;
 
         &--fixed {
             position: fixed;

src/scss/components/_table.scss

@@ -20,6 +20,7 @@
  *
  */
 
+
 $crispy__table__padding: toEm(10px 8px) !default;
 
 $crispy__table__td__border: 1px solid lighten($crispy__color-text, 40%) !default;

src/scss/crispy.scss

@@ -6,10 +6,10 @@
     'base',
 
     'components/button',
+    'components/code',
     'components/heading',
     'components/icon',
     'components/table',
-    'components/code',
 
     'helpers/helpers';
 
@@ -20,14 +20,9 @@
 @include crispy__icon();
 @include crispy__code();
 
-// font-sizes & colors
-.button {
-    //@include crispy__font-sizes($crispy__button__font-sizes);
-    @include crispy__button__colors($crispy__button__colors);
-}
-
 // helpers
 @include crispy__align();
 @include crispy__margin();
-@include crispy__text();
 @include crispy__media();
+@include crispy__text();
+@include crispy__width();

src/scss/functions/_units.scss

@@ -38,9 +38,11 @@
  * @return {number}
  */
 @function toRelatives($values, $unit, $base: $crispy__font-size) {
+    $results: 0;
+
     @if type-of($values) == 'number' {
-		$results: toRelative($values, $base: $crispy__font-size);
-    } else {
+		$results: toRelative($values, $base) * $unit;
+    } @else {
         $results: ();
 
         @each $value in $values {
@@ -64,7 +66,7 @@
  * @return {number}
  */
 @function toRelative($value, $base: $crispy__font-size) {
-    @return stripUnit($value) / $base;
+    @return stripUnit($value) / stripUnit($base);
 }
 
 /**

src/scss/helpers/_margin.scss

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

src/scss/helpers/_text.scss

@@ -1,15 +1,14 @@
 /**
  * helpers for text
  *
- * - font-sizes
- * - color
- * - background-color
+ * font-sizes, color, background-color
  *
  *
  * @author Björn Hase
  *
  */
 
+
 $crispy__text-colors: $crispy__colors !default;
 $crispy__text-font-sizes: $crispy__font-sizes !default;
 

src/scss/mixins/_fonts.scss

@@ -2,13 +2,13 @@
  * fonts
  *
  *
- *
+ * @author Björn Hase
  *
  */
 
+
 /**
- * add font-size in px as fallback
- * and in rem
+ * add font-size in px as fallback and in rem
  *
  *
  * @param {px} $font-size
@@ -16,5 +16,24 @@
  */
 @mixin crispy__font-size($font-size) {
     font-size: $font-size;
-    font-size: pxToRem($font-size);
+    font-size: toRem($font-size);
+}
+
+/**
+ * add font-sizes as modifactors
+ *
+ *
+ * @param {map} $font-sizes
+ *
+ */
+@mixin crispy__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);
+            }
+        }
+    }
 }