accoutrement-scale

Sass size & scale management tools by OddBird. Gather all your sizes into a single map, generate new sizes based on modular scales or arbitrary functions, and access them by name.

More Accoutrement Tools

• Init provides light-weight browser-normalization.
• Color provides color-palette management and contrast-ratio utilities.
• Type provides webfont management tools, and other typography helpers.
• Layout provides layout utilities such as box-sizing, intrinsic ratios, z-index management, named media-queries, and a clearfix.

Quick Start

Install the package with npm or yarn:

npm install accoutrement-scale
yarn add accoutrement-scale

Import the library:

@import '<path-to>/accoutrement-scale/sass/scale';

Establish your palette of ratios (modular scales) and sizes:

$ratios: (
  'my-ratio': 1.25,
);
 
$sizes: (
  // define explicit values
  'root': 24px,
  'icons': 1em,
  'page': 8in,
 
  // reference existing sizes
  'text': 'root'
 
  // apply adjustments and conversions
  // using named-ratios or arbitrary functions
  'rhythm': 'root' ('fifth': 1, 'convert-units': 'rem'),
 
  'h1': 'root' ('my-ratio': 3),
  'h2': 'root' ('my-ratio': 2),
  'h3': 'root' ('my-ratio': 1),
 
  // define calc() output based on existing sizes
  'viewport-relative': calc(%s + %s) ('root', 2vw),
);

Access your named sizes using the size() function, and even convert-units on-the-fly:

.example {
  font-size('text');
  width: size('page', 'px');
}

We can only calculate integer steps along an exponential modular 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),
);