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.

Documentation

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.