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:
;const ms = ;
Calculate certain steps, sizes and ratios, while walking up or down on the scale:
// Two steps up from the base // -> { index: 2, value: 20.25, ratio: 1.265625 }value // -> 20.25 // One step downratio // -> 0.8888888888888888 // Get the base // -> { index: 0, value: 16, ratio: 1 }
Values with units
For stylesheets px
, rem
and em
conversion comes handy:
const ms = px // -> "20.25px"rem // -> "1.265625rem"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 unitconst space = // Then we can include space as number of units:px // -> 16pxpx // -> 80pxrem // -> 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.
const steps = /* *[ { 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 = console // -> "18px"console // -> "1.125rem"