piecss 0.1.6 → 0.1.6.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c1e0a3828cd09d8b40eefb4cddad8be412b53d2a
-  data.tar.gz: cbbf4c52754dfcfe3bd92a2287630a2e15ee9653
+  metadata.gz: 1344c40bbaf258d5fcc0b991fbe2bd3307b300d6
+  data.tar.gz: cf60c8b0b54458900350507792eb64c996bd7368
 SHA512:
-  metadata.gz: fec98fd4f102c60dc970e599a780a4b8c1830612c2d615a662bad78f4920f19daaaa17cf15a11090ed3fb29434fc357e5a623f6b6382c3bcbc31ec895f12d1de
-  data.tar.gz: dc9bed508685aacf894354bcb54e124724275ed2c28fd2d6c899a380dd90a75e1ece729a9e575aa473af2245061fb0151d748e1919dc5df36e1d5dc950bc73a5
+  metadata.gz: d7696c62cfbe406c4e19b4833779807ca5fde6e301769fc73d7bcb730c06367d683134dad0e04f68a79524535574dea789803a14523e0c47df3608e1f2985797
+  data.tar.gz: ef2a1e52dfe99c0f0316a18e874b6269794fd4ce95225a5e3651fb514727cf3e6158faa565cf8974f7467934cf5a8d41acad7c2dab2d315f368121a9f503cfd2

data/sass/piecss/behavior/base/normalize.scss

@@ -32,7 +32,7 @@ html {
   $font-family: extract-type-family($default-font);
 
   $font-size: to-unit($default-font-size, 1%, $base-font-size);
-  $line-height: to-unit($default-line-height, 1%, $base-font-size);
+  $line-height: line-height($default-line-height, $base-font-size, $line-height-unit);
 
   font: #{$font-style} #{$font-variant} #{$font-weight} #{$font-size}/#{$line-height} #{$font-family};
 

data/sass/piecss/behavior/grid/rhythm.scss

@@ -18,37 +18,4 @@ Debug helpers
     body {
         @extend %debug;         
     }
-}
-
-%rhythm-padding {
-    @include vrhythm(1, padding-top);
-    @include vrhythm(1, padding-bottom);
-    &--top {
-        @include vrhythm(1, padding-top);
-    }
-    &--bottom {
-        @include vrhythm(1, padding-bottom);
-    }
-}
-
-%rhythm-margin {
-    @include vrhythm(0, margin-top);
-    @include vrhythm(1, margin-bottom);
-    &--top {
-        @include vrhythm(1, margin-top);
-    }
-    &--bottom {
-        @include vrhythm(1, margin-bottom);
-    }
-}
-
-$single-direction-selector: '';
-@if length($single-direction-elements) > 0 and $single-direction-elements != '' {
-    @each $element in $single-direction-elements {
-        // This leaves the last element with a comma, but the compiler will strip that out anyway so leave for now and revisit later
-        $single-direction-selector: $single-direction-selector + $element + ',' !global;
-    }
-    #{$single-direction-selector} {
-        @extend %rhythm-margin;
-    }
 }

data/sass/piecss/settings/constants.scss

@@ -3,6 +3,12 @@
 
 $browser-default-font-size: 16px;
 
+$keys-side: top right bottom left;
+$keys-padding: $keys-side;
+$keys-margin: $keys-side;
+$keys-border: width style color;
+$keys-corner: top-left top-right right-bottom left-bottom;
+
 
 $aliceblue: #f0f8ff;
 $antiquewhite: #faebd7;

data/sass/piecss/settings/form.scss

@@ -233,7 +233,7 @@ $form-elements: ();
  * @type {Number}
  */
 
-$field-padding-top: vrhythm(.25) !default;
+$field-padding-top: rhythm(.25) !default;
 
 /**
  * Field right-padding.
@@ -253,7 +253,7 @@ $field-padding-right: .5em !default;
  * @type {Number}
  */
 
-$field-padding-bottom: vrhythm(.25) !default;
+$field-padding-bottom: rhythm(.25) !default;
 
 /**
  * Field left-padding.
@@ -353,7 +353,7 @@ $field-width: 100% !default;
  * @type {Number}
  */
 
-$field-height: $default-line-height + 2*$field-border-width + $field-padding-top + $field-padding-bottom !default;
+$field-height: $default-line-height + 2 * $field-border-width + $field-padding-top + $field-padding-bottom !default;
 
 /**
  * Field line-height, relevant for text-area.
@@ -619,7 +619,7 @@ $textarea-height: auto !default;
  * @type {Number | String}
  */
 
-$textarea-height-medium: vrhythm(5) - 2*$field-border-width !default;
+$textarea-height-medium: rhythm(5) - 2*$field-border-width !default;
 
 /**
  * Alternate height of textarea element, large.
@@ -629,7 +629,7 @@ $textarea-height-medium: vrhythm(5) - 2*$field-border-width !default;
  * @type {Number | String}
  */
 
-$textarea-height-large: vrhythm(10) - 2*$field-border-width !default;
+$textarea-height-large: rhythm(10) - 2*$field-border-width !default;
 
 $form-elements: add-properties(
     (

data/sass/piecss/utilities/layout.scss

@@ -63,6 +63,10 @@
 
 @function fraction-to-text($fraction)
 {
+    @if type-of($fraction)==string {
+        @warn "The function fraction-to-text only accepts unquoted fractions (1/2 and not \"1/2\")";
+    }
+
     @if $fraction ==  1/1  { @return "full"; }
     @if $fraction ==  1/2  { @return "half"; }
     @if $fraction ==  1/3  { @return "third"; }
@@ -145,7 +149,7 @@
     @if $fraction == 13/16 { @return "thirteen-sixteenth"; }
     @if $fraction == 15/16 { @return "sixteen-sixteenth"; }
 
-    @return false;
+    @return "full";
 }
 
 
@@ -244,18 +248,18 @@
 
     @if ($use-margin) {
         @if $left != false {
-            margin-left: hrhythm($left);
+            margin-left: rhythm($left);
         }
         @if $right != false {
-            margin-right: hrhythm($right);
+            margin-right: rhythm($right);
         }
     }
     @else {
         @if $left != false {
-            padding-left: hrhythm($left);
+            padding-left: rhythm($left);
         }
         @if $right != false {
-            padding-right: hrhythm($right);
+            padding-right: rhythm($right);
         }
     }
 }

data/sass/piecss/utilities/miscellaneous.scss

@@ -37,7 +37,7 @@
  * Converts a list of property values to a property map. Use to convert 'old-style' associative arrays to SASS's new Map type.
  * 
  * @example
- *  @include list-to-map(color #FFF, text-align left)
+ * list-to-map((color #FFF, text-align left))
  *  // Output:
  *  (color: #FFF, text-align: left)
  *
@@ -63,26 +63,42 @@
 
 
 /**
- * Conditional mixin of property
+ * Mixin for border properties
  * 
  * @since 0.1
- * @deprecated
  *
- * @param {String} $property - A CSS property
- * @param {Bool | *} $value - A value for the property, or false if the property should not be rendered.
+ * @param {String | Map | List | Numner} $values - The border (or outline) properties
+ * @param {Bool} $outline - If true, will render the values as outline properties
  */
 
-@mixin property($property, $value)
+@mixin border($values, $outline: false)
 {
-    @if to-bool($value) {
-        #{$property}: $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-border)) {
+        $values: value-map($values, $keys-border);
+    }
+
+    $property: if($outline, outline, border);
+
+    // Rem fallback
+    $width: map-get($values, width);
+    @if type-of($width)==number and unit($width)==rem {
+        #{$property}-width: to-px($width);
+    }
+
+    @if map-has-key($values, width) and map-has-key($values, style) and map-has-key($values, color) {
+        #{$property}: map-get($values, width) map-get($values, style) map-get($values, color);
+    }
+    @else {
+        @each $key, $value in $values {
+            #{$property}-#{$key}: $value;
+        }
     }
+
 }
 
 /**
- * 
  * @alias border
- * Mixin for outline properties.
  */
 
 @mixin outline($attributes)
@@ -90,54 +106,40 @@
     @include border($attributes, true);
 }
 
+
 /**
- * Mixin for border properties
+ * Provides a cross-browser method to implement opacity. This replaces [Compass's](http://compass-style.org/reference/compass/css3/opacity/) mixin by the same name with a more accessible implementation.
  * 
  * @since 0.1
  *
- * @todo Provide examples
- *
- * @param {String | Map | List | Numner} $values - The border (or outline) properties
- * @param {Bool} $outline - If true, will render the values as outline properties
+ * @param {Number} $opacity - A number between 0 and 1, where 0 is transparent and 1 is opaque.
  */
 
-@mixin border($values, $outline: false)
-{
-    $property: if($outline, outline, border);
-
-    @if type-of($values)=="list" {
-        $map: ();
-        @each $value in $values {
-            @if type-of($value)==number {
-                $map: append($map, width, space);
-            }
-            @else if type-of($value)==color {
-                $map: append($map, color, space);
-            }
-            @elseif type-of($value)==string {
-                $map: append($map, style, space);
-            }
-        }
-        @include border( list-to-map( zip($map, $values) ), $outline);
-    }
-    @elseif type-of($values)=="string" {
-        #{$property}: $values;
+@mixin opacity($opacity) {
+    @include old-ie() {
+        filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
     }
-    @elseif type-of($values)=="map" {
+    opacity: $opacity;
+}
 
-        @if map-has-key($values, width) and map-has-key($values, style) and map-has-key($values, color) {
-            #{$property}: map-get($values, width) map-get($values, style) map-get($values, color);
-        }
-        @else {
-            $keys: map-keys($values);
-            @each $key in $keys {
-                #{$property}-#{$key}: map-get($values, $key);
-            }
-        }
+
+/**
+ * Conditional mixin of property
+ * 
+ * @since 0.1
+ * @deprecated
+ *
+ * @param {String} $property - A CSS property
+ * @param {Bool | *} $value - A value for the property, or false if the property should not be rendered.
+ */
+
+@mixin property($property, $value)
+{
+    @if to-bool($value) {
+        $property: $value;
     }
 }
 
-
 /**
  * Support for old-mozilla, cuse it to separate old-ie declarations from your other declarations with either a separate stylesheet or added specificity (Modernizr). 
  * 
@@ -200,20 +202,6 @@
         vertical-align: #{$vertical-alignment};
     }
 }
-/**
- * Provides a cross-browser method to implement opacity. This replaces [Compass's](http://compass-style.org/reference/compass/css3/opacity/) mixin by the same name with a more accessible implementation.
- * 
- * @since 0.1
- *
- * @param {Number} $opacity - A number between 0 and 1, where 0 is transparent and 1 is opaque.
- */
-
-@mixin opacity($opacity) {
-    @include old-ie() {
-        filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
-    }
-    opacity: $opacity;
-}
 
 /**
  * Accepts a string which a valid appearance

data/sass/piecss/utilities/rhythm.scss

@@ -3,12 +3,8 @@
 
 // Content:
 // 1. Functions
-//    1a. Vertical Rhythm:
-//        vrhythm
-//        vrhythm-units
-//    1b. Horizontal Rhythm
-//        hrhythm
-//        vrhythm-units
+//    -rhythm-units
+//    rhythm
 // 2. Mixins
 //    2a. Vertical Rhythm:
 //        vrhythm
@@ -24,127 +20,92 @@
  * Calculates a value based on the [$rhythm](./#variable-rhythm).
  * 
  * @since 0.1
+ * @access private
  *
- * @param {Int | Fraction} $span (1) - The number of rhythm-units (whole or fraction) to span
+ * @param {Int | Fraction} $units (1) - The number of -rhythm-units (whole or fraction) to span
  *
  * @return {Number} - The calculated span in px
  */
 
-@function vrhythm($span: 1)
+@function -rhythm-units($units: 1)
 {
-    @return $rhythm * $span;
+    @return abs($rhythm * $units);
 }
 
 
 /**
- * Find the optimal rhythm units for a given font-size.
- * If the specified span is too small for the font-size, find the next best one 
+ * Find the optimal rhythm units for a given size in px.
+ * If the specified span is too small for the size, find the next best one 
  * based on a specified increment.
  *
  * @since 0.1
  * 
- * @param {Number} $font-size (16px) - The font-size in px
- * @param {Number} (1) $span - The number of rhythm units to span, 1 equals 1 $rhythm
- * @param {Number} (1) $increment - The increment in rhythm-units
+ * @param {Number} $units - The number of rhythm units to span (whole or fraction), 1 equals 1 $rhythm
+ * @param {Number} $size-px - The size in px
+ * @param {Number} $increment - The increment in rhythm-units (whole or fraction)
  *
  * @return {Number} - The calculated span in px
  */
 
-@function vrhythm-units($font-size: $default-font-size, $span: 1, $increment: 1)
+@function rhythm($args...)
 {
-    $line-height: $span * $rhythm;
-
-    @if $font-size >= $line-height {
-        // call line-height again, but increase span with increment
-        @return vrhythm-units($font-size, $span + $increment, $increment);
+    $units: false;
+    $size-px: false;
+    $increment: false;
+
+    @each $var in $args {
+        @if unitless($var) and not($units) {
+            $units: $var;
+        } @elseif unitless($var) and not($increment) {
+            $increment: $var;
+        } @elseif not(unitless($var)) and unit($var)==px {
+            $size-px: $var;
+        }
     }
 
-    @return $span;
-}
-
-
-/**
- * Calculates a value based on the [$gutter-width](./#variable-gutter-width) as declared in the Layout settings
- *
- * @example
- *  padding: hrhythm(.5);
- *  padding: to-unit( hrhythm(.5) );
- *  // Output:
- *  padding: 8px;
- *  padding: .5em;
- *
- * @since 0.1
- * 
- * @param {Number} $fraction (1/2) - A fraction, e.g. 1/2
- * @param {Value} $context (16px) - The font-size context, defaults to [$default-font-size](./#variable-default-font-size).
- *
- * @return {Number} - The calculated span in px
- */
+    @if not($units) {
+        $units: 1;
+    }
+    @if not($increment) {
+        $increment: 1;
+    }
 
-@function hrhythm($fraction: 1/2, $context: $default-font-size)
-{
-    // Cannot multiply with 0
-    @if $fraction == 0 {
-        @return $fraction;
+    @if $size-px {
+        @while $size-px >= -rhythm-units($units) {
+            $units: $units + $increment;
+        }
     }
 
-    @return $fraction * $gutter-width;
+    $span: -rhythm-units($units);
+
+    @return $span;
 }
 
 
 // 2. MIXINS
 
-
-/**
- * Use for top and bottom margins and paddings.
- *
- * @example
- *  @include vrhythm(1, padding-top);
- *
- * @since 0.1
- *
- * @param {Number} $span - The number of rhythm-units - whole or fraction - to span
- * @param {String} $property - The property to be set, e.g. padding, margin-top
- * @param {Value} $context (16px) - The font-size context
- */
-
-@mixin vrhythm($span, $property, $context: $default-font-size) 
-{
-    @if strip-unit($span)==0 {
-        #{$property}: 0;
-    }
-    @else {
-        @if unit($unit)==rem {
-            #{$property}: $span*$default-line-height;
-        }
-        #{$property}: vrhythm($span);
-    }
-    
-}
-
-
 /**
  * Use for left and right margins and paddings. Uses  [$gutter-width](./#variable-gutter-width) declared in grid settings
  *
  * @example
- *  @include hrhythm(1, padding-left);
+ *  @include rhythm(1, padding-left);
  * 
  * @since 0.1
  *
- * @param {Number} $fraction - The fraction of the gutter measurement
+ * @param {Number} $units - The fraction of the gutter measurement
  * @param {String} $property - The property to be set, e.g. padding, margin-left
  * @param {Number} $context (16px) - The font-size context
  */
 
-@mixin hrhythm($fraction, $property, $context: $default-font-size) 
+@mixin rhythm($units, $property, $context: $default-font-size) 
 {
-    @if strip-unit($span)==0 {
-        #{$property}: 0;
-    }
-    @if unit($unit)==rem {
-        #{$property}: $fraction*$gutter-width;
-    }
-    #{$property}: hrhythm($fraction, $context);
+    // @if strip-unit($units)==0 {
+    //     #{$property}: 0;
+    // }
+    // @if unit($unit)==rem {
+    //     #{$property}: $units*$gutter-width;
+    // }
+    // #{$property}: rhythm($units, $context);
 }