new-typography-scale

Sass size & scale management tools. Based on Accoutrement-scale. Removed superfluous functions and mixins (baseline and font-size). part of Accoutrement suite. Gather all your sizes into a single map, generate new sizes based on modular scales or arbitrary functions, and access them by name.

Quick Start

npm install new-typography-scale

Import the library:

@import 'path/to/new-typography-scale/sass/scale'

Establish your palette of ratios and sizes:

$ratios: (
  'my-ratio': 1.25,
);
 
$sizes: (
  'root': 24px,
  'rhythm': 'root' ('fifth': 1, 'convert-units': 'rem'),
 
  'h1': 'root' ('my-ratio': 3),
  'h2': 'root' ('my-ratio': 2),
  'h3': 'root' ('my-ratio': 1),
 
  'page': 8in,
);

Results will be returned in the units they were defined, but can be converted in the map settings (as above), or on-the-fly using size:

.example {
  // size('page') would return `8in`... 
  width: size('page', 'px');
}

Access your sizes from anywhere, with helpers for setting font-sizes and line-heights:

h1 {
  max-width: size('page');
}

We can only calculate integer steps along an exponential scale, but if you want more power, install MathSass, and we'll let them do the hard math.

$sizes: (
  'complex': 'root' ('my-scale': 1.25),
);