postcss-type-scale
v1.0.0
Published
PostCSS Plugin to make available a typographic scale in font-size declarations
Downloads
7
Maintainers
Readme
PostCSS plugin that makes available a typographic scale in font-size declarations.
Built for Concise CSS.
Write this:
:root { --type-ratio: 2; }
h6, small { font-size: 1; }
h5 { font-size: 2; }
h4 { font-size: 3; }
h3 { font-size: 4; }
h2 { font-size: 5; }
h1 { font-size: 6; }
.ultraBig { font-size: 20; }
And get this:
:root { --type-ratio: 2; }
h6, small { font-size: 0.5rem; }
h5 { font-size: 1rem; }
h4 { font-size: 2rem; }
h3 { font-size: 4rem; }
h2 { font-size: 8rem; }
h1 { font-size: 16rem; }
.ultraBig { font-size: 262144rem; }
Installation
$ npm install postcss-type-scale
Usage
postcss([ require('postcss-type-scale') ])
See PostCSS docs for examples for your environment.
Options
rootSelector
- Type:
string
- Default:
:root
The selector where the type scale is defined. You can use html
or body
. It will use :root
by default.
typeRatio
- Type:
number
- Default:
1.2
The default ratio to be used. Used only when a ratio definition in the root element is not found.
ratioProperty
- Type:
string
- Default:
--type-ratio
Name of the custom property that contains the ratio.
License
MIT - James Kolce