typey 1.0.0.beta.2 → 1.0.0.beta.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9dcc04d16cfb798142ac6db19f845d936d9f962f
-  data.tar.gz: cb5e434d8e4addc5e6aeab29ff23ce69f6d70ca3
+  metadata.gz: 3c34a6c9a1229a5c6480eda7888c845b2d1e0d87
+  data.tar.gz: 3f1739d241e3b08ce58012fc3df38d543686be51
 SHA512:
-  metadata.gz: 205b4e9089a69f10c04579acceda1bae7cfe2c04bbf229a1a86e787d7e265f607e98f7bd172fcaec435ebee6b0e48de364d1618d9f680a9122b0796b375ebc13
-  data.tar.gz: 2937370f717f1c4594781f32a383beb9871b9e3687e25b51a5387991e3825dc8835782c12b216b26c6c8c07e68b9b95a697fbb5f0502fa65c2e0d417727ecd31
+  metadata.gz: 7c63e99105893f1bcd7f745d0fb5993e82447eb9236aa29e210b4631791b465229b6cdb8d4c3f1ef462c092bcabfab7f94b73c91476799af458898a41065a156
+  data.tar.gz: 38058da73fcf796f85e441fa34ccaaa6d8475dc46280c7fde25e87efaeba41ec7c286f6ad2a4945a12f4f4a6793635349db293560f8851b05b7afa4b7c6cc860

data/README.md

@@ -1,9 +1,10 @@
 # typey
-Do typography better.
+
+A complete framework for working with typography on the web.
 
 ### Features
 
-Supports outputting in rem, px, pt and em.
+Supports outputting in rem, em and px.
 
 ```sass
 $base-unit: rem;
@@ -41,9 +42,13 @@ button {
 }
 ```
 
+Automatic print media font sizing when using rem or em.
+
 ```css
-button {
-  font-size: 1.8125rem;
+@media print {
+  html {
+    font-size: 12pt;
+  }
 }
 ```
 
@@ -100,14 +105,14 @@ Vanilla Sass
 
 ### Getting started
 
-Just like in compass Vertical Rhythm we define our base font size and line height first. In typey, all sizes are defined in `px` or `pt` only.
+Just like in compass Vertical Rhythm we define our base font size and line height first. In typey, all sizes are defined in `px` only.
 
 ```sass
 $base-font-size:    16px;
 $base-line-height:  24px;
 ```
 
-We also need to define the base unit that the functions and mixins will output. you can use `px`, `pt` (for print stylesheets), `rem` or `em`.
+We also need to define the base unit that the functions and mixins will output. you can use `rem`, `em` or `px`.
 
 ```sass
 $base-unit: rem;
@@ -121,7 +126,7 @@ html {
 }
 ```
 
-Define the `$font-size` map using `px` (or `pt`) - which are easy to read and keep track of (not to mention convert from a design mockup) and t-shirt sizes (which are even easier to keep track of).
+Define the `$font-size` map with t-shirt sizes (which are easier to keep track of then individual values).
 
 ```sass
 $font-size: (
@@ -132,6 +137,12 @@ $font-size: (
 );
 ```
 
+To create print friendly stylesheets you must use a relative base unit (rem or em) - then all the work is taken care of for you. Optionally you can set the base print size like so:
+
+```sass
+$print-font-size: 12pt;
+```
+
 ### Line height and font sizing examples
 
 The simplest way to set font size is via the `font-size` mixin.
@@ -166,7 +177,7 @@ h4 {
 }
 ```
 
-When using `em` as your `$base-unit`, each mixin accepts a `$context` parameter so your `em` value will be relative to it's parent or element `font-size`. The `$context` parameter can either accept a t-shirt size or a static value for granular control. See the reference section below for more information.
+When using `em` as your `$base-unit`, each mixin accepts a `$context` parameter so your `em` value will be relative to it's parent or element `font-size`. The `$context` parameter can either accept a t-shirt size or a static value in px. See the reference section below for more information.
 
 ```sass
 h4 {
@@ -180,7 +191,7 @@ h4 {
 
 ### Margin and padding examples
 
-The same mixins that we have for `line-height` also exist for `margin` and `padding`, and works exactly the same way.
+The same mixins that we have for `line-height` also exist for `margin` and `padding`, and work exactly the same way.
 
 ```sass
 div {
@@ -207,7 +218,7 @@ div {
 }
 ```
 
-If you are using `em`, both the `margin()` and `padding()` functions/mixins accept a ``$context` parameter.
+If you are using `em`, both the `margin()` and `padding()` functions/mixins accept a `$context` parameter.
 
 ```sass
 div {
@@ -259,7 +270,7 @@ $base-font-size:           16px !default;
 ```
 
 The base font size will be used for most calculations involving font-size.
-Allowed units: px or pt
+Allowed units: px
 
 
 ```sass
@@ -267,14 +278,14 @@ $base-line-height:         21px !default;
 ```
 
 The base line height will be used for most calculations involving height.
-Allowed units: Must be the same as $base-line-height
+Allowed units: px
 
 
 ```sass
 $base-unit:                rem !default;
 ```
 
-Allowed units: px, pt, em or rem.
+Allowed units: rem, em or px.
 
 
 ```sass
@@ -283,6 +294,19 @@ $rem-fallback:             true !default;
 
 By default we will provide fallbacks when rem is the base unit.
 
+```sass
+$auto-print-sizing:        true !default;
+```
+
+By default, when rem or em are the base unit we will output a print suitable media query with the define-type-sizing() mixin. This will take care of all print media type sizing effortlessly.
+
+```sass
+$print-font-size:          12pt !default;
+```
+
+The pt font-size to be used with the print media query when $auto-print-sizing is enabled.
+Allowed units: pt
+
 
 ```sass
 $font-size: (
@@ -298,7 +322,7 @@ $font-size: (
 
 Default font sizes
 Once you redefine the $font-size map it will overwrite all sizes here.
-Allowed units: Must be the same as $base-line-height
+Allowed units: px
 
 
 ```sass
@@ -309,7 +333,7 @@ $font-weight: (
 ) !default;
 ```
 
-Default font weights
+Default font weights   
 This map and accompanying function help provide granular control over setting and retrieving static font weights.
 
 ### Mixins
@@ -321,10 +345,10 @@ define-type-sizing($base-font-size: $base-font-size, $base-line-height: $base-li
 Outputs the base font-size property and the base line-height property. Font-size is outputted as a % of the base browser font size. A fallback for rem is provided for the line-height property.
 
 *@param number $base-font-size*  
-(optional) Use to set to anything other than the base value. Allowed units: px or pt
+(optional) Use to set to anything other than the base value. Allowed units: px
 
 *@param number $base-line-height(optional)*  
-Use to set to anything other than the base value. Allowed units: px or pt
+Use to set to anything other than the base value. Allowed units: px
 
 
 ```sass
@@ -334,13 +358,13 @@ type-layout($size, $x, $context: $size)
 Outputs both line-height and font-size properties, providing fallbacks when rem is the base unit.
 
 *@param number|string $size*  
-A size from the $font-size map or a px/pt value.
+A size from the $font-size map or a px value.
 
 *@param number $x*  
-Multiple of line height to be used or px/pt value to be converted.
+Multiple of line height to be used or px value to be converted.
 
 *@param number|string $context*  
-(optional) Only used if em is the $base-unit. The value of the elements/parents font-size if it differs from $base-font-size. Specified as a t-shirt size or value in the same unit as the $font-size map.
+(optional) Only used if em is the $base-unit. The value of the elements/parents font-size if it differs from $base-font-size. Specified as a t-shirt size or value in px.
 
 
 ```sass
@@ -350,10 +374,10 @@ font-size($size, $context: $base-font-size)
 Outputs font-size property, providing fallbacks when rem is the base unit.
 
 *@param number|string $size*  
-A size from the $font-size map or px/pt value to be converted
+A size from the $font-size map or px value to be converted
 
 *@param number|string $context*  
-(optional) Only used if em is the $base-unit. The value of the parent font-size if it differs from $base-font-size. Specified as a t-shirt size or value in the same unit as the $font-size map.
+(optional) Only used if em is the $base-unit. The value of the parent font-size if it differs from $base-font-size. Specified as a t-shirt size or value in px.
 
 
 ```sass
@@ -363,10 +387,10 @@ line-height($x, $context: $base-font-size)
 Outputs line-height property, providing fallbacks when rem is the base unit.
 
 *@param number $x*
-Multiple of line height to be used or px/pt value to be converted.
+Multiple of line height to be used or px value to be converted.
 
 *@param number|string $context*
-(optional) Only used if em is the $base-unit. The value of the elements/parentsfont-size if it differs from $base-font-size. Specified as a t-shirt size or value in the same unit as the $font-size map.
+(optional) Only used if em is the $base-unit. The value of the elements/parentsfont-size if it differs from $base-font-size. Specified as a t-shirt size or value in px.
 
 
 ```sass
@@ -376,12 +400,12 @@ margin($x, $context: $base-font-size)
 Outputs margin property, providing fallbacks when rem is the base unit.
 
 *@param number|list $x*  
-Multiple of line height to be used or px/pt value to be converted.  
+Multiple of line height to be used or px value to be converted.  
 Uses the same parameters as the CSS margin property:  
 i.e. top right bottom left, 1 0 2 0.
 
 *@param number|string $context*  
-(optional) Only used if em is the $base-unit. The value of the elements/parents font-size if it differs from $base-font-size. Specified as a t-shirt size or value in the same unit as the $font-size map.
+(optional) Only used if em is the $base-unit. The value of the elements/parents font-size if it differs from $base-font-size. Specified as a t-shirt size or value in px.
 
 
 ```sass
@@ -391,12 +415,12 @@ padding($x, $context: $base-font-size)
 Outputs padding property, providing fallbacks when rem is the base unit.
 
 *@param number|list $x*  
-Multiple of line height to be used or px/pt value to be converted.  
+Multiple of line height to be used or px value to be converted.  
 Uses the same parameters as the CSS margin property:  
 i.e. top right bottom left, 1 0 2 0.
 
 *@param number|string $context*  
-(optional) Only used if em is the $base-unit. The value of the elements/parents font-size if it differs from $base-font-size. Specified as a t-shirt size or value in the same unit as the $font-size map.
+(optional) Only used if em is the $base-unit. The value of the elements/parents font-size if it differs from $base-font-size. Specified as a t-shirt size or value in px.
 
 
 ```sass
@@ -409,10 +433,10 @@ margin-left($x, $context: $base-font-size)
 Outputs corresponding margin property, providing fallbacks when rem is the base unit.
 
 *@param number|list $x*  
-Multiple of line height to be used or px/pt value to be converted.  
+Multiple of line height to be used or px value to be converted.  
 
 *@param number|string $context*  
-(optional) Only used if em is the $base-unit. The value of the elements/parents font-size if it differs from $base-font-size. Specified as a t-shirt size or value in the same unit as the $font-size map.
+(optional) Only used if em is the $base-unit. The value of the elements/parents font-size if it differs from $base-font-size. Specified as a t-shirt size or value in px.
 
 
 ```sass
@@ -425,10 +449,10 @@ padding-left($x, $context: $base-font-size)
 Outputs corresponding padding property, providing fallbacks when rem is the base unit.
 
 *@param number|list $x*  
-Multiple of line height to be used or px/pt value to be converted.  
+Multiple of line height to be used or px value to be converted.  
 
 *@param number|string $context*  
-(optional) Only used if em is the $base-unit. The value of the elements/parents font-size if it differs from $base-font-size. Specified as a t-shirt size or value in the same unit as the $font-size map.
+(optional) Only used if em is the $base-unit. The value of the elements/parents font-size if it differs from $base-font-size. Specified as a t-shirt size or value in px.
 
 ### Functions
 
@@ -437,10 +461,10 @@ font-size($size, $context: $base-font-size)
 ```
 
 *@param number|string $size*  
-A size from the $font-size map or px/pt value to be converted
+A size from the $font-size map or px value to be converted
 
 *@param number|string $context*  
-(optional) Only used if em is the $base-unit. The value of the parent font-size if it differs from $base-font-size. Specified as a t-shirt size or value in the same unit as the $font-size map.
+(optional) Only used if em is the $base-unit. The value of the parent font-size if it differs from $base-font-size. Specified as a t-shirt size or value in px.
 
 *@return number*  
 The selected font-size in $base-unit.
@@ -451,10 +475,10 @@ line-height($x, $context: $base-font-size)
 ```
 
 *@param number $x*  
-Multiple of line height to be used or px/pt value to be converted.
+Multiple of line height to be used or px value to be converted.
 
 *@param number|string $context*  
-(optional) Only used if em is the $base-unit. The value of the elements/parentsfont-size if it differs from $base-font-size. Specified as a t-shirt size or value in the same unit as the $font-size map.
+(optional) Only used if em is the $base-unit. The value of the elements/parentsfont-size if it differs from $base-font-size. Specified as a t-shirt size or value in px.
 
 *@return number*  
 The calculated height in $base-unit.
@@ -465,10 +489,10 @@ margin($x, $context: $base-font-size)
 ```
 
 *@param number $x*  
-Multiple of line height to be used or px/pt value to be converted.
+Multiple of line height to be used or px value to be converted.
 
 *@param number|string $context*  
-(optional) Only used if em is the $base-unit. The value of the elements/parents font-size if it differs from $base-font-size. Specified as a t-shirt size or value in the same unit as the $font-size map.
+(optional) Only used if em is the $base-unit. The value of the elements/parents font-size if it differs from $base-font-size. Specified as a t-shirt size or value in px.
 
 *@return number*  
 The calculated height in $base-unit.
@@ -479,10 +503,10 @@ padding($x, $context: $base-font-size)
 ```
 
 *@param number $x*  
-Multiple of line height to be used or px/pt value to be converted.
+Multiple of line height to be used or px value to be converted.
 
 *@param number|string $context*  
-(optional) Only used if em is the $base-unit. The value of the elements/parents font-size if it differs from $base-font-size. Specified as a t-shirt size or value in the same unit as the $font-size map.
+(optional) Only used if em is the $base-unit. The value of the elements/parents font-size if it differs from $base-font-size. Specified as a t-shirt size or value in px.
 
 *@return number*  
 The calculated height in $base-unit.

data/stylesheets/typey/_defaults.scss

@@ -1,23 +1,34 @@
 // The browser font size default. No need to change this.
+// Allowed units: px
 $browser-font-size:        16px !default;
 
 // The base font size will be used for most calculations involving font-size.
-// Allowed units: px or pt
+// Allowed units: px
 $base-font-size:           16px !default;
 
 // The base line height will be used for most calculations involving height.
-// Allowed units: Must be the same as $base-line-height
+// Allowed units: px
 $base-line-height:         21px !default;
 
-// Allowed units: px, pt, em or rem.
+// Allowed units: rem, em or px
 $base-unit:                rem !default;
 
 // By default we will provide fallbacks when rem is the base unit.
 $rem-fallback:             true !default;
 
+// By default, when rem or em are the base unit we will output a print suitable
+// media query with the define-type-sizing() mixin. This will take care of all
+// print media type sizing effortlessly.
+$auto-print-sizing:        true !default;
+
+// The pt font-size to be used with the print media query when
+// $auto-print-sizing is enabled.
+// Allowed units: pt
+$print-font-size:          12pt !default;
+
 // Default font sizes
 // Once you redefine the $font-size map it will overwrite all sizes here.
-// Allowed units: Must be the same as $base-line-height
+// Allowed units: px
 $font-size: (
   xxxl:                    60px,
   xxl:                     46px,
@@ -38,22 +49,27 @@ $font-weight: (
 ) !default;
 
 // Warnings for $base-unit.
-@if $base-unit != px and $base-unit != pt and $base-unit != rem and $base-unit != em {
-  @error "$base-unit must be one of the following unit types: px, pt, rem, em";
+@if $base-unit != px and $base-unit != rem and $base-unit != em {
+  @error "$base-unit must be one of the following unit types: rem, em or px";
 }
 
 // Warnings for $base-font-size and $base-line-height.
-@if unit($base-font-size) != px and unit($base-font-size) != pt {
-  @error "$base-font-size must be one of the following unit types: px, pt";
+@if unit($base-font-size) != px {
+  @error "$base-font-size must be in px";
 }
-@if unit($base-line-height) != unit($base-font-size) {
-  @error "$base-line-height must use the same unit as $base-font-size.";
+@if unit($base-line-height) != px {
+  @error "$base-line-height must be in px";
+}
+
+// Warnings for $print-font-size.
+@if unit($print-font-size) != pt {
+  @error "$print-font-size must be in pt";
 }
 
 // Warnings for $font-size
 @each $key, $size in $font-size {
-  @if unit($size) != unit($base-font-size) {
-    @error "Size '#{$key}' in $font-size map does not match the $base-font-size unit.";
+  @if unit($size) != px {
+    @error "Size '#{$key}' in $font-size map is not specified in px";
   }
 }
 
@@ -61,10 +77,10 @@ $font-weight: (
 //
 // @param number $base-font-size
 //   (optional) Use to set to anything other than the base value.
-//   Allowed units: px or pt
+//   Allowed units: px
 // @param number $base-line-height
 //   (optional) Use to set to anything other than the base value.
-//   Allowed units: px or pt
+//   Allowed units: px
 @mixin define-type-sizing($base-font-size: $base-font-size, $base-line-height: $base-line-height) {
   @if $base-unit == rem {
     font-size: $base-font-size / $browser-font-size * 100%;
@@ -73,7 +89,7 @@ $font-weight: (
     }
     line-height: output-unit($base-line-height / $base-font-size);
   }
-  @if $base-unit == px or $base-unit == pt {
+  @if $base-unit == px {
     font-size: $base-font-size;
     line-height: $base-line-height;
   }
@@ -81,4 +97,14 @@ $font-weight: (
     font-size: $base-font-size / $browser-font-size * 100%;
     line-height: output-unit($base-line-height / $base-font-size);
   }
+  @if $auto-print-sizing == true {
+    @if $base-unit == rem or $base-unit == em {
+      @media print {
+        font-size: $print-font-size;
+      }
+    }
+    @else {
+      @warn "As you are not using a relative base unit (rem or em) automatic print media sizing will not work. Set $auto-print-sizing to false to hide this warning"
+    }
+  }
 }

data/stylesheets/typey/_font-size.scss

@@ -1,12 +1,12 @@
 // Takes a sizing from the $font-size map (m, xl, xxl, etc) and convert it to
-// the base unit. Alternatively convert a px/pt font-size into the base unit.
+// the base unit. Alternatively convert a px font-size into the base unit.
 //
 // @param number|string $size
-//   A size from the $font-size map or px/pt value to be converted
+//   A size from the $font-size map or px value to be converted
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the parent
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 //
 // @return number
 //   The selected font-size in $base-unit.
@@ -15,26 +15,26 @@
     @return output-from-font-size-map($size, $context);
   }
   @if type-of($size) == "number" and not unitless($size) {
-    @if unit($size) == unit($base-font-size) {
+    @if unit($size) == px {
       @return convert-unit($size, $context);
     }
     @else {
-      @error "font-size() only accepts values with the same unit as $base-font-size.";
+      @error "font-size() only accepts keys from the $font-size map or values in px";
     }
   }
   @else {
-    @error "font-size() only accepts keys from the font map or values in px or pt.";
+    @error "font-size() only accepts keys from the $font-size map or values in px";
   }
 }
 
 // Define font-size (with fallback)
 //
 // @param number|string $size
-//   A size from the $font-size map or px/pt value to be converted
+//   A size from the $font-size map or px value to be converted
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 @mixin font-size($size, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
@@ -43,11 +43,11 @@
         font-size: $map-size;
       }
       @if type-of($size) == "number" and not unitless($size) {
-        @if unit($size) == unit($base-font-size) {
+        @if unit($size) == px {
           font-size: $size;
         }
         @else {
-          @error "font-size() only accepts values with the same unit as $base-font-size.";
+          @error "font-size() only accepts keys from the $font-size map or values in px";
         }
       }
     }

data/stylesheets/typey/_helpers.scss

@@ -12,9 +12,6 @@
   @if $base-unit == px {
     @return $number * 1px;
   }
-  @if $base-unit == pt {
-    @return $number * 1pt;
-  }
   @if $base-unit == em {
     @return $number * 1em;
   }
@@ -34,30 +31,25 @@
   @return $number;
 }
 
-// Convert px or pt to the $base-unit.
+// Convert px to the $base-unit.
 //
 // @param number $number
-//   The number (with unit) to convert. Allowed units: px, pt
+//   The number (with unit) to convert. Allowed units: px
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 //
 // @return number
 //   The number converted to the base unit.
 @function convert-unit($number, $context: $base-font-size) {
   @if type-of($number) == "number" and not unitless($number) {
     $unit: unit($number);
-    @if $unit == px or $unit == pt {
+    @if $unit == px {
       @if $base-unit == rem {
-        @if $unit == unit($base-font-size) {
-          @return output-unit(($number / $base-font-size));
-        }
-        @else {
-          @error "convert-unit() only accepts values with the same unit as $base-font-size.";
-        }
+        @return output-unit(($number / $base-font-size));
       }
-      @if $base-unit == px or $base-unit == pt {
+      @if $base-unit == px {
         @return output-unit(strip-unit($number));
       }
       @if $base-unit == em {
@@ -67,21 +59,21 @@
             @return output-unit(($number / $context-map-size));
           }
           @else {
-            @error "'#{$context}' not found in $font-size map.";
+            @error "'#{$context}' not found in $font-size map";
           }
         }
-        @if type-of($context) == "number" {
-          @if unit($context) == unit($base-font-size) {
+        @if type-of($context) == "number" and not unitless($number) {
+          @if unit($context) == px {
             @return output-unit(($number / $context));
           }
           @else {
-            @error "The unit used for $context does not match the $base-font-size unit.";
+            @error "The unit used for $context must be px";
           }
         }
       }
     }
     @else {
-      @error "convert-unit() only accepts values in px or pt.";
+      @error "convert-unit() only accepts values in px";
     }
   }
 }
@@ -93,7 +85,7 @@
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 //
 // @return number
 //   The value of the line-height multiple converted to the base unit.
@@ -101,16 +93,16 @@
   @if $base-unit == rem {
     @return output-unit(($x * $base-line-height) / $base-font-size);
   }
-  @if $base-unit == px or $base-unit == pt {
+  @if $base-unit == px {
     @return output-unit(strip-unit($x * $base-line-height));
   }
   @if $base-unit == em {
     @if type-of($context) == "number" {
-      @if unit($context) == unit($base-font-size) {
+      @if unit($context) == px {
         @return output-unit(($x * $base-line-height) / $context);
       }
       @else {
-        @error "The unit used for $context does not match the $base-font-size unit.";
+        @error "The unit used for $context must be px";
       }
     }
     @if type-of($context) == "string" {
@@ -119,11 +111,11 @@
         @return output-unit(($x * $base-line-height) / $context-map-size);
       }
       @else {
-        @error "'#{$context}' not found in $font-size map.";
+        @error "'#{$context}' not found in $font-size map";
       }
     }
     @else {
-      @error "$context must be a px/pt value or a key from the $font-size map.";
+      @error "$context must be a px value or a key from the $font-size map";
     }
   }
 }
@@ -137,7 +129,7 @@
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the parent
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 //
 // @return number
 //   The selected font-size in $base-unit.
@@ -157,23 +149,23 @@
           @return output-unit(($map-size / $context-map-size));
         }
         @else {
-          @error "'#{$context}' not found in $font-size map.";
+          @error "'#{$context}' not found in $font-size map";
         }
       }
       @if type-of($context) == "number" {
-        @if unit($context) == unit($base-font-size) {
+        @if unit($context) == px {
           @return output-unit(($map-size / $context));
         }
         @else {
-          @error "The unit used for $context does not match the $base-font-size unit.";
+          @error "The unit used for $context must be px";
         }
       }
       @else {
-        @error "$context must be a px/pt value or a key from the $font-size map.";
+        @error "$context must be a px value or a key from the $font-size map";
       }
     }
   }
   @else {
-    @error "'#{$size}' not found in $font-size map.";
+    @error "'#{$size}' not found in $font-size map";
   }
 }

data/stylesheets/typey/_line-height.scss

@@ -12,7 +12,7 @@
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 //
 // @return number
 //   The calculated height in $base-unit.
@@ -21,15 +21,15 @@
     @return output-from-multiplier($x, $context);
   }
   @if type-of($x) == "number" and not unitless($x) {
-    @if unit($x) == unit($base-font-size) {
+    @if unit($x) == px {
       @return convert-unit($x, $context);
     }
     @else {
-      @error "line-height() only accepts values with the same unit as $base-font-size.";
+      @error "line-height() only accepts unitless numbers or values in px";
     }
   }
   @else {
-    @error "line-height() only accepts unitless numbers or values in px or pt.";
+    @error "line-height() only accepts unitless numbers or values in px";
   }
 }
 
@@ -42,7 +42,7 @@
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 @mixin line-height($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
@@ -50,7 +50,12 @@
         line-height: $x * $base-line-height;
       }
       @if type-of($x) == "number" and not unitless($x) {
-        line-height: $x;
+        @if unit($size) == px {
+          line-height: $x;
+        }
+        @else {
+          @error "line-height() only accepts unitless numbers or values in px";
+        }
       }
     }
   }

data/stylesheets/typey/_margin.scss

@@ -8,11 +8,11 @@
 //   margin: margin(18px);
 //
 // @param number $x
-//   Multiple of line height to be used or px/pt value to be converted.
+//   Multiple of line height to be used or px value to be converted.
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 //
 // @return number
 //   The calculated height in $base-unit.
@@ -25,13 +25,13 @@
 // using rem as $base-unit.
 //
 // @param number|list $x
-//   Multiple of line height to be used or px/pt value to be converted.
+//   Multiple of line height to be used or px value to be converted.
 //   Uses the same parameters as the CSS margin property:
 //   i.e. top right bottom left, 1 0 2 0.
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 @mixin margin($list, $context: $base-font-size) {
   $px-list: ();
   $converted-list: ();
@@ -61,11 +61,11 @@
 // using rem as $base-unit.
 //
 // @param number $x
-//   Multiple of line height to be used or px/pt value to be converted.
+//   Multiple of line height to be used or px value to be converted.
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 @mixin margin-top($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
@@ -85,11 +85,11 @@
 // using rem as $base-unit.
 //
 // @param number $x
-//   Multiple of line height to be used or px/pt value to be converted.
+//   Multiple of line height to be used or px value to be converted.
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 @mixin margin-bottom($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
@@ -109,11 +109,11 @@
 // using rem as $base-unit.
 //
 // @param number $x
-//   Multiple of line height to be used or px/pt value to be converted.
+//   Multiple of line height to be used or px value to be converted.
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 @mixin margin-left($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
@@ -133,11 +133,11 @@
 // using rem as $base-unit.
 //
 // @param number $x
-//   Multiple of line height to be used or px/pt value to be converted.
+//   Multiple of line height to be used or px value to be converted.
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 @mixin margin-right($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {

data/stylesheets/typey/_padding.scss

@@ -8,11 +8,11 @@
 //   padding: padding(18px);
 //
 // @param number $x
-//   Multiple of line height to be used or px/pt value to be converted.
+//   Multiple of line height to be used or px value to be converted.
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 //
 // @return number
 //   The calculated height in $base-unit.
@@ -25,13 +25,13 @@
 // using rem as $base-unit.
 //
 // @param number|list $x
-//   Multiple of line height to be used or px/pt value to be converted.
+//   Multiple of line height to be used or px value to be converted.
 //   Uses the same parameters as the CSS padding property:
 //   i.e. top right bottom left, 1 0 2 0.
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 @mixin padding($list, $context: $base-font-size) {
   $px-list: ();
   $converted-list: ();
@@ -61,11 +61,11 @@
 // using rem as $base-unit.
 //
 // @param number $x
-//   Multiple of line height to be used or px/pt value to be converted.
+//   Multiple of line height to be used or px value to be converted.
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 @mixin padding-top($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
@@ -85,11 +85,11 @@
 // using rem as $base-unit.
 //
 // @param number $x
-//   Multiple of line height to be used or px/pt value to be converted.
+//   Multiple of line height to be used or px value to be converted.
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 @mixin padding-bottom($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
@@ -109,11 +109,11 @@
 // using rem as $base-unit.
 //
 // @param number $x
-//   Multiple of line height to be used or px/pt value to be converted.
+//   Multiple of line height to be used or px value to be converted.
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 @mixin padding-left($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
@@ -133,11 +133,11 @@
 // using rem as $base-unit.
 //
 // @param number $x
-//   Multiple of line height to be used or px/pt value to be converted.
+//   Multiple of line height to be used or px value to be converted.
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 @mixin padding-right($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {

data/stylesheets/typey/_type-layout.scss

@@ -1,13 +1,13 @@
 // Define a type layout (font-size and line-height).
 //
 // @param number|string $size
-//   A size from the $font-size map or a px/pt value.
+//   A size from the $font-size map or a px value.
 // @param number $x
-//   Multiple of line height to be used or px/pt value to be converted.
+//   Multiple of line height to be used or px value to be converted.
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
-//   value in the same unit as the $font-size map.
+//   value in px.
 @mixin type-layout($size, $x, $context: $size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
@@ -17,11 +17,11 @@
       }
       @if type-of($size) == "number" and not unitless($size) {
         $unit: unit($size);
-        @if $unit == px or $unit == pt {
+        @if $unit == px {
           font-size: $size;
         }
         @else {
-          @warn "font-size() only accepts values in px or pt.";
+          @warn "font-size() only accepts values in px";
         }
       }
       @if type-of($x) == "number" and unitless($x) {
@@ -32,7 +32,7 @@
       }
     }
   }
-  @if $base-unit == rem or $base-unit == px or $base-unit == pt {
+  @if $base-unit == rem or $base-unit == px {
     font-size: font-size($size);
     line-height: line-height($x);
   }

data/typey.gemspec

@@ -3,14 +3,13 @@
 Gem::Specification.new do |spec|
   spec.name         = 'typey'
 
-  spec.summary      = %q{Do typography better.}
-  spec.description  = %q{Tools to help you manage font sizing and css units.}
+  spec.summary      = %q{A complete framework for working with typography on the web.}
 
   spec.homepage     = 'http://github.com/jptaranto/typey'
   spec.rubyforge_project =
 
-  spec.version      = '1.0.0.beta.2'
-  spec.date         = '2015-06-17'
+  spec.version      = '1.0.0.beta.4'
+  spec.date         = '2015-07-01'
   spec.licenses     = ['GPL-2']
 
   spec.authors      = ['Jack Taranto']

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: typey
 version: !ruby/object:Gem::Version
-  version: 1.0.0.beta.2
+  version: 1.0.0.beta.4
 platform: ruby
 authors:
 - Jack Taranto
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-06-17 00:00:00.000000000 Z
+date: 2015-07-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -24,7 +24,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.3'
-description: Tools to help you manage font sizing and css units.
+description: 
 email: jacktaranto@gmail.com
 executables: []
 extensions: []
@@ -64,9 +64,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubyforge_project: 1.0.0.beta.2
+rubyforge_project: 1.0.0.beta.4
 rubygems_version: 2.4.6
 signing_key: 
 specification_version: 4
-summary: Do typography better.
+summary: A complete framework for working with typography on the web.
 test_files: []