type-director 0.8 → 0.9

data/stylesheets/type-director/{_build-scale.scss → _scale.scss}

@@ -1,9 +1,9 @@
 
 // Create a modular scale. Returns a list of values.
 
-@function td-build-scale($opts: ()) {
+@function td-scale($opts: ()) {
 
-	// Extend default opts
+	// Extend default opts with passed opts.
 	$opts: map-merge((
 		"base-value": 16px,
 		"max-value": 28px,
@@ -16,23 +16,14 @@
 	$numb-larger-values: map-get($opts, "numb-larger-values");
 	$numb-smaller-values: map-get($opts, "numb-smaller-values");
 
-	// Build the scale.
+	// The object we'll return.
 	$scale: ();
 
 	// The ratio we'll use to calculate the missing sizes.
 	$scaling-ratio: nth-root($max-value / $base-value, $numb-larger-values); 
 
-	// Calculate and add smaller values to the scale.
-	@for $i from -$numb-smaller-values through -1 {
-		$size: $base-value * power($scaling-ratio, $i);
-		$scale: append($scale, $size);
-	}
-
-	// Add the base value to the scale.
-	$scale: append($scale, $base-value);
-
-	// Calculate and add larger values to the scale.
-	@for $i from 1 through ($numb-larger-values) {
+	// Calculate and add values to the scale.
+	@for $i from -$numb-smaller-values through $numb-larger-values {
 		$size: $base-value * power($scaling-ratio, $i);
 		$scale: append($scale, $size);
 	}

data/stylesheets/type-director/{_build-font-scale.scss → _type-scale.scss}

@@ -1,10 +1,10 @@
  
-// Create a modular font scale. 
-// Returns a nested list of font-size and line-height values.
+// Returns a scale of a map of proportionally-related type sizes. 
+// Each size is composed of a font-size and line-height value.
 
-@function td-build-font-scale($opts: ()) {
+@function td-type-scale($opts: ()) {
 
-	// Extend default opts
+	// Extend default opts with passed opts.
 	$opts: map-merge((
 		"base-font-size": 16px,
 		"base-line-height": 1.5,
@@ -15,7 +15,7 @@
 	), $opts);
 
 	// Create font-size scale
-	$font-size-scale: td-build-scale((
+	$font-size-scale: td-scale((
 		"base-value": map-get($opts, "base-font-size"),
 		"max-value": map-get($opts, "max-font-size"),
 		"numb-smaller-values": map-get($opts, "numb-smaller-sizes"),
@@ -23,13 +23,14 @@
 	));
 
 	// Create line-height scale
-	$line-height-scale: td-build-scale((
+	$line-height-scale: td-scale((
 		"base-value": map-get($opts, "base-line-height"),
 		"max-value": map-get($opts, "max-line-height"),
 		"numb-smaller-values": map-get($opts, "numb-smaller-sizes"),
 		"numb-larger-values": map-get($opts, "numb-larger-sizes")
 	));
 
+	// The object we'll return.
 	$sizes: ();
 	
 	// Pair each size with the correponding font-size 
@@ -52,6 +53,5 @@
 		$sizes: map-merge($sizes, ($name-of-size: $values));
 	}
 
-	$font-scale: map-merge($opts, ("sizes": $sizes));
-	@return $font-scale;
+	@return $sizes;
 }

data/stylesheets/type-director/_type-size.scss

@@ -0,0 +1,193 @@
+
+/******************************************************
+* MIXINS
+******************************************************/
+
+@function td-override-type-size($environment-name, $size, $font-size, $line-height) {
+  	$typography: map-set-deep($typography, ("environments", $environment-name, "sizes", $size, "font-size"), $font-size);
+  	$typography: map-set-deep($typography, ("environments", $environment-name, "sizes", $size, "line-height"), $line-height);
+  	@return $typography;
+}
+
+@function td-get-font-size-adjustment($typeface-name, $opts: ()) {
+
+  	// Extend default opts with passed opts.
+	$opts: map-merge((
+		"uppercase": false,
+		"line-height": "normal"
+	), $opts);
+
+	// Apply font-size adjustment for the font passed.
+	$font-size-adjustment: map-get-deep($typography, "typefaces", $typeface-name, "font-size-adjustment") or 1.00;
+
+	// If uppercase option passed, also apply uppercase adjustment for the font passed.
+	@if map-get($opts, "uppercase") {
+		$uppercase-adjustment: map-get-deep($typography, "typefaces", $typeface-name, "uppercase-adjustment") or 1.00;
+		$font-size-adjustment: $font-size-adjustment * $uppercase-adjustment;
+	}
+
+	@return $font-size-adjustment;
+}
+
+@function td-get-line-height-adjustment($typeface-name, $line-height, $opts: ()) {
+
+  	// Extend default opts with passed opts.
+	$opts: map-merge((
+		"uppercase": false,
+		"line-height": "normal"
+	), $opts);
+
+	// Calculate adjustments.
+	$line-height-adjustment: map-get-deep($typography, "typefaces", $typeface-name, "line-height-adjustment") or 1.00;
+	$font-size-adjustment: td-get-font-size-adjustment($typeface-name, $opts);
+
+	// If using relative line heights, the font-size-adjustment will 
+	// affect the line-height. This removes the unwanted effect.
+	@if unitless($line-height) { 
+		$line-height-adjustment: $line-height-adjustment * (1 / $font-size-adjustment);
+	}
+
+	@return $line-height-adjustment;
+}
+
+
+// Get adjusted font-size for specific font, environment, and size.
+@mixin td-apply-adjusted-font-size($typeface-name, $size, $environment-name, $opts: ()) {
+
+	// Extend default opts with passed opts.
+	$opts: map-merge((
+		"uppercase": false,
+		"line-height": "normal"
+	), $opts);
+	
+	// Default size.
+	$font-size: map-get-deep($typography, "environments", $environment-name, "sizes", $size, "font-size"); 
+
+	// Apply font-size adjustment for the font passed.
+	$font-size-adjustment: td-get-font-size-adjustment($typeface-name, $opts);
+	$font-size: $font-size * $font-size-adjustment;
+
+	// Round final value.
+	$font-size-precision: map-get-deep($typography, "environments", $environment-name, "font-size-precision") or null;
+	@if ($font-size-precision) {
+        $font-size: td-round($font-size, $font-size-precision);
+    } 
+
+	font-size: $font-size; 
+}
+
+
+
+// Get adjusted line-height for specific font, environment, and size.
+@mixin td-apply-adjusted-line-height($typeface-name, $size, $environment-name, $opts: ()) {
+
+	// Extend default opts with passed opts.
+	$opts: map-merge((
+		"uppercase": false,
+		"line-height": "normal"
+	), $opts);
+
+	$line-height: null;
+
+	// Normal line-height associated with environment and size.
+	$normal-line-height: map-get-deep($typography, "environments", $environment-name, "sizes", $size, "line-height");
+
+	// Solid line-height, meaning no space between lines. 
+	// 1.0 if unitless, otherwise equal to font-size.
+	$solid-line-height: if(unitless($normal-line-height), 1.0, $font-size);
+	
+	// Halfway between normal and solid line-height.
+	$tight-line-height: (($normal-line-height - $solid-line-height) / 2) + $solid-line-height;
+
+
+	$line-height-setting: map-get($opts, "line-height");
+	$line-height-adjustment: td-get-line-height-adjustment($typeface-name, $normal-line-height, $opts);
+
+	
+	// Use solid line height, but don't apply adjustment.
+	@if $line-height-setting == "solid" { 
+		$line-height: $solid-line-height;
+
+	// Use tight line-height and apply line-height adjustment.
+	} @else if $line-height-setting == "tight" {
+		$line-height: $tight-line-height * $line-height-adjustment;
+
+	// Use normal line-height and apply line-height adjustment.
+	} @else {
+		$line-height: $normal-line-height * $line-height-adjustment;
+	}
+
+	// Round line-height.
+	$line-height-precision: map-get-deep($typography, "environments", $environment-name, "line-height-precision") or null;
+	@if ($line-height-precision) {
+		$line-height: td-round($line-height, $line-height-precision);
+	}
+
+	line-height: $line-height;
+}
+
+
+
+// Apply styles for a specific font, environment, and size.
+@mixin td-apply-adjusted-type-size($typeface-name, $size, $environment-name, $opts: ()) {
+
+	// Extend default opts with passed opts.
+	$opts: map-merge((
+		"uppercase": false,
+		"line-height": "normal"
+	), $opts);
+
+	@include td-apply-adjusted-font-size($typeface-name, $size, $environment-name, $opts);
+	@include td-apply-adjusted-line-height($typeface-name, $size, $environment-name, $opts);
+}
+
+
+// Apply non-responsive styling. Only the size used for
+// the specified environment will be applied.
+@mixin td-type-size($typeface-name, $size, $environment-name, $opts: ()) {
+	
+	// Extend default opts with passed opts.
+	$opts: map-merge((
+		"uppercase": false,
+		"line-height": "normal"
+	), $opts);
+
+	$media-query: map-get-deep($typography, "environments", $environment-name, "media-query");
+
+	// If media query is null, apply styles w/o media query.
+	@if $media-query == null {
+
+		// Apply general styles.
+		font-family: map-get-deep($typography, "typefaces", $typeface-name, "family");
+
+		@if map-get($opts, "uppercase") {
+			text-transform: uppercase;
+		}
+		
+		@include td-apply-adjusted-type-size($typeface-name, $size, $environment-name, $opts);
+	}
+
+	// Otherwise, apply within media query.
+	@else {
+		@media #{$media-query} {
+			@include td-apply-adjusted-type-size($typeface-name, $size, $environment-name, $opts);
+		} 
+	}
+}
+
+
+// Apply responsive styling. Unique font-size and line-height 
+// will be applied for each environment.
+@mixin td-responsive-type-size($typeface-name, $size: 0, $opts: ()) {
+	
+	// Extend default opts with passed opts.
+	$opts: map-merge((
+		"uppercase": false,
+		"line-height": "normal"
+	), $opts);
+
+	// Apply type size (font-size and line-height) for each environment.
+	@each $environment-name, $environment in map-get($typography, "environments") {
+		@include td-type-size($typeface-name, $size, $environment-name, $opts);
+	}
+}

data/stylesheets/type-director/_typography.scss

@@ -0,0 +1,62 @@
+
+// An comprehensize map defining typography. Composed of multiple
+// environment profiles, each associating a media query with a type
+// scale. Each type scale is composed of proportionally related
+// sizes, themselves composed of a font-size and a line-height.
+
+@function td-typography($opts: ()) {
+
+	// Extend default opts with passed opts.
+	$opts: map-merge((
+		"typefaces": (
+			"georgia": (
+				"family": (Georgia, serif),
+				"font-size-adjustment": 1.00,
+				"line-height-adjustment": 1.00,
+				"uppercase-adjustment": 0.82
+			)
+		),
+		"environments": (
+			"default": (
+				"base-font-size": 16px,
+				"base-line-height": 1.5,
+				"max-font-size": 28px,
+				"max-line-height": 1.35
+			),
+			"tablet": (
+				"media-query": "screen and (min-width: 768px)",
+				"base-font-size": 18px,
+				"base-line-height": 1.6,
+				"max-font-size": 42px,
+				"max-line-height": 1.25
+			)
+		),
+		"numb-smaller-sizes": 1,
+		"numb-larger-sizes": 4
+	), $opts);
+
+	$typefaces: map-get($opts, "typefaces");
+	$environments: ();
+
+	// Create a type environment for each environment.
+	@each $environment-name, $environment-opts in map-get($opts, "environments") {
+
+		// Create environment opts by merging global opts with environment opts
+		$environment-opts: map-merge($environment-opts, (
+			"numb-smaller-sizes": map-get($opts, "numb-smaller-sizes"),
+			"numb-larger-sizes": map-get($opts, "numb-larger-sizes")
+		));
+
+		// Create environment and merge into typography.
+		$environment: td-environment($environment-opts);
+		$environments: map-merge($environments, ($environment-name: $environment));
+	}
+
+	// The object we'll return.
+	$typography: (
+		"typefaces": $typefaces,
+		"environments": $environments
+	);
+
+	@return $typography;
+}

data/templates/project/sass/_typography-config.scss

@@ -1,67 +1,48 @@
 @import "type-director";
 
 /******************************************************
-* FONTS
-******************************************************/
-
-// Default font
-
-$font-georgia: (
-	"family": unquote("Georgia, serif"),
-	"font-size-adjustment": 1.00,
-	"line-height-adjustment": 1.00,
-	"uppercase-adjustment": 0.82
-);
-
-// Additional fonts
-
-$font-verdana: (
-	"family": unquote("Verdana, sans-serif"),
-	"font-size-adjustment": 0.89,
-	"line-height-adjustment": 0.94,
-	"uppercase-adjustment": 0.85
-);
- 
-$font-feather: (
-	"family": unquote("'Feather'"),
-	"font-size-adjustment": 0.95,
-	"line-height-adjustment": 1.00
-);
-
-/******************************************************
-* FONT ROLES
+* TYPOGRAPHY CONFIG
 ******************************************************/
 
-// For simple projects I like to define font-copy, font-heading 
-// and font-icon roles, but this may not always be appropriate.
-
-$font-copy: $font-georgia;
-$font-copy-weight: normal;
+$typography: td-typography((	
 
-$font-heading: $font-verdana;
-$font-heading-weight: bold;
+	// Define your typefaces and any relevant adjustments.
+	"typefaces": (
 
-$font-icon: $font-feather;
-$font-icon-weight: normal;
+		"georgia": (
+			"family": (Georgia, serif),
+			"font-size-adjustment": 1.00,
+			"line-height-adjustment": 1.00,
+			"uppercase-adjustment": 0.82
+		),
 
-/******************************************************
-* TYPOGRAPHY CONFIG
-******************************************************/
+		"verdana": (
+			"family": (Verdana, sans-serif),
+			"font-size-adjustment": 0.89,
+			"line-height-adjustment": 0.94,
+			"uppercase-adjustment": 0.85
+		),
 
-$typography: td-build-typography((	
+		"feather": (
+			"family": ("Feather"),
+			"font-size-adjustment": 1.00,
+			"line-height-adjustment": 1.00,
+			"uppercase-adjustment": 0.82
+		)
+	),
 
-	// Define your font scales and their constraints.
-	"scales": (
+	// Define your environments and their constraints.
+	"environments": (
 
-		// Phone sizes 
-		"default": (
+		// Phone environment
+		"phone": (
 			"base-font-size": 16px,
 			"base-line-height": 1.5,
 			"max-font-size": 28px,
 			"max-line-height": 1.35
 		),
 
-		// Tablet sizes and larger
+		// Tablet and larger environments
 		"tablet": (
 			"media-query": "screen and (min-width: 768px)",
 			"base-font-size": 18px,
@@ -71,8 +52,20 @@ $typography: td-build-typography((
 		)
 	),
 
-	// Other than the base, how many sizes do you need?
-	"numb-smaller-sizes": 1,
+	// Other than the base, how many type sizes do you need?
+	"numb-smaller-sizes": 2,
 	"numb-larger-sizes": 4
 ));
 
+
+/******************************************************
+* TYPEFACE ROLES
+******************************************************/
+
+// It's a good idea to future-proof yourself by 
+// mapping typefaces to more functional names.
+
+$typeface-default: "georgia";
+$typeface-alternate: "verdana";
+$typeface-icon: "feather";
+