Contents

 
// Create a modular font scale. 
// Returns a nested list of font-size and line-height values.

@function td-build-font-scale($opts: ()) {

	// Extend default opts
	$opts: map-merge((
		"base-font-size": 16px,
		"base-line-height": 1.5,
		"max-font-size": 28px,
		"max-line-height": 1.35,
		"numb-smaller-sizes": 1,
		"numb-larger-sizes": 4
	), $opts);

	// Create font-size scale
	$font-size-scale: td-build-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"),
		"numb-larger-values": map-get($opts, "numb-larger-sizes")
	));

	// Create line-height scale
	$line-height-scale: td-build-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")
	));

	$sizes: ();
	
	// Pair each size with the correponding font-size 
	// and line-height, then add the size to the scale.
	@for $i from -(map-get($opts, "numb-smaller-sizes")) to map-get($opts, "numb-larger-sizes") + 1 {
		
		// Calculate array position in order to lookup sizes in lists.
		$arr-position: $i + map-get($opts, "numb-smaller-sizes") + 1;

		// Key for size
		$name-of-size: $i;

		// Values for size
		$values: (
			"font-size": nth($font-size-scale, $arr-position),
			"line-height": nth($line-height-scale, $arr-position)
		);

		// Add to size array.
		$sizes: map-merge($sizes, ($name-of-size: $values));
	}

	$font-scale: map-merge($opts, ("sizes": $sizes));
	@return $font-scale;
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
type-director-0.8	stylesheets/type-director/_build-font-scale.scss