miniscale
v1.3.1
Published
A tiny package for working with modular scale
Downloads
21
Maintainers
Readme
Miniscale
A tiny package for working with modular scale, that is most useful for meaningful typography.
Installation
npm install miniscale
How to use
Set up your scale with a base (font) size, and a ratio:
import { scale } from 'miniscale';
const ms = scale(16, 1.125);
Calculate certain steps, sizes and ratios, while walking up or down on the scale:
// Two steps up from the base
ms(2) // -> { index: 2, value: 20.25, ratio: 1.265625 }
ms(2).value // -> 20.25
// One step down
ms(-1).ratio // -> 0.8888888888888888
// Get the base
ms(0) // -> { index: 0, value: 16, ratio: 1 }
Values with units
For stylesheets px
, rem
and em
conversion comes handy:
import { withUnits, scale } from 'miniscale'
const ms = withUnits(scale(16, 1.125))
ms(2).px // -> "20.25px"
ms(2).rem // -> "1.265625rem"
ms(2).em // -> "1.265625em"
Multiplier (for spacing)
The ms()
function accepts a second parameter: a multiplier value.
Typography-based spacing is a good use case for this feature:
// Here we choose base font size as main spacing unit
const space = (units) => ms(0, units)
// Then we can include space as number of units:
space(1).px // -> 16px
space(5).px // -> 80px
space(2).rem // -> 2rem
Generating a scale as array
The scale()
function calculates the values on the fly. If you need a static
array of the steps, you can use the scaleArray()
function. It generates an array in the range of min
and max
, that contains all values of each step.
import { scale, scaleArray } from 'miniscale'
const steps = scaleArray(scale(16, 1.125), { min: 14, max: 36 })
/*
*[ { index: -1, value: 14.222222222222221, ratio: 0.8888888888888888 },
* { index: 0, value: 16, ratio: 1 },
* { index: 1, value: 18, ratio: 1.125 },
* { index: 2, value: 20.25, ratio: 1.265625 },
* { index: 3, value: 22.78125, ratio: 1.423828125 },
* { index: 4, value: 25.62890625, ratio: 1.601806640625 },
* { index: 5, value: 28.83251953125, ratio: 1.802032470703125 },
* { index: 6, value: 32.43658447265625, ratio: 2.0272865295410156 } ]
*/
The withUnits()
function can be used here too:
const steps = scaleArray(withUnits(scale(16, 1.125)), { min: 14, max: 36 })
console.log(steps[2].px) // -> "18px"
console.log(steps[2].rem) // -> "1.125rem"