typey 1.0.0.beta.9 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2c51d671d5d53cb3056cf4e39d36e8daca5d60cc
-  data.tar.gz: bac3199cf693b3fd99dfcf5b73dfdcb752886a1b
+  metadata.gz: 9aaaa94b9fc5bbb1ba9535d3fc643a979df870cd
+  data.tar.gz: 5d1be72fbb224ccdc14ce915720a1fe1318ecab0
 SHA512:
-  metadata.gz: f5fa241bb7e89ef3094d2e301d70af4e2df9b836503b684dc4f15284f613ce7ec50e7ac707496da65576d67fa49c78bcc5192708235160d62d5847f24cb418ac
-  data.tar.gz: adf95fa3399daed941afeaa291425a01399dbe5efaf6748180c3f7639ca30bd80e3566a853e6cb82d9ba7f664948d336aee578fef835c1eb488835473c0e926b
+  metadata.gz: 874b0b8be17298ed1dbb640b88f97fc5a5b8270caafc0b1755781ed7cd258f5c4cf7b4d640eaa5f5c4f4a8073dcf0f0847ef725daff5e8dff3cb90ec325148c4
+  data.tar.gz: 4aed9114b169470077708e511c6a523d782090f9ee28643fe284ba27fabd5ad2506c1c075d042f7e3c213445c91f543c18874618703017cdb396400643aa7c9d

data/README.md

@@ -38,7 +38,7 @@ makes for leaner and cleaner code.
 
 ### Decide how you want typey to output
 
-Now you'll need to choose the unit typey outputs your values in. You have three
+First you'll need to choose the unit typey outputs your values in. You have three
 choices: `rem`, `em`, or `px`. Each has it's own pros and cons. We don't quite
 have enough space here to go over them so do your research before you jump in.
 Generally speaking, it is actually quite easy to change this value in typey later on.
@@ -47,7 +47,7 @@ Generally speaking, it is actually quite easy to change this value in typey late
 $base-unit: rem;
 ```
 
-Just like in compass Vertical Rhythm we define our base font size and line height.
+Now we define our base font size and line height.
 
 ```sass
 $base-font-size:    16px;
@@ -58,8 +58,8 @@ Ok, so we have our base sizing, now we need to choose the approach that we are g
 to layout type with. We have two options available to us: `rhythm` and `ratio`. Rhythm
 allows us to specify line-heights as a multiple of $base-line-height, where as ratio
 allows us to specify line-heights as a multiple of our elements font-size. Rhythm is
-the default, but for beginners working with web typography the simplest approach
-is to use ratio. Each example below will tell you which method it is for.
+the default, but for many people working with web typography the simplest approach
+is to use ratio.
 
 ```sass
 $line-height-method: rhythm;
@@ -85,7 +85,10 @@ $print-font-size: 12pt;
 
 Ok on to the fun stuff. Defining font sizes! You should define as many of your
 font-sizes as possible inside the `$font-size` map with t-shirt sizes (which are
-easier to keep track of than individual values).
+easier to keep track of than individual values). You can have as many as you like
+and they can be any size you like. Use values taken from a design or roll your
+own using a modular scale. T-shirt sizes are best practice here  but you can use
+any naming scheme you like.
 
 ```sass
 $font-size: (
@@ -97,7 +100,7 @@ $font-size: (
 ```
 
 Now we are all set, we need to define our defaults for the `html` element. We can
-do this as easily as below:
+do this easily:
 
 ```sass
 html {
@@ -105,46 +108,160 @@ html {
 }
 ```
 
-## The quickest way to lay out type. Ever.
+## Define typefaces. New in typey 1.0
 
-### Rhythm method
+Defining typefaces helps us keep track of a few common properties a typeface is
+likely to need, ensuring they are all used together where ever the font is used
+in our stylesheets.
 
-In the example below, we are taking a heading, giving it an extra-large font-size and
-setting it's line-height to be 2x the $base-line-height.
+First you need to define the font families you are going to use as variables.
 
 ```sass
-h1 {
-  @include type-layout(xl, 2);
+$helvetica: Helvetica, sans-serif;
+$garamond: Garamond, serif;
+$monaco: Monaco, monospace, monospace;
+```
+
+Now you can define the $typefaces map. It accepts keyed values and lets you set
+a font-family, letter-spacing, weight and case. It also uses shorthand and it
+does not matter what order you list properties in when using shorthand but best
+practice is [font-family] [letter-spacing] [weight] [case]. You may not want to
+set these all globally, so font-family is the only required value.
+
+```sass
+$typefaces: (
+  sans-serif: (
+    font-family: $helvetica,
+    letter-spacing: -.5px,
+  ),
+  serif: $garamond,
+  monospace: (
+    font-family: $monaco,
+    letter-spacing: .5px,
+    weight: bold,
+    case: uppercase,
+  )
+);
+```
+
+Keep in mind the value for weight, is actually a key in the font-size map. By
+default typey defines these with bold, normal and lighter, but if you need your
+own weights, define the `$font-weight` map yourself.
+
+Embedding a typeface is now really straightforward. You can sleep safe knowing
+that all important defaults for your font have been included where ever the
+typeface has been.
+
+```sass
+h1, h2, h3 {
+  @include typeface(helvetica);
 }
 ```
 
-### Ratio method
+## Advanced typesetting. New in typey 1.0
 
-As we have already set a base ratio, we don't really need to worry about setting
-the line-height as all elements will just inherit from the `html` element.
+You can now define all your font-sizes and line-heights (amongst other things) together
+in a lovely, easy to read (and re-call) map.
+
+```sass
+$typestyles: (
+  heading-1: (
+    font-size: xl,
+    line-height: 1.25,
+    weight: bold,
+    case: uppercase  
+  ),
+  heading-2: (
+    font-size: l,
+    line-height: 1.25,
+    weight: normal
+  )
+)
+```
+
+Or you can use the even easier to express shorthand.
+
+```sass
+$typestyles: (
+  heading-1: xl 1.25 bold uppercase,
+  heading-2: l 1.25 normal
+)
+```
+
+The shorthand is very forgiving. It only requires that the first value be a
+font-size. After that you can enter any combination of line-height, font-weight,
+and case (in any order and all properties are optional). You can also use a
+combination of shorthand and keyed maps if you like!
+
+The value for weight, is also a key from the `$font-weight` map.
+
+To take a defined typestyle and then apply that to an element, all you need do
+is:
 
 ```sass
 h1 {
-  @include font-size(xl);
+  @include typeset(heading-1);
 }
 ```
 
-But if we did want to override the base ratio, we can do it like so:
+In the beta versions of typey, the `type-layout` mixin was used to accomplish
+virtually the same thing. While you can still use this method fine the new
+`typeset` mixin provides a much cleaner solution and will be expanded to support
+things like responsive type in the future.
 
 ```sass
 h1 {
-  @include type-layout(xl, 1.75);
+  @include type-layout(xl, 1.5);
 }
 ```
 
+### Using rhythm line-height
+
+Using rhythm as the $line-height-method, you must make sure to set all line-height
+values as multiples of $base-line-height. As so:
+
+```sass
+$typestyles: (
+  heading-1: (
+    font-size: xl,
+    line-height: 2
+  )
+)
+```
+
+### Using ratio line-height
+
+Using ratio as the $line-height-method, you must make sure to set all line-height
+values as a ratio of the font-size. As so:
+
+```sass
+$typestyles: (
+  heading-1: (
+    font-size: xl,
+    line-height: 1.25
+  )
+)
+```
+
+The advantage of ratio line-height is you can always skip out on adding a line-height
+and just inherit the base ratio.
+
+```sass
+$typestyles: (
+  heading-1: (
+    font-size: xl
+  )
+)
+```
+
 All ratios are outputted as unitless values instead of your base unit.
 
 ## Add some margins or padding
 
-A key component of typography is the space between elements. Typey always uses
-a vertical rhythm approach for margins and padding regardless of whether you are
-using the ratio method. This way margins and padding will always be consistent
-in your stylesheets. You can specify these using the various margin and padding mixins.
+Typey always uses a vertical rhythm approach for margins and padding regardless
+of whether you are using the ratio method. This way margins and padding will
+always be consistent in your stylesheets. You can specify these using the various
+margin and padding mixins.
 
 ```sass
 div {
@@ -199,8 +316,8 @@ li {
 }
 ```
 
-All of typey's mixins accept a px value instead of a multiple/ratio or key from
-the $font-size map.
+All of typey's font-size, line-height, type-layout, margin and padding mixins
+accept a px value instead of a multiple/ratio or key from the $font-size map.
 
 ## Really quite tricky stuff (em as the $base-unit)
 
@@ -224,17 +341,8 @@ h2 {
 }
 ```
 
-If we are using the type-layout() mixin we can do the same thing like below:
-
-```sass
-h2 {
-  @include type-layout(l, 2);
-
-  span {
-    @include type-layout(m, 2, l);
-  }
-}
-```
+As you any nested element can have it's font-size changed, all of typeys sizing
+mixins accept a context argument, including `typeset` and `type-layout`.
 
 ## Extras
 
@@ -286,7 +394,7 @@ h1 {
 
 ## More examples
 
-Grab a copy of the source code (make sure you get the same version you have installed) and look in the examples folder to see typey in action.
+Grab a copy of the source code and look in the examples folder to see typey in action.
 
 ## Reference
 

data/stylesheets/_typey.scss

@@ -5,12 +5,13 @@
 @import "typey/functions/sizers";
 @import "typey/functions/extras";
 @import "typey/functions/depreciated";
-@import "typey/defaults";
 @import "typey/font-stacks";
+@import "typey/defaults";
 @import "typey/mixins/debug";
 @import "typey/mixins/define-type-sizing";
 @import "typey/mixins/font-size";
 @import "typey/mixins/line-height";
+@import "typey/mixins/spacing";
+@import "typey/mixins/typeface";
+@import "typey/mixins/typeset";
 @import "typey/mixins/type-layout";
-@import "typey/mixins/margin";
-@import "typey/mixins/padding";

data/stylesheets/typey/_defaults.scss

@@ -58,6 +58,52 @@ $font-weight: (
   lighter:                 200
 ) !default;
 
+// Declare typefaces
+// These can use any key you like, and allow you to set global letter-spacing,
+// weight and case for font-families. You can then use the
+// font-family mixin to embed your font families anywhere you like.
+//
+// Each key in the $typefaces map can either be a keyed map of settings
+// using any combination of the keys below, or it can be a shorthand list
+// of each property value. When using shorthand it doesn't matter what order
+// each value is arranged in, but best practice is to do it in the order:
+// [font-family] [letter-spacing] [weight] [case]
+//
+// @setting list font-family
+//   Any standard CSS font-family. Use typey pre-written stacks or roll your own.
+// @setting number letter-spacing
+//   CSS letter-spacing. Specified as a px value when font-size is the
+//   $base-font-size.
+// @setting string weight
+//   A key from the $font-weight map. Only specify this if you want a consistant
+//   font-weight used accross the board with this typeface.
+// @setting string case
+//   A value for CSS text-transform. Only specify this if you want a consistant
+//   case used accross the board with this typeface.
+$typefaces: () !default;
+
+// Declare typestyles
+// These can use any key you like, and allow you to set an easily reusable type
+// style. They can be as simple as a font-size and line-height, or can go on
+// to encompass a full range of css type properties.
+//
+// Each key in the $typestyles map can either be a keyed map of settings
+// using any combination of the keys below, or it can be a shorthand list
+// of each property value. When using shorthand for $typestyles, the first value
+// must always be font-size. After that it doesn't matter what order each value
+// is arranged in, but best practice is to do it in the order:
+// [font-size] [line-height] [weight] [case]
+//
+// @setting number|string font-size
+//   A size from the $font-size map or px value to be converted
+// @setting number $x line-height
+//   Multiple of line height, ratio or px value to be converted.
+// @setting string weight
+//   A key from the $font-weight map.
+// @setting string case
+//   A value for CSS text-transform.
+$typestyles: () !default;
+
 // Debug grid
 // Shows horizontal lines for each elements line height.
 $typey-debug:              false !default;
@@ -83,9 +129,42 @@ $typey-debug-color:        #4affff !default;
   @error "$print-font-size must be in pt";
 }
 
-// Warnings for $font-size
+// Warnings for $font-size.
 @each $key, $size in $font-size {
   @if unit($size) != px {
     @error "Size '#{$key}' in $font-size map is not specified in px";
   }
 }
+
+// Warnings for $font-weight.
+$typey-text-transform-properties: none capitalize uppercase lowercase initial inherit;
+@each $property in $typey-text-transform-properties {
+  @if map-has-key($font-weight, $property) {
+    @warn "'#{$property}' used in $font-weight map is a potential value of the text-transform property and will conflict when using typey shorthand";
+  }
+}
+
+// Warnings for $typefaces.
+@each $key, $typeface in $typefaces {
+  @if type-of($typeface) != "map" and type-of($typeface) != "list" {
+    @error "Typeface '#{$key}' in $typefaces map must be a keyed map or a shorthand list in the format: [font-family] [letter-spacing] [weight] [case]";
+  }
+}
+
+// Warnings for $typestyles.
+@each $key, $typestyle in $typestyles {
+  @if type-of($typestyle) != "map" and type-of($typestyle) != "list" {
+    @error "Typestyle '#{$key}' in $typestyles map must be a keyed map or a shorthand list in the format: [font-size] [line-height] [weight] [case]";
+  }
+  @if type-of($typestyle) == "list" {
+    @each $value in $typestyle {
+      @if index($typestyle, $value) == 1 {
+        $allowed-types: "font-size", "px";
+        $type: typey-check-value($value);
+        @if index($allowed-types, $type) == null {
+          @error "Incorrect shorthand format used in '#{$key}' in $typestyles map: [font-size] must appear first";
+        }
+      }
+    }
+  }
+}

data/stylesheets/typey/_font-stacks.scss

@@ -1,11 +1,4 @@
 // 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, monospace;
-
-// Specific font stacks.
-$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;
-$monaco-stack:        Monaco, Consolas, "Lucida Console", monospace, monospace;
-$trebuchet-ms-stack:  "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
+$serif-stack:         "Calisto MT", "Book Antiqua", serif !default;
+$sans-serif-stack:    "Helvetica Neue", Helvetica, sans-serif !default;
+$monospace-stack:     Consolas, "Lucida Console", monospace, monospace !default;

data/stylesheets/typey/functions/_depreciated.scss

@@ -10,7 +10,7 @@
 // @return string
 //   The selected font-weight.
 @function output-unit($number) {
-  @warn "output-unit() is depreciated. Please use typey-output-in-base-unit() instead.";
+  @warn "output-unit() is depreciated. Please use typey-output-in-base-unit() instead";
   @return typey-output-in-base-unit($number);
 }
 
@@ -22,7 +22,7 @@
 // @return number
 //   The number without the unit.
 @function strip-unit($number) {
-  @warn "strip-unit() is depreciated. Please use typey-strip-unit() instead.";
+  @warn "strip-unit() is depreciated. Please use typey-strip-unit() instead";
   @return typey-strip-unit($number);
 }
 
@@ -38,7 +38,7 @@
 // @return number
 //   The number converted to the base unit.
 @function convert-unit($number, $context: $base-font-size) {
-  @warn "convert-unit() is depreciated. Please use output-from-px() instead.";
+  @warn "convert-unit() is depreciated. Please use output-from-px() instead";
   @return output-from-px($number, $context);
 }
 
@@ -50,6 +50,6 @@
 // @return string
 //   The selected font-weight.
 @function font-weight($weight) {
-  @warn "font-weight() is depreciated. Please use weight() instead.";
+  @warn "font-weight() is depreciated. Please use weight() instead";
   @return weight($weight);
 }

data/stylesheets/typey/functions/_extras.scss

@@ -11,11 +11,11 @@
       @return map-get($font-weight, $weight);
     }
     @else {
-      @error "'#{$weight}' not found in $font-weight map.";
+      @error "'#{$weight}' not found in $font-weight map";
     }
   }
   @else {
-    @error "Weight specified for weight() is not a string.";
+    @error "Weight specified for weight() is not a string";
   }
 }
 

data/stylesheets/typey/functions/_helpers.scss

@@ -6,6 +6,9 @@
 // @return number
 //   The number with the base unit
 @function typey-output-in-base-unit($number) {
+  @if $number == 0 {
+    @return 0;
+  }
   @if $base-unit == rem {
     @return $number * 1rem;
   }
@@ -27,6 +30,9 @@
 // @return number
 //   The number with the base unit
 @function typey-output-in-unit($number, $unit: $base-unit) {
+  @if $number == 0 {
+    @return 0;
+  }
   @if $unit == rem {
     @return $number * 1rem;
   }

data/stylesheets/typey/functions/_sizers.scss

@@ -34,7 +34,7 @@
 //   line-height: line-height(1.5);
 //
 // @param number $x
-//   Multiple of line height to be used, px value to be converted, or ratio of
+//   Multiple of $base-line-height to be used, px value to be converted, or ratio of
 //   font-size.
 // @param number|string $context
 //   (optional) Only used if em is the $base-unit. The value of the
@@ -58,26 +58,26 @@
   }
 }
 
-// Generate a value to be used as margin from either:
+// Generate a value to be used as some form of height or spacing from either:
 //   a) a multiple of $base-line-height
 //   b) a static px value
 //
 // Example usage with multiple:
-//   line-height: line-height(2);
+//   height: spacing(2);
 // Example usage with static value:
-//   line-height: line-height(18px);
+//   margin-bottom: spacing(18px);
 //
 // @param number $x
-//   Multiple of line height to be used or px value to be converted.
+//   Multiple of $base-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 px.
 //
 // @return number
-//   The calculated height in $base-unit.
-@function margin($x, $context: $base-font-size) {
-  $allowed-types: "multiplier", "px";
+//   The calculated spacing in $base-unit.
+@function spacing($x, $context: $base-font-size) {
+  $allowed-types: "multiplier", "px", "auto";
   $type: typey-validator($x, $allowed-types);
   @if $type == "multiplier" {
     @return output-from-multiplier($x, $context);
@@ -85,33 +85,7 @@
   @if $type == "px" {
     @return output-from-px($x, $context);
   }
-}
-
-// Generate a value to be used as padding from either:
-//   a) a multiple of $base-line-height
-//   b) a static px value
-//
-// Example usage with multiple:
-//   line-height: line-height(2);
-// Example usage with static value:
-//   line-height: line-height(18px);
-//
-// @param number $x
-//   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 px.
-//
-// @return number
-//   The calculated height in $base-unit.
-@function padding($x, $context: $base-font-size) {
-  $allowed-types: "multiplier", "px";
-  $type: typey-validator($x, $allowed-types);
-  @if $type == "multiplier" {
-    @return output-from-multiplier($x, $context);
-  }
-  @if $type == "px" {
-    @return output-from-px($x, $context);
+  @if $type == "auto" {
+    @return auto;
   }
 }

data/stylesheets/typey/functions/_validators.scss

@@ -24,6 +24,9 @@
     }
   }
   @if type-of($x) == "string" {
+    @if $x == "auto" {
+      @return "auto";
+    }
     @if map-has-key($font-size, $x) {
       @return "font-size";
     }
@@ -34,13 +37,15 @@
   @if type-of($x) == "list" {
     @if list-separator($x) == space {
       @each $value in $x {
-        @if type-of($value) == "number" {
-          @if not unitless($value) and unit($value) != px {
-            @error "All units must be expressed in px";
+        @if type-of($value) == "number" or $value == "auto" {
+          @if type-of($value) == "number" {
+            @if not unitless($value) and unit($value) != px {
+              @error "All units must be expressed in px";
+            }
           }
         }
         @else {
-          @error "Values specified inside lists must be a number";
+          @error "Values specified inside lists must be a number or 'auto'";
         }
       }
       @return "list";

data/stylesheets/typey/mixins/_line-height.scss

@@ -20,6 +20,4 @@
     }
   }
   line-height: line-height($x, $context);
-
-  @include typey-debug-grid($x, $context);
 }

data/stylesheets/typey/mixins/_spacing.scss

@@ -0,0 +1,89 @@
+// Define spacing (with fallbacks).
+//
+// @param string $type
+//   The type of spacing: margin, padding, margin-top, etc.
+// @param number|list|string $spacing
+//   Multiple of $base-line-height to be used or px value to be converted.
+//   Can be a SASS list using the same parameters as the CSS margin property:
+//   i.e. top right bottom left, 1 0 2 0.
+//   Can also be the string "auto" when used as margin.
+// @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 px.
+@mixin spacing($property, $spacing, $context: $base-font-size) {
+  $allowed-types: "multiplier", "px", "list";
+  $type: typey-validator($spacing, $allowed-types);
+
+  $px-fallback-list: ();
+  $converted-list: ();
+
+  @each $x in $spacing {
+    @if $base-unit == rem {
+      $allowed-types: "multiplier", "px", "auto";
+      $type: typey-validator($x, $allowed-types);
+      @if $type == "multiplier" {
+        $spacing: $x * $base-line-height;
+        $px-fallback-list: join($px-fallback-list, $spacing, $separator: space);
+      }
+      @if $type == "px" {
+        $px-fallback-list: join($px-fallback-list, $x, $separator: space);
+      }
+      @if $type == "auto" {
+        $px-fallback-list: join($px-fallback-list, $x, $separator: space);
+      }
+    }
+    $spacing: spacing($x, $context);
+    $converted-list: join($converted-list, $spacing, $separator: space);
+  }
+
+  @if $base-unit == rem {
+    @if $rem-fallback == true {
+      #{$property}: $px-fallback-list;
+    }
+  }
+  #{$property}: $converted-list;
+}
+
+// Wrapper mixins for various spacing properties.
+// These can be used to provide easily sized spacing in the base unit.
+//
+// @param number|list|string $x
+//   Multiple of $base-line-height to be used or px value to be converted.
+//   Can be a SASS list using the same parameters as the CSS margin property:
+//   i.e. top right bottom left, 1 0 2 0.
+//   Can also be the string "auto" when used as margin.
+// @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 px.
+@mixin margin($x, $context: $base-font-size) {
+  @include spacing(margin, $x, $context);
+}
+@mixin margin-top($x, $context: $base-font-size) {
+  @include spacing(margin-top, $x, $context);
+}
+@mixin margin-bottom($x, $context: $base-font-size) {
+  @include spacing(margin-bottom, $x, $context);
+}
+@mixin margin-left($x, $context: $base-font-size) {
+  @include spacing(margin-left, $x, $context);
+}
+@mixin margin-right($x, $context: $base-font-size) {
+  @include spacing(margin-right, $x, $context);
+}
+@mixin padding($x, $context: $base-font-size) {
+  @include spacing(padding, $x, $context);
+}
+@mixin padding-top($x, $context: $base-font-size) {
+  @include spacing(padding-top, $x, $context);
+}
+@mixin padding-bottom($x, $context: $base-font-size) {
+  @include spacing(padding-bottom, $x, $context);
+}
+@mixin padding-left($x, $context: $base-font-size) {
+  @include spacing(padding-left, $x, $context);
+}
+@mixin padding-right($x, $context: $base-font-size) {
+  @include spacing(padding-right, $x, $context);
+}

data/stylesheets/typey/mixins/_type-layout.scss

@@ -8,48 +8,8 @@
 //   (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.
-@mixin type-layout($size, $line-height: $base-line-height-ratio, $context: $size) {
-  $allowed-types-size: "font-size", "px";
-  $type-size: typey-validator($size, $allowed-types-size);
-
-  $allowed-types-lh: "multiplier", "px";
-  $type-lh: typey-validator($line-height, $allowed-types-lh);
-
-  @if $base-unit == rem {
-    @if $rem-fallback == true {
-      @if $type-size == "font-size" {
-        $map-size: map-get($font-size, $size);
-        font-size: $map-size;
-      }
-      @if $type-size == "px" {
-        font-size: $size;
-      }
-    }
-    @if $rem-fallback {
-      @if $type-lh == "multiplier" and $line-height-method == "rhythm" {
-        line-height: $line-height * $base-line-height;
-      }
-      @if $type-lh == "px" {
-        line-height: $line-height;
-      }
-    }
-  }
-
-  @if $base-unit == rem or $base-unit == px {
-    font-size: font-size($size);
-    line-height: line-height($line-height, $context);
-  }
-
-  @if $base-unit == em {
-    @if $size == $context {
-      font-size: font-size($size, $base-font-size);
-      line-height: line-height($line-height, $size);
-    }
-    @else {
-      font-size: font-size($size, $context);
-      line-height: line-height($line-height, $size);
-    }
-  }
-
-  @include typey-debug-grid($line-height, $context);
+@mixin type-layout($size, $line-height, $context: $base-font-size) {
+  @include font-size($size, $context);
+  @include line-height($line-height, $size);
+  @include typey-debug-grid($line-height, $size);
 }

data/stylesheets/typey/mixins/_typeface.scss

@@ -0,0 +1,79 @@
+// Embed a typeface.
+//
+// @param string $typeface
+//   A font family from the $typefaces map.
+@mixin typeface($typeface) {
+  $typeface-name: $typeface;
+  $typeface: map-get($typefaces, $typeface);
+
+  $font-family: false;
+  $letter-spacing: false;
+  $weight: false;
+  $case: false;
+
+  // Assign values to variables when $typeface is a keyed map.
+  @if type-of($typeface) == "map" {
+    @if map-has-key($typeface, font-family) {
+      $font-family: map-get($typeface, font-family);
+    }
+    @if map-has-key($typeface, letter-spacing) {
+      $letter-spacing: map-get($typeface, letter-spacing);
+    }
+    @if map-has-key($typeface, weight) {
+      $weight: map-get($typeface, weight);
+    }
+    @if map-has-key($typeface, case) {
+      $case: map-get($typeface, case);
+    }
+  }
+
+  // Assign values to variables when $typeface is shorthand.
+  @if type-of($typeface) == "list" {
+    @if (list-separator($typeface) == "comma") {
+      // This shorthand is just a list of fonts.
+      $font-family: $typeface;
+    }
+    @else {
+      @each $value in $typeface {
+        // This is a font-family.
+        @if type-of($value) == "list" {
+          $font-family: $value;
+        }
+        // This is a letter-spacing value.
+        @if type-of($value) == "number" {
+          $letter-spacing: $value;
+        }
+        // This is a font-weight value.
+        @if map-has-key($font-weight, $value) {
+          $weight: $value;
+        }
+        // This is a case value.
+        @if type-of($value) == "string" and not(map-has-key($font-weight, $value)) {
+          $case: $value;
+        }
+      }
+    }
+  }
+
+  // Output properties.
+  @if $font-family {
+    font-family: $font-family;
+  }
+  @else {
+    @error "Typeface '#{$typeface-name}' does not have a font-family";
+  }
+  @if $letter-spacing {
+    @if ($letter-spacing == 0) {
+      letter-spacing: 0;
+    }
+    @else {
+      letter-spacing: calculate-em-px($letter-spacing, $base-font-size);
+    }
+  }
+  @if $weight {
+    font-weight: weight($weight);
+  }
+  @if $case {
+    text-transform: $case;
+  }
+}

data/stylesheets/typey/mixins/_typeset.scss

@@ -0,0 +1,73 @@
+// Typeset your type.
+//
+// @param string $typestyle
+//   A type style from the $typestyles map.
+// @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 px.
+@mixin typeset($typestyle, $context: $base-font-size) {
+  $typestyle: map-get($typestyles, $typestyle);
+
+  $font-size: false;
+  $line-height: false;
+  $weight: false;
+  $case: false;
+
+  // Assign values to variables when $typestyle is a keyed map.
+  @if type-of($typestyle) == "map" {
+    @if map-has-key($typestyle, font-size) {
+      $font-size: map-get($typestyle, font-size);
+    }
+    @if map-has-key($typestyle, line-height) {
+      $line-height: map-get($typestyle, line-height);
+    }
+    @if map-has-key($typestyle, weight) {
+      $weight: map-get($typestyle, weight);
+    }
+    @if map-has-key($typestyle, case) {
+      $case: map-get($typestyle, case);
+    }
+  }
+
+  // Assign values to variables when $typestyle is shorthand.
+  @if type-of($typestyle) == "list" {
+    @each $value in $typestyle {
+      // The first value is always font-size.
+      @if index($typestyle, $value) == 1 {
+        $font-size: $value;
+      }
+      // This is a line-height value.
+      @if type-of($value) == "number" and not(index($typestyle, $value) == 1) {
+        $line-height: $value;
+      }
+      // This is a font-weight value.
+      @if map-has-key($font-weight, $value) {
+        $weight: $value;
+      }
+      // This is a case value.
+      @if type-of($value) == "string" and not(index($typestyle, $value) == 1) {
+        $case: $value;
+      }
+    }
+  }
+
+  // Output properties.
+  @if $font-size {
+    @include font-size($font-size, $context);
+  }
+  @if $line-height {
+    @include typey-debug-grid($line-height, $font-size);
+    @include line-height($line-height, $font-size);
+  }
+  @else {
+    // Using default line-height so set debug grid accordingly.
+    @include typey-debug-grid($base-line-height, $font-size);
+  }
+  @if $weight {
+    font-weight: weight($weight);
+  }
+  @if $case {
+    text-transform: $case;
+  }
+}

data/typey.gemspec

@@ -8,8 +8,8 @@ Gem::Specification.new do |spec|
   spec.homepage     = 'http://github.com/jptaranto/typey'
   spec.rubyforge_project =
 
-  spec.version      = '1.0.0.beta.9'
-  spec.date         = '2016-04-04'
+  spec.version      = '1.0.0'
+  spec.date         = '2016-04-21'
   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.9
+  version: 1.0.0
 platform: ruby
 authors:
 - Jack Taranto
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-04-04 00:00:00.000000000 Z
+date: 2016-04-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -48,9 +48,10 @@ files:
 - stylesheets/typey/mixins/_define-type-sizing.scss
 - stylesheets/typey/mixins/_font-size.scss
 - stylesheets/typey/mixins/_line-height.scss
-- stylesheets/typey/mixins/_margin.scss
-- stylesheets/typey/mixins/_padding.scss
+- stylesheets/typey/mixins/_spacing.scss
 - stylesheets/typey/mixins/_type-layout.scss
+- stylesheets/typey/mixins/_typeface.scss
+- stylesheets/typey/mixins/_typeset.scss
 - typey.gemspec
 homepage: http://github.com/jptaranto/typey
 licenses:
@@ -67,11 +68,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
-rubyforge_project: 1.0.0.beta.9
+rubyforge_project: 1.0.0
 rubygems_version: 2.4.6
 signing_key: 
 specification_version: 4

data/stylesheets/typey/mixins/_margin.scss

@@ -1,146 +0,0 @@
-// Define margin (with fallback).
-// This is only necessary to use if you want to provide fallbacks when you are
-// using rem as $base-unit.
-//
-// @param number|list $x
-//   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 px.
-@mixin margin($list, $context: $base-font-size) {
-  $allowed-types: "multiplier", "px", "list";
-  $type: typey-validator($list, $allowed-types);
-
-  $px-list: ();
-  $converted-list: ();
-
-  @each $x in $list {
-    @if $base-unit == rem {
-      $allowed-types: "multiplier", "px";
-      $type: typey-validator($x, $allowed-types);
-      @if $type == "multiplier" {
-        $margin: $x * $base-line-height;
-        $px-list: join($px-list, $margin, $separator: space);
-      }
-      @if $type == "px" {
-        $px-list: join($px-list, $x, $separator: space);
-      }
-    }
-    $margin: margin($x, $context);
-    $converted-list: join($converted-list, $margin, $separator: space);
-  }
-
-  @if $base-unit == rem {
-    @if $rem-fallback == true {
-      margin: $px-list;
-    }
-  }
-  margin: $converted-list;
-}
-
-// Define margin-top (with fallback).
-// This is only necessary to use if you want to provide fallbacks when you are
-// using rem as $base-unit.
-//
-// @param number $x
-//   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 px.
-@mixin margin-top($x, $context: $base-font-size) {
-  $allowed-types: "multiplier", "px";
-  $type: typey-validator($x, $allowed-types);
-  @if $base-unit == rem {
-    @if $rem-fallback == true {
-      @if $type == "multiplier" {
-        margin-top: $x * $base-line-height;
-      }
-      @if $type == "px" {
-        margin-top: $x;
-      }
-    }
-  }
-  margin-top: margin($x, $context);
-}
-
-// Define margin-bottom (with fallback).
-// This is only necessary to use if you want to provide fallbacks when you are
-// using rem as $base-unit.
-//
-// @param number $x
-//   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 px.
-@mixin margin-bottom($x, $context: $base-font-size) {
-  $allowed-types: "multiplier", "px";
-  $type: typey-validator($x, $allowed-types);
-  @if $base-unit == rem {
-    @if $rem-fallback == true {
-      @if $type == "multiplier" {
-        margin-bottom: $x * $base-line-height;
-      }
-      @if $type == "px" {
-        margin-bottom: $x;
-      }
-    }
-  }
-  margin-bottom: margin($x, $context);
-}
-
-// Define margin-left (with fallback).
-// This is only necessary to use if you want to provide fallbacks when you are
-// using rem as $base-unit.
-//
-// @param number $x
-//   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 px.
-@mixin margin-left($x, $context: $base-font-size) {
-  $allowed-types: "multiplier", "px";
-  $type: typey-validator($x, $allowed-types);
-  @if $base-unit == rem {
-    @if $rem-fallback == true {
-      @if $type == "multiplier" {
-        margin-left: $x * $base-line-height;
-      }
-      @if $type == "px" {
-        margin-left: $x;
-      }
-    }
-  }
-  margin-left: margin($x, $context);
-}
-
-// Define margin-right (with fallback).
-// This is only necessary to use if you want to provide fallbacks when you are
-// using rem as $base-unit.
-//
-// @param number $x
-//   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 px.
-@mixin margin-right($x, $context: $base-font-size) {
-  $allowed-types: "multiplier", "px";
-  $type: typey-validator($x, $allowed-types);
-  @if $base-unit == rem {
-    @if $rem-fallback == true {
-      @if $type == "multiplier" {
-        margin-right: $x * $base-line-height;
-      }
-      @if $type == "px" {
-        margin-right: $x;
-      }
-    }
-  }
-  margin-right: margin($x, $context);
-}

data/stylesheets/typey/mixins/_padding.scss

@@ -1,146 +0,0 @@
-// Define padding (with fallback).
-// This is only necessary to use if you want to provide fallbacks when you are
-// using rem as $base-unit.
-//
-// @param number|list $x
-//   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 px.
-@mixin padding($list, $context: $base-font-size) {
-  $allowed-types: "multiplier", "px", "list";
-  $type: typey-validator($list, $allowed-types);
-
-  $px-list: ();
-  $converted-list: ();
-
-  @each $x in $list {
-    @if $base-unit == rem {
-      $allowed-types: "multiplier", "px";
-      $type: typey-validator($x, $allowed-types);
-      @if $type == "multiplier" {
-        $padding: $x * $base-line-height;
-        $px-list: join($px-list, $padding, $separator: space);
-      }
-      @if $type == "px" {
-        $px-list: join($px-list, $x, $separator: space);
-      }
-    }
-    $padding: padding($x, $context);
-    $converted-list: join($converted-list, $padding, $separator: space);
-  }
-
-  @if $base-unit == rem {
-    @if $rem-fallback == true {
-      padding: $px-list;
-    }
-  }
-  padding: $converted-list;
-}
-
-// Define padding-top (with fallback).
-// This is only necessary to use if you want to provide fallbacks when you are
-// using rem as $base-unit.
-//
-// @param number $x
-//   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 px.
-@mixin padding-top($x, $context: $base-font-size) {
-  $allowed-types: "multiplier", "px";
-  $type: typey-validator($x, $allowed-types);
-  @if $base-unit == rem {
-    @if $rem-fallback == true {
-      @if $type == "multiplier" {
-        padding-top: $x * $base-line-height;
-      }
-      @if $type == "px" {
-        padding-top: $x;
-      }
-    }
-  }
-  padding-top: padding($x, $context);
-}
-
-// Define padding-bottom (with fallback).
-// This is only necessary to use if you want to provide fallbacks when you are
-// using rem as $base-unit.
-//
-// @param number $x
-//   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 px.
-@mixin padding-bottom($x, $context: $base-font-size) {
-  $allowed-types: "multiplier", "px";
-  $type: typey-validator($x, $allowed-types);
-  @if $base-unit == rem {
-    @if $rem-fallback == true {
-      @if $type == "multiplier" {
-        padding-bottom: $x * $base-line-height;
-      }
-      @if $type == "px" {
-        padding-bottom: $x;
-      }
-    }
-  }
-  padding-bottom: padding($x, $context);
-}
-
-// Define padding-left (with fallback).
-// This is only necessary to use if you want to provide fallbacks when you are
-// using rem as $base-unit.
-//
-// @param number $x
-//   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 px.
-@mixin padding-left($x, $context: $base-font-size) {
-  $allowed-types: "multiplier", "px";
-  $type: typey-validator($x, $allowed-types);
-  @if $base-unit == rem {
-    @if $rem-fallback == true {
-      @if $type == "multiplier" {
-        padding-left: $x * $base-line-height;
-      }
-      @if $type == "px" {
-        padding-left: $x;
-      }
-    }
-  }
-  padding-left: padding($x, $context);
-}
-
-// Define padding-right (with fallback).
-// This is only necessary to use if you want to provide fallbacks when you are
-// using rem as $base-unit.
-//
-// @param number $x
-//   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 px.
-@mixin padding-right($x, $context: $base-font-size) {
-  $allowed-types: "multiplier", "px";
-  $type: typey-validator($x, $allowed-types);
-  @if $base-unit == rem {
-    @if $rem-fallback == true {
-      @if $type == "multiplier" {
-        padding-right: $x * $base-line-height;
-      }
-      @if $type == "px" {
-        padding-right: $x;
-      }
-    }
-  }
-  padding-right: padding($x, $context);
-}