style-genie
v0.4.1
Published
A style utility for css-in-js frameworks.
Downloads
116
Maintainers
Readme
Style-genie 🧞♂️🧞♀️
A collection of style utilities for css-in-js frameworks.
Made with typescript and well documented with support for in-editor insights and tooltips.
Badges
Why?
The idea behind this project is to collect and improve on commonly used and often wanted style utilities. It is heavily influenced by the utilities material-ui have in their theme object, but without all the burden that comes with it.
Style-genie's modularized architecture allows you to pick only the functionalities you want and shape them however you like in your app.
It is also meant to have as few dependencies as possible, currently we depend on 0
external non-dev dependencies.
Getting started
npm install style-genie
import {
generateBreakpoint,
generateColor,
generateSpacing,
generateTransform,
generateTransition
} from 'style-genie'
Utilities
The currently offered utilities are:
- Breakpoint: Media query strings generated based on customizable values.
- Color: Gives easy access to custom colors and the ability to manipulate them.
- Spacing: Maintain a coherent spacing calculation throughout the app.
- Transform: Generate multiple transform function strings easily without the need of template strings.
- Transition: Generate transition strings without repetitive typing.