piecss 0.1.0.alpha.01

data/sass/piecss/utilities/sides.scss

@@ -0,0 +1,376 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// Content
+// 1. Functions
+//    value-map
+// 2. Mixins
+//    padding
+//    padding-top
+//    padding-right
+//    padding-bottom
+//    padding-left
+//    margin
+//    margin-top
+//    margin-right
+//    margin-bottom
+//    margin-left
+//    -unit-sides
+//    -sides
+
+
+// 1. FUNCTIONS
+
+
+/**
+ * Takes a list of values 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 {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);
+
+    @if is-value-map($sides) {
+        @return $sides;
+    }
+
+    // Create map to hold our spacing values;
+    $spacing: ();
+
+    @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));
+        }
+    }
+
+    @elseif str-index($property, top) {
+        $spacing: (top: $sides);
+    }
+
+    @elseif str-index($property, right) {
+        $spacing: (right: $sides);
+    }
+
+    @elseif str-index($property, bottom) {
+        $spacing: (bottom: $sides);
+    }
+
+    @elseif str-index($property, left) {
+        $spacing: (left: $sides);
+    }
+
+    @return $spacing;
+}
+
+/**
+ * Checks if a Map is a proper value-map (side:value).
+ *
+ * @since 0.1
+ *
+ * @param {Map} - A value map
+ *
+ * @return {Bool}
+ */
+
+@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;
+    }
+    @elseif map-has-key($values, left)==true {
+        $is-map: true;
+    }
+
+    @return $is-map;
+}
+
+
+// 2. MIXINS
+
+
+/**
+ * Mixin padding for any or all sides, 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 {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 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 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 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 margin for any or all sides, 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 {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 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 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 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
+ *
+ * @access private
+ *
+ * @since 0.1
+ *
+ * @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 -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);
+
+        // 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)) )
+    }
+
+
+    // Now, render the property and include rem fallback if needed
+    @if unit($unit)==rem {
+        @include -sides($fallback-values, $property);
+    }
+    @include -sides($unit-values, $property);
+}
+
+
+/**
+ * Mixin the value for any or all sides for padding or margin. The mixin will determine if the shorthand notation, or a single side (...-top, ...-right, ...-bottom, --left) should be used.
+ * 
+ * @access private
+ * 
+ * @since 0.1
+ * 
+ * @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);
+    }
+
+    @if map-has-key($sides, right) {
+        $right: map-get($sides, right);
+        $right: if(abs($right)==0, 0, $right);
+    }
+
+    @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);
+    }
+
+    @if length($sides)==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};
+        }
+
+    }
+    @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

@@ -0,0 +1,295 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// Content
+// 1. functions:
+//    extract-type-style
+//    extract-type-variant
+//    extract-type-weight
+//    extract-type-family
+//    font-size
+//    line-height
+//    weight-number-to-string
+// 2. mixins:
+//    font
+//    font-style
+//    font-variant
+//    font-weight
+//    font-family
+//    font-size
+//    line-height
+
+
+// 1. FUNCTIONS
+
+
+/**
+ * Extract the style property from a type array
+ *
+ * @since 0.1
+ *
+ * @todo parameter should either be a space separated list, or property map
+ *
+ * @param {List} $type: a valid type list ($style, $variant, $weight, $family)
+ *
+ * @return {String} - font-type property
+ */
+
+@function extract-type-style($type) {
+    @return nth($type, 1);
+}
+
+
+/**
+ * Extract the variant property from a type array
+ *
+ * @since 0.1
+ *
+ * @todo parameter should either be a space separated list, or property map
+ *
+ * @param {List} $type: a valid type list ($style, $variant, $weight, $family)
+ *
+ * @return {String} - font-variant property
+ */
+
+@function extract-type-variant($type)
+{
+    @return nth($type, 2);
+}
+
+
+/**
+ * Extract the weight property from a type array
+ *
+ * @since 0.1
+ *
+ * @todo parameter should either be a space separated list, or property map
+ *
+ * @param {List} $type: a valid type list ($style, $variant, $weight, $family)
+ *
+ * @return {String} - font-weight property
+ */
+
+@function extract-type-weight($type)
+{
+    @return nth($type, 3);
+}
+
+
+/**
+ * Extract the family property from a type array
+ *
+ * @since 0.1
+ *
+ * @todo parameter should either be a space separated list, or property map
+ *
+ * @param {List} $type: a valid type list ($style, $variant, $weight, $family)
+ *
+ * @return {String} - font-family property
+ */
+
+@function extract-type-family($type)
+{
+    @return nth($type, 4);
+}
+
+
+/**
+ * @alias to-unit
+ * @deprecated
+ */
+
+@function font-size($target-px, $unit: $unit, $context: $default-font-size)
+{
+    @return to-unit($target-px, $unit, $context);
+}
+
+
+/**
+ * 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.
+ *
+ * @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
+ *
+ * @return {Number} - line-height in px
+ */
+
+@function line-height($font-size: $default-font-size, $span: 1, $increment: 1)
+{
+    $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);
+    }
+
+    @return $line-height;
+}
+
+
+/**
+ * Returns the correct typographic weight corresponding to the weight number
+ *
+ * @since 0.1
+ *
+ * @throws Not a valid weight
+ *
+ * @param {Number} $weight (400) - a valid weight number: 100 | ... | 900
+ *
+ * @return {String} - weight, defaults to 'regular'
+ */
+
+@function weight-number-to-string($weight: regular)
+{
+    @if $weight == 100 { @return "ultra-light"; }
+    @if $weight == 200 { @return "light"; }
+    @if $weight == 300 { @return "book"; }
+    @if $weight == 400 { @return "regular"; }
+    @if $weight == 500 { @return "medium"; }
+    @if $weight == 600 { @return "semi-bold"; }
+    @if $weight == 700 { @return "bold"; }
+    @if $weight == 800 { @return "extra-bold"; }
+    @if $weight == 900 { @return "heavy"; }
+    @else {
+        @warn "Not a valid weight";
+        @return false;
+    }
+}
+
+
+// 2. MIXINS
+
+
+/**
+ * Mixes in the shorthand font tag. This is the only mixin that takes the font-size and line-height in their final unit of output.
+ * More info: [$default-font-size](./#variable-default-font-size), [$default-line-height](./#variable-default-line-height)
+ *
+ * @since 0.1
+ *
+ * @todo Accept properties in the same way as the default CSS font implementation
+ * 
+ * @param {List | Bool} $type - a valid type array ($style, $variant, $weight, $family) or false to only output font-size and line-height
+ * @param {Number} $font-size ($default-font-size) - font-size in the final unit of output
+ * @param {Number} $line-height ($default-line-height) - line-height in the final unit of output
+ */
+
+@mixin font($type, $font-size:$default-font-size, $line-height:$default-line-height)
+{
+    @if unit($unit)==rem {
+        @include font-size($font-size, 1px);
+    }
+
+    @if $type {
+        $font-style     :   extract-type-style($type);
+        $font-variant   :   extract-type-variant($type);
+        $font-weight    :   extract-type-weight($type);
+        $font-family    :   extract-type-family($type);
+
+        font: #{$font-style} #{$font-variant} #{$font-weight} #{$font-size}/#{$line-height} #{$font-family};
+    }
+    @else {
+        font: #{$font-size}/#{$line-height};
+    }
+}
+
+
+/**
+ * Extracts the style from a type array and mixes in font-style
+ *
+ * @since 0.1
+ *
+ * @param {List} $type: a valid type list ($style, $variant, $weight, $family)
+ */
+
+@mixin font-style($type)
+{
+    font-style: extract-type-style($type);
+}
+
+
+/**
+ * Extracts the variant from a type array and mixes in font-variant
+ *
+ * @since 0.1
+ *
+ * @param {List} $type: a valid type list ($style, $variant, $weight, $family)
+ */
+
+@mixin font-variant($type)
+{
+    font-variant: extract-type-variant($type);
+}
+
+
+/**
+ * Extracts the weight from a type array and mixes in font-weight
+ *
+ * @since 0.1
+ *
+ * @param {List} $type: a valid type list ($style, $variant, $weight, $family)
+ */
+
+@mixin font-weight($type)
+{
+    font-weight: extract-type-weight($type);
+}
+
+
+/**
+ * Extracts the family from a type array and mixes in font-family
+ *
+ * @since 0.1
+ *
+ * @param {List} $type: a valid type list ($style, $variant, $weight, $family)
+ */
+
+@mixin font-family($type)
+{
+    font-family: extract-type-family($type);
+}
+
+
+/**
+ * Takes a size in px and calculates it back to the final font-unit. Provides fallback if the final output is in rem.
+ *
+ * @since 0.1
+ *
+ * @param {Number} $target-px - The font-size in px
+ * @param {Number} $unit ($unit) - The final unit to which $target-px is converted, e.g.px | rem | em | %
+ * @param {Number} $context ($default-font-size) - The context of the targeted element, for calculations to em or %
+ */
+
+@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, $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)
+ *
+ * @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 | %
+ */
+
+@mixin line-height($span, $context: $default-font-size, $line-height-unit: $line-height-unit)
+{
+
+    @if unit($line-height-unit) == "%" {
+        line-height: $span * $default-line-height / $context * 100%;
+    }
+    @else {
+        @include vrhythm($span, 'line-height', $context);
+    }
+}