typey 1.0.0.beta.1 → 1.0.0.beta.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: aca87ffaf531d2f1e51eb2be6c9da355dfb02a44
-  data.tar.gz: 4bfeb8f07ef93d64305edaf294b16dfffa7aec8e
+  metadata.gz: 9dcc04d16cfb798142ac6db19f845d936d9f962f
+  data.tar.gz: cb5e434d8e4addc5e6aeab29ff23ce69f6d70ca3
 SHA512:
-  metadata.gz: 5cd59c665668d4e34b6b4e24afbe69dbf077cfaa1126300dc2fced7ea96368c43484610917102531bac7891f6929aae7cce0b9159b289718433ff9539c647b31
-  data.tar.gz: 564260d9dab2c9647eb2e00f55a12bf680b1caba17f6700ffcc55853cf4028c41818bd622fdcc99e9ecfb8d61ad3ae953ba44050ce8ea8baeed8acdf26391641
+  metadata.gz: 205b4e9089a69f10c04579acceda1bae7cfe2c04bbf229a1a86e787d7e265f607e98f7bd172fcaec435ebee6b0e48de364d1618d9f680a9122b0796b375ebc13
+  data.tar.gz: 2937370f717f1c4594781f32a383beb9871b9e3687e25b51a5387991e3825dc8835782c12b216b26c6c8c07e68b9b95a697fbb5f0502fa65c2e0d417727ecd31

data/README.md

@@ -1,18 +1,80 @@
 # typey
 Do typography better.
 
-**Typey is in beta! Use it to your hearts content on _all_ your projects!**
+### Features
 
+Supports outputting in rem, px, pt and em.
 
-### Features
+```sass
+$base-unit: rem;
+```
+
+Define font sizes inside a sass map as t-shirt sizes.
+
+```sass
+$font-size: (
+  xl:   32px,
+  l:    24px,
+  m:    16px,
+  s:    14px,
+);
+
+h1 {
+  @include font-size(xl);
+}
+```
+
+Automatic px fallbacks when using rem as the base unit.
+
+```css
+h1 {
+  font-size: 32px;
+  font-size: 2rem;
+}
+```
+
+Easily convert px values to rem or em.
+
+```sass
+button {
+  @include font-size(29px);
+}
+```
+
+```css
+button {
+  font-size: 1.8125rem;
+}
+```
+
+Define line-height, margin and padding as multiples of the base line height OR as static values.
+
+```sass
+h2 {
+  @include line-height(3);
+  @incude margin(10px 0);
+}
+```
+
+Define font weights inside a sass map.
+
+```sass
+$font-weight: (
+  bold:    700,
+  normal:  400,
+  lighter: 200
+);
 
-* Use px to define font sizes and have them output in rem or em.
-* Define font sizes inside a sass map as t-shirt sizes (m, l, xl, xxl, etc).
-* Define line-height as multiples of the base line height OR as static values.
-* Automatic px fallbacks when using rem as the base unit.
-* Easily convert px values to rem or em.
-* Define font weights inside a sass map.
-* Ready to go web safe font stacks that are easy to extend.
+strong {
+  font-weight: weight(bold)
+}
+```
+
+Ready to go web safe font stacks that are easy to extend.
+
+```sass
+$your-font-stack: extend-font-stack("Open sans", $sans-serif-stack);
+```
 
 ### Requirements
 
@@ -36,24 +98,6 @@ Vanilla Sass
 * Terminal: 'git clone git@github.com:jptaranto/typey.git
 * SCSS: `@import '../link_to_component_dir/typey/stylesheets/typey'`
 
-### CSS units used in typey
-
-`px`
-
-By far the simplest unit you can use to size typography on the web. It translates very easily from mockups produced in a certain over-rated graphics suite. In typey, all base sizes are specified in `px` (or `pt`) and are automatically converted to your `$base-unit`.
-
-`pt`
-
-Translates equally well from design mockups as `px` but should be kept for use solely within print stylesheets. For the simplest approach when writing print stylesheets set your $base-unit as `pt` and define all base sizes as `pt`.
-
-`rem`
-
-Sets `font-size` as relative to the `html` element's `font-size` and allows you to resize fonts dynamically with media queries. It has one irritating caveat: no IE8 support! Fear not, typey can help.
-
-`em`
-
-In the way the `rem` unit is relative to the `html` element, `em` is relative to the parent `font-size`. It is supported in all browsers and also allows you to dynamically resize fonts with media queries. It can just get severely confusing when you have various nested elements - each with an `em` `font-size`. Typey functions and mixins accept a second parameter to help with this problem.
-
 ### 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.
@@ -81,31 +125,28 @@ Define the `$font-size` map using `px` (or `pt`) - which are easy to read and ke
 
 ```sass
 $font-size: (
-  xxxl: 60px,
-  xxl:  46px,
   xl:   32px,
   l:    24px,
   m:    16px,
   s:    14px,
-  xs:   12px
 );
 ```
 
 ### Line height and font sizing examples
 
-The simplest way to set `font-size` is via the `font-size()` function.
+The simplest way to set font size is via the `font-size` mixin.
 
 ```sass
 h1 {
-  font-size: font-size(xxxl);
+  @include font-size(xl);
 }
 ```
 
-You can specify `line-height` as a multiple of `$base-line-height` (for a vertical rhythm approach).
+You can specify line height as a multiple of `$base-line-height` (for a vertical rhythm approach).
 
 ```sass
 h2 {
-  line-height: line-height(3);
+  @include line-height(2);
 }
 ```
 
@@ -113,20 +154,11 @@ Or for those finicky designs, you can just use a static `px` value for granular
 
 ```sass
 h3 {
-  line-height: line-height(43px);
-}
-```
-
-If you are using rem as a base unit for its super lovely font resizing abilities, `px` fallbacks are added automatically when using the `font-size()` and `line-height()` mixins. Both mixins support exactly the same parameters as their function counterparts.
-
-```sass
-h4 {
-  @include font-size(xl);
-  @include line-height(2);
+  @include line-height(35px);
 }
 ```
 
-Or for short hand you can use the `type-layout()` mixin.
+And for short hand, do it all with the `type-layout` mixin.
 
 ```sass
 h4 {
@@ -134,40 +166,39 @@ h4 {
 }
 ```
 
-When using `em` as your `$base-unit`, each function accepts a second parameter so your `em` value will be relative to it's parent or element `font-size`. The second parameter can either accept a t-shirt size or a static value for granular control.
+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.
 
 ```sass
 h4 {
-  font-size: font-size(xl);
+  @include type-layout(xl, 2);
 
   span {
-    font-size: font-size(s, xl);
-    line-height: line-height(2, 14px);
+    @include type-layout(s, 2, xl);
   }
 }
 ```
 
 ### Margin and padding examples
 
-The same function 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 works exactly the same way.
 
 ```sass
 div {
-  margin-top: margin(2);
-  margin-right: margin(1);
-  margin-bottom: margin(2);
-  margin-left: margin(1);
+  @include margin-top(2);
+  @include margin-right(1);
+  @include margin-bottom(2);
+  @include margin-left(1);
 }
 
 form {
-  padding-top: padding(2);
-  padding-right: padding(1);
-  padding-bottom: padding(2);
-  padding-left: padding(1);
+  @include padding-top(2);
+  @include padding-right(1);
+  @include padding-bottom(2);
+  @include padding-left(1);
 }
 ```
 
-We also have a pair of mixins which (you guessed it!) automatically add fallback for `rem`. They also have the convenient ability to handle shorthand values for both margin and padding (and it works in exactly the same way as the CSS margin and padding property).
+You can use regular CSS short hand too.
 
 ```sass
 div {
@@ -176,16 +207,13 @@ div {
 }
 ```
 
-If you are using `em`, both the `margin()` and `padding()` functions/mixins accept a second parameter.
+If you are using `em`, both the `margin()` and `padding()` functions/mixins accept a ``$context` parameter.
 
 ```sass
 div {
-  font-size: font-size(s)
-
-  span {
-    @include margin(1 2, s);
-    @include padding(1 2, s);
-  }
+  @include font-size(s)
+  @include margin(1 2, s);
+  @include padding(1 2, s);
 }
 ```
 
@@ -486,13 +514,17 @@ The font stack variable to extend.
 
 ### Included font stacks
 
+Three standard do-all stacks.
+
 ```sass
-// Three standard do-all stacks.
 $serif-stack:         TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
 $sans-serif-stack:    "Helvetica Neue", Helvetica, Arial, sans-serif;
 $monospaced-stack:    "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
+```
 
-// Specific font stacks.
+Specific font stacks.
+
+```sass
 $arial-stack:         Arial, "Helvetica Neue", Helvetica, sans-serif;
 $helvetica-stack:     "Helvetica Neue", Helvetica, Arial, sans-serif;
 $baskerville-stack:   Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;

data/stylesheets/typey/_font-size.scss

@@ -11,10 +11,10 @@
 // @return number
 //   The selected font-size in $base-unit.
 @function font-size($size, $context: $base-font-size) {
-  @if type-of($size) == 'string' {
+  @if type-of($size) == "string" {
     @return output-from-font-size-map($size, $context);
   }
-  @if type-of($size) == 'number' and not unitless($size) {
+  @if type-of($size) == "number" and not unitless($size) {
     @if unit($size) == unit($base-font-size) {
       @return convert-unit($size, $context);
     }
@@ -38,11 +38,11 @@
 @mixin font-size($size, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
-      @if type-of($size) == 'string' {
+      @if type-of($size) == "string" {
         $map-size: map-get($font-size, $size);
         font-size: $map-size;
       }
-      @if type-of($size) == 'number' and not unitless($size) {
+      @if type-of($size) == "number" and not unitless($size) {
         @if unit($size) == unit($base-font-size) {
           font-size: $size;
         }

data/stylesheets/typey/_helpers.scss

@@ -28,7 +28,7 @@
 // @return number
 //   The number without the unit.
 @function strip-unit($number) {
-  @if type-of($number) == 'number' and not unitless($number) {
+  @if type-of($number) == "number" and not unitless($number) {
     @return $number / ($number * 0 + 1);
   }
   @return $number;
@@ -46,7 +46,7 @@
 // @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) {
+  @if type-of($number) == "number" and not unitless($number) {
     $unit: unit($number);
     @if $unit == px or $unit == pt {
       @if $base-unit == rem {
@@ -61,7 +61,7 @@
         @return output-unit(strip-unit($number));
       }
       @if $base-unit == em {
-        @if type-of($context) == 'string' {
+        @if type-of($context) == "string" {
           @if map-has-key($font-size, $context) {
             $context-map-size: map-get($font-size, $context);
             @return output-unit(($number / $context-map-size));
@@ -70,7 +70,7 @@
             @error "'#{$context}' not found in $font-size map.";
           }
         }
-        @if type-of($context) == 'number' {
+        @if type-of($context) == "number" {
           @if unit($context) == unit($base-font-size) {
             @return output-unit(($number / $context));
           }
@@ -105,7 +105,7 @@
     @return output-unit(strip-unit($x * $base-line-height));
   }
   @if $base-unit == em {
-    @if type-of($context) == 'number' {
+    @if type-of($context) == "number" {
       @if unit($context) == unit($base-font-size) {
         @return output-unit(($x * $base-line-height) / $context);
       }
@@ -113,7 +113,7 @@
         @error "The unit used for $context does not match the $base-font-size unit.";
       }
     }
-    @if type-of($context) == 'string' {
+    @if type-of($context) == "string" {
       @if map-has-key($font-size, $context) {
         $context-map-size: map-get($font-size, $context);
         @return output-unit(($x * $base-line-height) / $context-map-size);
@@ -151,7 +151,7 @@
       @return output-unit(strip-unit($map-size));
     }
     @if $base-unit == em {
-      @if type-of($context) == 'string' {
+      @if type-of($context) == "string" {
         @if map-has-key($font-size, $context) {
           $context-map-size: map-get($font-size, $context);
           @return output-unit(($map-size / $context-map-size));
@@ -160,7 +160,7 @@
           @error "'#{$context}' not found in $font-size map.";
         }
       }
-      @if type-of($context) == 'number' {
+      @if type-of($context) == "number" {
         @if unit($context) == unit($base-font-size) {
           @return output-unit(($map-size / $context));
         }

data/stylesheets/typey/_line-height.scss

@@ -17,10 +17,10 @@
 // @return number
 //   The calculated height in $base-unit.
 @function line-height($x, $context: $base-font-size) {
-  @if type-of($x) == 'number' and unitless($x) {
+  @if type-of($x) == "number" and unitless($x) {
     @return output-from-multiplier($x, $context);
   }
-  @if type-of($x) == 'number' and not unitless($x) {
+  @if type-of($x) == "number" and not unitless($x) {
     @if unit($x) == unit($base-font-size) {
       @return convert-unit($x, $context);
     }
@@ -46,10 +46,10 @@
 @mixin line-height($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
-      @if type-of($x) == 'number' and unitless($x) {
+      @if type-of($x) == "number" and unitless($x) {
         line-height: $x * $base-line-height;
       }
-      @if type-of($x) == 'number' and not unitless($x) {
+      @if type-of($x) == "number" and not unitless($x) {
         line-height: $x;
       }
     }

data/stylesheets/typey/_margin.scss

@@ -37,11 +37,11 @@
   $converted-list: ();
   @each $x in $list {
     @if $base-unit == rem {
-      @if type-of($x) == 'number' and unitless($x) {
+      @if type-of($x) == "number" and unitless($x) {
         $margin: $x * $base-line-height;
         $px-list: join($px-list, $margin, $separator: space);
       }
-      @if type-of($x) == 'number' and not unitless($x) {
+      @if type-of($x) == "number" and not unitless($x) {
         $px-list: join($px-list, $x, $separator: space);
       }
     }
@@ -69,10 +69,10 @@
 @mixin margin-top($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
-      @if type-of($x) == 'number' and unitless($x) {
+      @if type-of($x) == "number" and unitless($x) {
         margin-top: $x * $base-line-height;
       }
-      @if type-of($x) == 'number' and not unitless($x) {
+      @if type-of($x) == "number" and not unitless($x) {
         margin-top: $x;
       }
     }
@@ -93,10 +93,10 @@
 @mixin margin-bottom($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
-      @if type-of($x) == 'number' and unitless($x) {
+      @if type-of($x) == "number" and unitless($x) {
         margin-bottom: $x * $base-line-height;
       }
-      @if type-of($x) == 'number' and not unitless($x) {
+      @if type-of($x) == "number" and not unitless($x) {
         margin-bottom: $x;
       }
     }
@@ -117,10 +117,10 @@
 @mixin margin-left($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
-      @if type-of($x) == 'number' and unitless($x) {
+      @if type-of($x) == "number" and unitless($x) {
         margin-left: $x * $base-line-height;
       }
-      @if type-of($x) == 'number' and not unitless($x) {
+      @if type-of($x) == "number" and not unitless($x) {
         margin-left: $x;
       }
     }
@@ -141,10 +141,10 @@
 @mixin margin-right($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
-      @if type-of($x) == 'number' and unitless($x) {
+      @if type-of($x) == "number" and unitless($x) {
         margin-right: $x * $base-line-height;
       }
-      @if type-of($x) == 'number' and not unitless($x) {
+      @if type-of($x) == "number" and not unitless($x) {
         margin-right: $x;
       }
     }

data/stylesheets/typey/_padding.scss

@@ -37,11 +37,11 @@
   $converted-list: ();
   @each $x in $list {
     @if $base-unit == rem {
-      @if type-of($x) == 'number' and unitless($x) {
+      @if type-of($x) == "number" and unitless($x) {
         $padding: $x * $base-line-height;
         $px-list: join($px-list, $padding, $separator: space);
       }
-      @if type-of($x) == 'number' and not unitless($x) {
+      @if type-of($x) == "number" and not unitless($x) {
         $px-list: join($px-list, $x, $separator: space);
       }
     }
@@ -69,10 +69,10 @@
 @mixin padding-top($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
-      @if type-of($x) == 'number' and unitless($x) {
+      @if type-of($x) == "number" and unitless($x) {
         padding-top: $x * $base-line-height;
       }
-      @if type-of($x) == 'number' and not unitless($x) {
+      @if type-of($x) == "number" and not unitless($x) {
         padding-top: $x;
       }
     }
@@ -93,10 +93,10 @@
 @mixin padding-bottom($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
-      @if type-of($x) == 'number' and unitless($x) {
+      @if type-of($x) == "number" and unitless($x) {
         padding-bottom: $x * $base-line-height;
       }
-      @if type-of($x) == 'number' and not unitless($x) {
+      @if type-of($x) == "number" and not unitless($x) {
         padding-bottom: $x;
       }
     }
@@ -117,10 +117,10 @@
 @mixin padding-left($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
-      @if type-of($x) == 'number' and unitless($x) {
+      @if type-of($x) == "number" and unitless($x) {
         padding-left: $x * $base-line-height;
       }
-      @if type-of($x) == 'number' and not unitless($x) {
+      @if type-of($x) == "number" and not unitless($x) {
         padding-left: $x;
       }
     }
@@ -141,10 +141,10 @@
 @mixin padding-right($x, $context: $base-font-size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
-      @if type-of($x) == 'number' and unitless($x) {
+      @if type-of($x) == "number" and unitless($x) {
         padding-right: $x * $base-line-height;
       }
-      @if type-of($x) == 'number' and not unitless($x) {
+      @if type-of($x) == "number" and not unitless($x) {
         padding-right: $x;
       }
     }

data/stylesheets/typey/_type-layout.scss

@@ -11,11 +11,11 @@
 @mixin type-layout($size, $x, $context: $size) {
   @if $base-unit == rem {
     @if $rem-fallback == true {
-      @if type-of($size) == 'string' {
+      @if type-of($size) == "string" {
         $map-size: map-get($font-size, $size);
         font-size: $map-size;
       }
-      @if type-of($size) == 'number' and not unitless($size) {
+      @if type-of($size) == "number" and not unitless($size) {
         $unit: unit($size);
         @if $unit == px or $unit == pt {
           font-size: $size;
@@ -24,10 +24,10 @@
           @warn "font-size() only accepts values in px or pt.";
         }
       }
-      @if type-of($x) == 'number' and unitless($x) {
+      @if type-of($x) == "number" and unitless($x) {
         line-height: $x * $base-line-height;
       }
-      @if type-of($x) == 'number' and not unitless($x) {
+      @if type-of($x) == "number" and not unitless($x) {
         line-height: $x;
       }
     }

data/stylesheets/typey/_weight.scss

@@ -6,7 +6,7 @@
 // @return string
 //   The selected font-weight.
 @function weight($weight) {
-  @if type-of($weight) == 'string' {
+  @if type-of($weight) == "string" {
     @if map-has-key($font-weight, $weight) {
       @return map-get($font-weight, $weight);
     }

data/typey.gemspec

@@ -9,7 +9,7 @@ Gem::Specification.new do |spec|
   spec.homepage     = 'http://github.com/jptaranto/typey'
   spec.rubyforge_project =
 
-  spec.version      = '1.0.0.beta.1'
+  spec.version      = '1.0.0.beta.2'
   spec.date         = '2015-06-17'
   spec.licenses     = ['GPL-2']
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: typey
 version: !ruby/object:Gem::Version
-  version: 1.0.0.beta.1
+  version: 1.0.0.beta.2
 platform: ruby
 authors:
 - Jack Taranto
@@ -64,7 +64,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubyforge_project: 1.0.0.beta.1
+rubyforge_project: 1.0.0.beta.2
 rubygems_version: 2.4.6
 signing_key: 
 specification_version: 4