0.0.1 • Published 4 years ago
adlez v0.0.1
adlez
opinionated atomic way to compose css styles
Instalation
yarn add adlez
Usage
import adlez, { color, rgb, hover } from 'adlez'
const el = document.createElement('div')
el.className = adlez(color(rgb(255, 0, 0)), hover(color(rgb(0, 255, 255))))
import React from 'react'
import adlez, { color, bgColor, rgb, rgba, hover } from 'adlez'
const btn = adlez(
color(rgb(255, 0, 0)),
bgColor(rgba(255, 255, 0, 0.4))
hover(
color(rgb(0, 255, 255))
bgColor(rgba(255, 255, 0, 1))
)
)
function Button() {
return <button className={btn}>Button</button>
}
export default Button
Planned features
- all css proprieties
- cache generated style
- media query support
- theme for style (dynamic styling)
- some refactoring and tests (MUST! 😫)
- hook for react components