https://github.com/jcquintas/style-genie

A style utility for css-in-js frameworks.
https://github.com/jcquintas/style-genie

Last synced: 28 days ago
JSON representation

A style utility for css-in-js frameworks.

• Host: GitHub
• URL: https://github.com/jcquintas/style-genie
• Owner: JCQuintas
• License: mit
• Created: 2019-10-21T22:28:44.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-08-30T13:26:46.000Z (4 months ago)
• Last Synced: 2024-10-14T17:14:29.761Z (2 months ago)
• Language: TypeScript
• Homepage: https://jcquintas.gitbook.io/style-genie/
• Size: 2.68 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Style-genie 🧞‍♂️🧞‍♀️

A collection of style utilities for css-in-js frameworks.

Made with [typescript](https://github.com/microsoft/TypeScript) and well documented with support for in-editor insights and tooltips.

[Documentation](https://jcquintas.gitbook.io/style-genie/)

## 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](https://github.com/mui-org/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

```bash

npm install style-genie

```

```javascript

import {

  generateBreakpoint,

  generateColor,

  generateSpacing,

  generateTransform,

  generateTransition

} from 'style-genie'

```

## Utilities

The currently offered utilities are:

- **[Breakpoint](./src/breakpoint/readme.md)**: Media query strings generated based on customizable values.

- **[Color](./src/color/readme.md)**: Gives easy access to custom colors and the ability to manipulate them.

- **[Spacing](./src/spacing/readme.md)**: Maintain a coherent spacing calculation throughout the app.

- **[Transform](./src/transform/readme.md)**: Generate multiple transform function strings easily without the need of template strings.

- **[Transition](./src/transition/readme.md)**: Generate transition strings without repetitive typing.