piecss 0.1.6 → 0.1.6.1

data/sass/piecss/utilities/units.scss

@@ -6,8 +6,6 @@
 //    strip-unit
 //    to-unit
 //    to-px
-// 2. Mixins:
-//    rem
 
 
 // 1. FUNCTIONS
@@ -23,11 +21,7 @@
  * @return {Number} - The value stripped of its unit
  */
 
-@function strip-unit($value)
-{
-    @if $value==0 {
-        @return $value;
-    }
+@function strip-unit($value) {
     @return $value / ($value * 0 + 1);
 }
 
@@ -37,34 +31,47 @@
  *
  * @since 0.1
  *
+ * @throws Argument $number needs to be a number.
+ *
  * @param {Number} $target-px - The final size in px
- * @param {Number} $unit ($unit) - The final unit to which $target-px is converted, e.g. px, rem, em, %
+ * @param {Number} $unit ($unit) - The final unit to which $target-px is converted, e.g. 1px, 1rem, 1em, 1%
  * @param {Number} $context ($default-font-size) - The context of the targeted element, for calculations to em
  *
  * @return {Number} - The value in the requested unit
  */
 
-@function to-unit($value, $unit: $unit, $context: $default-font-size)
-{
-    @if unit($value) != px {
-        /* Convert the value to px first */
-        $value: to-px($value);
+@function to-unit($number, $unit: $unit, $context: $default-font-size) {
+    @if not(type-of($number)==number) {
+        @warn 'Argument $number needs to be a number.';
+        @return $number;
     }
 
-    @if unit($unit)=="%" {
-        $value: percentage($value / $context);
+    @if strip-unit($number)==0 {
+        @return strip-unit($number);
     }
-    @elseif unit($unit)=="px" {
-        $value: $value;
+
+    @if unitless($number) and not($number==0) {
+        /* We're dealing with a rhythm number, convert to px */
+        $number: -rhythm-units($number);
+    }
+
+    @if unit($number) != px {
+        /* Convert the value to px first */
+        $number: to-px($number);
     }
-    @else {
-        $value: $value / $context * $unit;
+
+    @if unit($unit)=='px' {
+    } @elseif unit($unit)=='%' {
+        $number: percentage($number / $context);
+    } @elseif unit($unit)=='rem' {
+        $number: $number / $default-font-size * $unit;
+    } @else {
+        $number: $number / $context * $unit;
     }
 
-    @return $value;
+    @return $number;
 }
 
-
 /**
  * Convert any unit to a px value, within the context of it's containing element
  *
@@ -76,18 +83,13 @@
  * @return {Number} - The value in px
  */
 
-@function to-px($value, $context: $default-font-size)
-{
-    @if unit($value)=="px" {
-        @debug $value;
-    }
-    @elseif unit($value)=="rem" {
+@function to-px($value, $context: $default-font-size) {
+    @if unit($value)=='px' {
+    } @elseif unit($value)=='rem' {
         $value: rem-to-px($value);
-    }
-    @elseif unit($value)=="em" {
+    } @elseif unit($value)=='em' {
         $value: em-to-px($value, $context);
-    }
-    @elseif unit($value)=="%" {
+    } @elseif unit($value)=='%' {
         $value: percentage-to-px($value);
     }
 
@@ -105,8 +107,7 @@
  * @return {Number} - The value in px
  */
 
-@function rem-to-px($value)
-{
+@function rem-to-px($value) {
     @return $default-font-size * strip-unit($value);
 }
 
@@ -121,8 +122,7 @@
  * @return {Number} - The value in px
  */
 
-@function em-to-px($value, $context: $default-font-size)
-{
+@function em-to-px($value, $context: $default-font-size) {
     @return $context * strip-unit($value);
 }
 
@@ -139,28 +139,6 @@
  * @return {Number} - The value in px
  */
 
-@function percentage-to-px($value, $context: $default-font-size1)
-{
-    @return $value/10% + 0px;
+@function percentage-to-px($value, $context: $default-font-size) {
+    @return $value/100% * $context;
 }
-
-
-// 2. MIXINS
-
-
-/**
- * Mixin a property in rem and the fallback in another unit
- *
- * @since 0.1
- *
- * @param {Number} $target-px - The targeted size in px
- * @param {String} $property - The property-name
- * @param {Number} $unit ($rem-fallback-unit) - The fallback unit to use
- * @param {Number} $context-px ($default-font-size) - The context of the targeted element
- */
-
-@mixin rem($target-px, $property, $unit: $rem-fallback-unit, $context: $default-font-size)
-{
-    #{$property}: to-unit($target-px, $context, $rem-fallback-unit);
-    #{$property}: to-unit($target-px, $default-font-size, 1rem);
-}

data/sass/piecss/utilities.scss

@@ -14,3 +14,4 @@
 @import "utilities/image";
 @import "utilities/list";
 @import "utilities/miscellaneous";
+

data/templates/project/screen.scss

@@ -89,8 +89,8 @@ $debug-rhythm: false;
 // Or, import individually:
 
 /*
-@import "../../sass/base";
-@import "../../sass/grid";
-@import "../../sass/form";
-@import "../../sass/list";
+@import "piecss/behavior/base";
+@import "piecss/behavior/grid";
+@import "piecss/behavior/form";
+@import "piecss/behavior/list";
 */

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: piecss
 version: !ruby/object:Gem::Version
-  version: 0.1.6
+  version: 0.1.6.1
 platform: ruby
 authors:
 - Babs Gosgens
@@ -126,7 +126,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.2.2
+rubygems_version: 2.4.1
 signing_key: 
 specification_version: 4
 summary: A collection of tools for building responsive websites.