piecss 0.1.6 → 0.1.6.1

data/sass/piecss/utilities/sides.scss

@@ -4,17 +4,10 @@
 // Content
 // 1. Functions
 //    value-map
+//    is-value-map
+//    value-map-to-unit
+//    -sides
 // 2. Mixins
-//    padding
-//    padding-top
-//    padding-right
-//    padding-bottom
-//    padding-left
-//    margin
-//    margin-top
-//    margin-right
-//    margin-bottom
-//    margin-left
 //    -unit-sides
 //    -sides
 
@@ -23,90 +16,121 @@
 
 
 /**
- * Takes a list of values and returns a spacing map
+ * Takes a list of values and keys and returns a spacing map.
  *
  * @since 0.1
  *
- * @param {*} $sides - A list of value arguments like CSS's normal padding (0 0 0 0)
+ * @param {List} $values - A list of value arguments like CSS's normal padding (0 0 0 0)
  * @param {String} $property (padding) - The property to which the values should be applied
  */
 
-@function value-map($sides, $property: padding)
-{
-    // SASS appends a comma to the $sides list,
-    // don't know how to get around this but list the values
-    $sides: nth($sides,1);
+@function value-map($values, $keys: $keys-side) {
 
-    @if is-value-map($sides) {
-        @return $sides;
+    // Make sure we have all sides, except when a map is used as an argument
+    @if type-of($values)==map {
+        @return $values;
     }
+    $values: -sides($values);
+    
+    $-list: zip($keys, $values);
 
-    // Create map to hold our spacing values;
-    $spacing: ();
+    $map: ();
+    @each $pair in $-list {
+        $map: map-merge($map, (nth($pair, 1): nth($pair, 2)));
+    }
 
-    @if $property==padding or $property==margin {
-        $length: length($sides);
-        @if $length==1 {
-            $spacing: (top:$sides,right:$sides,bottom:$sides,left:$sides);
-        }
-        @elseif $length==2 {
-            $spacing: (top:nth($sides,1),right:nth($sides,2),bottom:nth($sides,1),left:nth($sides,2));
-        }
-        @elseif $length==3 {
-            $spacing: (top:nth($sides,1),right:nth($sides,2),bottom:nth($sides,3),left:nth($sides,2));
-        }
-        @else {
-            $spacing: (top:nth($sides,1),right:nth($sides,2),bottom:nth($sides,3),left:nth($sides,4));
+    @return $map;
+}
+
+/**
+ * Checks if a Map is a proper value-map by checking for specific keys.
+ *
+ * @since 0.1
+ *
+ * @param {List} $values - The value to test, can be a single number or a list
+ * @param {List} $keys ($keys-side) - A list of keys to match
+ *
+ * @return {Bool}
+ */
+
+@function is-value-map($values, $keys: $keys-side) {
+
+    // Start by assuming $values is not a map
+    $is-map: false;
+
+    // Simple test for a match to $keys, passes if there is a single match
+    @if type-of($values)==map {
+
+        @each $key in $keys {
+            @if map-has-key($values, $key)==true {
+                $is-map: true;
+            }
         }
     }
 
-    @elseif str-index($property, top) {
-        $spacing: (top: $sides);
-    }
+    @return $is-map;
+}
 
-    @elseif str-index($property, right) {
-        $spacing: (right: $sides);
-    }
+/**
+ * Converts values in a (one-dimensional) map to the specified [unit](./#variable-unit).
+ *
+ * @since 0.1
+ *
+ * @throws Argument $map needs to be a map.
+ *
+ * @param {List} $values - The value to test, can be a single number or a list
+ * @param {Number} $unit ($unit) - A list of keys to match
+ *
+ * @return {Map}
+ */
 
-    @elseif str-index($property, bottom) {
-        $spacing: (bottom: $sides);
-    }
+@function value-map-to-unit($map, $unit: $unit) {
 
-    @elseif str-index($property, left) {
-        $spacing: (left: $sides);
+    @if not(type-of($map)==map) {
+        @warn 'Argument $map needs to be a map.';
+        @return $map;
     }
 
-    @return $spacing;
+    // Convert to units
+    @each $key, $value in $map {
+        $map: map-merge($map, ($key: to-unit($value, $unit)));
+    } 
+
+    @return $map;   
 }
 
 /**
- * Checks if a Map is a proper value-map (side:value).
+ * This function takes a space separated list of padding or margin values and completes it into a list of four side values.
  *
  * @since 0.1
+ * @access private
  *
- * @param {Map} - A value map
+ * @throws Argument $values needs to be a list.
  *
- * @return {Bool}
+ * @param {List} $values - The value to test, can be a single number or a list
+ *
+ * @return {List}
  */
+@function -sides($values) {
 
-@function is-value-map($values)
-{
-    // Inspect the $sides array, is it alreay a spacing map?
-    $is-map: false;
-    @if map-has-key($values, top)==true {
-        $is-map: true;
-    }
-    @elseif map-has-key($values, right)==true {
-        $is-map: true;
-    }
-    @elseif map-has-key($values, bottom)==true {
-        $is-map: true;
+    @if type-of($values)==map {
+        @warn 'Argument $values needs to be a list or a single value.';
+        @return $values;
     }
-    @elseif map-has-key($values, left)==true {
-        $is-map: true;
+
+    // Check for the number of values and convert to a value map
+    $length: length($values);
+    @if $length==1 {
+        $values: $values $values $values $values;
+    } @elseif $length==2 {
+        $values: nth($values, 1) nth($values, 2) nth($values, 1) nth($values, 2);
+    } @elseif $length==3 {
+        $values: nth($values, 1) nth($values, 2) nth($values, 3) nth($values, 2);
+    } @elseif $length==4 {
+        $values: nth($values, 1) nth($values, 2) nth($values, 3) nth($values, 4);
     }
 
-    @return $is-map;
+    @return $values;
 }
 
 
@@ -121,66 +145,58 @@
  * @param {Map} $sides - A spacing map in px (top:0,right:0,bottom:0,left:0)
  */
 
-@mixin padding($sides...)
-{
-    $sides: value-map($sides, padding);
-    @include -unit-sides($sides, padding);
+@mixin padding($values) {
+
+    @include -unit-sides($values, padding);
 }
-    /**
-     * Mixin top padding in final unit (defaults to em). The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used. With rem fallback if the final unit of output is rem.
-     * 
-     * @since 0.1
-     * 
-     * @param {Number} $value - A value in px
-     */
-
-    @mixin padding-top($value)
-    {
-        $sides: value-map($value, padding-top);
-        @include -unit-sides($sides, padding);
-    }
 
-    /**
-     * Mixin right padding in final unit (defaults to em). The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used. With rem fallback if the final unit of output is rem.
-     * 
-     * @since 0.1
-     * 
-     * @param {Number} $value - A value in px
-     */
-
-    @mixin padding-right($value)
-    {
-        $sides: value-map($value, padding-right);
-        @include -unit-sides($sides, padding);
-    }
+/**
+ * Mixin top padding in final unit (defaults to em). The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used. With rem fallback if the final unit of output is rem.
+ * 
+ * @since 0.1
+ * 
+ * @param {Number} $value - A value in px
+ */
 
-    /**
-     * Mixin bottom padding in final unit (defaults to em). The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used. With rem fallback if the final unit of output is rem.
-     * 
-     * @since 0.1
-     * 
-     * @param {Number} $value - A value in px
-     */
-
-    @mixin padding-bottom($value)
-    {
-        $sides: value-map($value, padding-bottom);
-        @include -unit-sides($sides, padding);
-    }
+@mixin padding-top($value) {
+    @include -unit-sides((top: $value), padding);
+}
 
-    /**
-     * Mixin left padding in final unit (defaults to em). The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used. With rem fallback if the final unit of output is rem.
-     * 
-     * @since 0.1
-     * 
-     * @param {Number} $value - A value in px
-     */
-
-    @mixin padding-left($value)
-    {
-        $sides: value-map($value, padding-left);
-        @include -unit-sides($sides, padding);
-    }
+/**
+ * Mixin right padding in final unit (defaults to em). The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used. With rem fallback if the final unit of output is rem.
+ * 
+ * @since 0.1
+ * 
+ * @param {Number} $value - A value in px
+ */
+
+@mixin padding-right($value) {
+    @include -unit-sides((right: $value), padding);
+}
+
+/**
+ * Mixin bottom padding in final unit (defaults to em). The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used. With rem fallback if the final unit of output is rem.
+ * 
+ * @since 0.1
+ * 
+ * @param {Number} $value - A value in px
+ */
+
+@mixin padding-bottom($value) {
+    @include -unit-sides((bottom: $value), padding);
+}
+
+/**
+ * Mixin left padding in final unit (defaults to em). The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used. With rem fallback if the final unit of output is rem.
+ * 
+ * @since 0.1
+ * 
+ * @param {Number} $value - A value in px
+ */
+
+@mixin padding-left($value) {
+    @include -unit-sides((left: $value), padding);
+}
 
 
 /**
@@ -191,66 +207,59 @@
  * @param {Map} $sides - A spacing map in px (top:0,right:0,bottom:0,left:0)
  */
 
-@mixin margin($sides...)
-{
-    $sides: value-map($sides, margin);
-    @include -unit-sides($sides, margin);
+@mixin margin($values) {
+
+    @include -unit-sides($values, margin);
 }
-    /**
-     * Mixin top margin in final unit (defaults to em). The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used. With rem fallback if the final unit of output is rem.
-     * 
-     * @since 0.1
-     * 
-     * @param {Number} $value - A value in px
-     */
-
-    @mixin margin-top($value)
-    {
-        $sides: value-map($value, margin-top);
-        @include -unit-sides($sides, margin);
-    }
 
-    /**
-     * Mixin right margin in final unit (defaults to em). The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used. With rem fallback if the final unit of output is rem.
-     * 
-     * @since 0.1
-     * 
-     * @param {Number} $value - A value in px
-     */
-
-    @mixin margin-right($value)
-    {
-        $sides: value-map($value, margin-right);
-        @include -unit-sides($sides, margin);
-    }
+/**
+ * Mixin top margin in final unit (defaults to em). The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used. With rem fallback if the final unit of output is rem.
+ * 
+ * @since 0.1
+ * 
+ * @param {Number} $value - A value in px
+ */
 
-    /**
-     * Mixin bottom margin in final unit (defaults to em). The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used. With rem fallback if the final unit of output is rem.
-     * 
-     * @since 0.1
-     * 
-     * @param {Number} $value - A value in px
-     */
-
-    @mixin margin-bottom($value)
-    {
-        $sides: value-map($value, margin-bottom);
-        @include -unit-sides($sides, margin);
-    }
+@mixin margin-top($value) {
+    @include -unit-sides((top: $value), margin);
+}
+
+/**
+ * Mixin right margin in final unit (defaults to em). The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used. With rem fallback if the final unit of output is rem.
+ * 
+ * @since 0.1
+ * 
+ * @param {Number} $value - A value in px
+ */
+
+@mixin margin-right($value) {
+    @include -unit-sides((right: $value), margin);
+}
+
+/**
+ * Mixin bottom margin in final unit (defaults to em). The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used. With rem fallback if the final unit of output is rem.
+ * 
+ * @since 0.1
+ * 
+ * @param {Number} $value - A value in px
+ */
+
+@mixin margin-bottom($value) {
+    @include -unit-sides((bottom: $value), margin);
+}
+
+/**
+ * Mixin right margin in final unit (defaults to em). The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used. With rem fallback if the final unit of output is rem.
+ * 
+ * @since 0.1
+ * 
+ * @param {Number} $value - A value in px
+ */
+
+@mixin margin-left($value) {
+    @include -unit-sides((left: $value), margin);
+}
 
-    /**
-     * Mixin right margin in final unit (defaults to em). The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used. With rem fallback if the final unit of output is rem.
-     * 
-     * @since 0.1
-     * 
-     * @param {Number} $value - A value in px
-     */
-
-    @mixin margin-left($value)
-    {
-        $sides: value-map($value, margin-left);
-        @include -unit-sides($sides, margin);
-    }
 
 /**
  * Like [-sides](./#mixin--sides), but with rem fallback if the final unit is rem
@@ -261,45 +270,25 @@
  *
  * @param {Map} $sides - A spacing map in final values (top:0,right:0,bottom:0,left:0)
  * @param {String} $property - The property to apply the values to (padding, margin)
+ * @param {Number} $unit ($unit) - The final unit to which $target-px is converted, e.g. 1px, 1rem, 1em, 1%
  */
 
-@mixin -unit-sides($sides, $property: padding)
-{    
-    // Convert the values into the final unit of output
-    $unit-values: ();
-    $fallback-values: ();
-
-    $keys: map-keys($sides);
-    @each $side in $keys {
-
-        // Isolate the value
-        $value: nth(map-get($sides, $side), 1);
+@mixin -unit-sides($values, $property: padding, $unit: $unit) {
 
-        // Catch 0 values
-        @if strip-unit($value)==0 {
-            $value: 0px;
-        }
-        // Catch rhythm values
-        @if unitless($value) {
-            @if $side==top or $side==bottom {
-                $value: vrhythm($value);
-            }
-            @if $side==right or $side==left {
-                $value: hrhythm($value);
-            }
-        }
-
-        // Create new maps
-        @if unit($unit)==rem {
-            $fallback-values: map-merge($fallback-values, ($side: to-unit($value, $fallback-values)) );
-        }
-        $unit-values: map-merge($unit-values, ($side: to-unit($value)) )
+    // This mixin needs a value-map to work, so convert argument if it is not a value-map;
+    @if not(is-value-map($values, $keys-side)) {
+        $values: value-map(-sides($values), $keys-side);
     }
 
+    // now, Convert to units
+    $unit-values: ();
+    @each $key, $value in $values {
+        $unit-values: map-merge($unit-values, ($key: to-unit($value, $unit)));
+    }
 
     // Now, render the property and include rem fallback if needed
     @if unit($unit)==rem {
-        @include -sides($fallback-values, $property);
+        @include -sides($values, $property);
     }
     @include -sides($unit-values, $property);
 }
@@ -311,66 +300,69 @@
  * @access private
  * 
  * @since 0.1
+ *
+ * @throws 'Argument $map needs to be a value map of four side (top, right, bottom, left) values. Mixin -sides aborted.';
  * 
  * @param {Map} $sides - A spacing map in final values (top:0,right:0,bottom:0,left:0)
  * @param {String} $property - The property to apply the values to (padding, margin)
  */
 
-@mixin -sides($sides, $property: padding)
-{
-    // Initialize some variables
-    $top: '';
-    $right: '';
-    $bottom: '';
-    $left: '';
-
-    @if map-has-key($sides, top) {
-        $top: map-get($sides, top);
-        $top: if(abs($top)==0, 0, $top);
-    }
+@mixin -sides($values, $property: padding) {
 
-    @if map-has-key($sides, right) {
-        $right: map-get($sides, right);
-        $right: if(abs($right)==0, 0, $right);
-    }
+    @if not(is-value-map($values, $keys-side)) {
+        @warn 'Argument $map needs to be a value map of four side (top, right, bottom, left) values. Mixin -sides aborted.';
+    } @else {
 
-    @if map-has-key($sides, bottom) {
-        $bottom: map-get($sides, bottom);
-        $bottom: if(abs($bottom)==0, 0, $bottom);
-    }
-
-    @if map-has-key($sides, left) {
-        $left: map-get($sides, left);
-        $left: if(abs($left)==0, 0, $left);
-    }
+        // Initialize some variables
+        $top: null;
+        $right: null;
+        $bottom: null;
+        $left: null;
 
-    @if length($sides)==4 {
+        @if map-has-key($values, top) {
+            $top: map-get($values, top);
+        }
 
-        @if ($top==$bottom and $right==$left and $top==$right) {
-            #{$property}: #{$top};
+        @if map-has-key($values, right) {
+            $right: map-get($values, right);
         }
-        @elseif ($top==$bottom and $right==$left) {
-            #{$property}: #{$top} #{$right};
+
+        @if map-has-key($values, bottom) {
+            $bottom: map-get($values, bottom);
         }
-        @else {
-            #{$property}: #{$top} #{$right} #{$bottom} #{$left};
+
+        @if map-has-key($values, left) {
+            $left: map-get($values, left);
         }
 
-    }
-    @else {
+        @if length($values)==4 {
+
+            @if ($top==$bottom and $right==$left and $top==$right) {
+                #{$property}: #{$top};
+            }
+            @elseif ($top==$bottom and $right==$left) {
+                #{$property}: #{$top} #{$right};
+            }
+            @else {
+                #{$property}: #{$top} #{$right} #{$bottom} #{$left};
+            }
 
-        @if $top {
-            #{$property}-top: #{$top};
-        }
-        @if $right {
-            #{$property}-right: #{$right};
-        }
-        @if $bottom {
-            #{$property}-bottom: #{$bottom};
-        }
-        @if $left {
-            #{$property}-left: #{$left};
         }
+        @else {
 
+            @if $top {
+                #{$property}-top: #{$top};
+            }
+            @if $right {
+                #{$property}-right: #{$right};
+            }
+            @if $bottom {
+                #{$property}-bottom: #{$bottom};
+            }
+            @if $left {
+                #{$property}-left: #{$left};
+            }
+
+        }
     }
 }

data/sass/piecss/utilities/typography.scss

@@ -106,28 +106,25 @@
 
 
 /**
- * Find the optimal line-height for a given font-size.
- * If the specified span is too small for the font-size, find the next best one based on the specified increment.
+ * Convert a px value to a new unit, within the context of it's containing element
  *
  * @since 0.1
  *
- * @param {Number} $font-size - the font-size in px
- * @param {Number} $span (1) - the desired line-height in rhythm-units, 1 equals 1 $rhythm
- * @param {Number} $increment (1) - the increment in rhythm-units
+ * @param {Number} $target-px - the line-height in px
+ * @param {Number} $context ($default-font-size) - The context of the targeted element, for calculations to em
+ * @param {Number} $unit ($line-height-unit) - The final unit to which $target-px is converted, e.g. 1px, 1rem, 1em, 1% or 1 for unitless
  *
  * @return {Number} - line-height in px
  */
 
-@function line-height($font-size: $default-font-size, $span: 1, $increment: 1)
+@function line-height($target-px, $context: $default-font-size, $unit: $line-height-unit)
 {
-    $line-height: $span * $rhythm;
 
-    @if $font-size >= $line-height {
-        // call line-height again, but increase span with increment
-        @return line-height($font-size, $span + $increment, $increment);
+    @if unitless($unit) {
+        @return strip-unit($target-px/$context);
+    } @else  {
+        @return to-unit($target-px, $unit, $context);
     }
-
-    @return $line-height;
 }
 
 
@@ -177,6 +174,9 @@
  * @param {Number} $line-height ($default-line-height) - line-height in the final unit of output
  */
 
+
+   // font: font-style font-variant font-weight font-size/line-height font-family;
+
 @mixin font($type, $font-size:$default-font-size, $line-height:$default-line-height)
 {
     @if unit($unit)==rem {
@@ -266,30 +266,25 @@
 @mixin font-size($target-px, $unit: $unit, $context: $default-font-size)
 {
     @if unit($unit) == rem {
-        font-size: $target-px;
+        font-size: to-unit($target-px, $rem-fallback-unit, $context);
     }
     font-size: to-unit($target-px, $unit, $context);
 }
 
 /**
- * Takes the font-size as an argument and calculates the best possible line-height for it.
- * If the $line-height-unit equals to 1%, it is used to calculate the line-height instead.
- * More info: [$default-font-size](./#variable-default-font-size), [$line-height-unit](./#variable-line-height-unit)
+ * Mixin for line-height, automatically converts the value to a new unit, within the context of it's containing element
  *
  * @since 0.1
  *
- * @param {Number} $span - The number of rhythm-units - whole or fraction - to span
- * @param {Value} $context ($default-font-size) - The font-size context
- * @param {Number} $unit ($line-height-unit) - The final unit to which $target-px is converted, e.g.px | rem | em | %
+ * @param {Number} $target-px - the line-height in px
+ * @param {Number} $context ($default-font-size) - The context of the targeted element, for calculations to em
+ * @param {Number} $unit ($line-height-unit) - The final unit to which $target-px is converted, e.g. 1px, 1rem, 1em, 1% or 1 for unitless
  */
 
-@mixin line-height($span, $context: $default-font-size, $line-height-unit: $line-height-unit)
+@mixin line-height($target-px, $context: $default-font-size, $unit: $line-height-unit)
 {
-
-    @if unit($line-height-unit) == "%" {
-        line-height: $span * $default-line-height / $context * 100%;
-    }
-    @else {
-        @include vrhythm($span, 'line-height', $context);
-    }
+    @if unit($unit)==rem {
+        line-height: line-height($target-px, $context, $unit: $rem-fallback-unit);
+    }    
+    line-height: line-height($target-px, $context, $unit);
 }