accoutrement-scale
v6.0.0
Published
Size and scale helpers for typography and layout.
Downloads
452
Readme
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),
);