smart-size
Easily convert javascript values to css-friendly format, useful for any css-in-js
library or with styled-components
.
Usage
Install dependency
yarn add smart-size
Or, using npm
:
npm install smart-size
Import package
const style1 = fontSize: lineHeight: height: // { fontSize: '1em', lineHeight: '18px', height: '32px' } const style2 = fontSize: lineHeight: margin: // { fontSize: '2em', lineHeight: '32px', margin: '1em 2em' } const style3 = padding: margin: // { padding: '10px 20px', margin: '1em 0 2em 0' } const style4 = padding: margin: // { padding: '1em 2em 1em 2em', margin: '0 5em 0 3em' }
em
by default
By default, smartSize
uses em
units. I find it convinient to keep layout margins, paddings, positioning and line heights in em
, it helps keeping right vertical rhytm:
const style = height: // 2em margin: // 0 0 1em 0
Using own defaults
It is possible to pass an additional config
to smartSize
function as a second parameter:
const style = fontSize: // 18px
You may also set your own defaults by importing create
function:
const mySmartSize = const style = height: // 64px margin: // 0 0 32px 0
Development
Testing
Run this command to run mocha
tests watcher:
yarn test
Standard style
Use this command to make sure the codestyle fits standard
rules:
yarn lint
Author
Made with 💖 by Alex Ilchenko
License
This project is licensed under the MIT License