Adaptive Modular Scale
A small javascript helper to get an adaptive modular scale font-size css string. It will interpolate between two modular scales and breakpoints and will return you sizes based on the given modular scales. This package is inspired by this tool by Florian Schulz.
yarn add adaptive-modular-scale npm install adaptive-modular-scale
Usage
;; const Headline = styledh1` `;
The above example will return the following css.
{@) {@) {@) {
ThemeProvider
You can also add an adaptiveModularScale
key to the theme object of your ThemeProvider.
Example
;; const theme = adaptiveModularScale: base: 14 16 ratio: 12 178 width: 320 960 breakpoints: 8 ; // If you added the modular scale values to the ThemeProvider// you dont have to pass it down every timeconst Headline = styledh1` `; const App = <ThemeProvider theme=theme> <Headline>An adaptive modular scale sized headline</Headline> </ThemeProvider>;
Custom css property
By default adaptive-modular-scale
uses font-size
as the css property. But you can also change the property by adding a property key to your config object.
Example
;; const Headline = styledh1` `;
Options
step
number
| required
The step on the modular scale
config
object
| required
config.base
[number, number]
| required
Array of minimum and maximum base size of modular scale.
config.ratio
[number, number]
| required
Array of minimum and maximum ratio of modular scale.
config.width
[number, number]
| required
Array of two screen widths in px. Between these values the modular scale will interpolate between both scales based on screen width.
config.breakpoints
number
| required
Number of breakpoints between the two given screen widths which will be rendered to the css string.
config.corrections
{ [step]: [number, number] }
| optional
Add optional corrections array with steps as keys.
const corrections = // This will correct the minimal size of step "0" by -2px // and the maximum size by +1px 0: -2 1;
config.lineHeights
{ [step]: [number, number] }
| optional
Add optional lineHeights array with steps as keys.
config.property
string
| optional | default: "font-size"
Add optional css property if you want to use adaptive modular scale for another property than font-size.
Additional methods
adaptive-modular-scale
also exports a default modular scale method.
;; const base = 16;const ratio = 16; const Headline = styledh1` font-size: px;`;