https://github.com/cdonohue/benefit

✨ Utility CSS-in-JS library that provides a set of low-level, configurable, ready-to-use styles
https://github.com/cdonohue/benefit

css css-in-js design emotion jsx system tailwindcss utility-classes

Last synced: 9 days ago
JSON representation

✨ Utility CSS-in-JS library that provides a set of low-level, configurable, ready-to-use styles

• Host: GitHub
• URL: https://github.com/cdonohue/benefit
• Owner: cdonohue
• License: mit
• Created: 2019-03-13T16:21:17.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T08:52:45.000Z (almost 2 years ago)
• Last Synced: 2024-05-16T15:43:16.659Z (6 months ago)
• Topics: css, css-in-js, design, emotion, jsx, system, tailwindcss, utility-classes
• Language: JavaScript
• Homepage: https://benefit.netlify.com
• Size: 5.18 MB
• Stars: 51
• Watchers: 4
• Forks: 5
• Open Issues: 82
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Benefit Logo](benefit-logo.svg)](https://benefit.netlify.com)

---

## Style web applications using generated utility classes

`benefit` is a utility CSS-in-JS library that provides a set of low-level, configurable, ready-to-use styles.

[Documentation](https://benefit.netlify.com)

`benefit` is framework agnostic, use `benefit-react` for additional enhancements for React.

---

### React-specific

#### Install dependencies

Add `benefit-react` to your project.

```bash

yarn add benefit-react

```

#### Setup transpilation

Set the jsx pragma at the top of your source file where you intend to use `benefit-react`.

> Similar to a comment containing linter configuration, this configures the jsx babel plugin to use the `jsx` function instead of `React.createElement`.

>

> [JSX Pragma Documentation](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#pragma)

Import the `jsx` function from `benefit-react`

```js

/** @jsx jsx */

import { jsx } from "benefit-react"

```

Now, you're free to use any available [utility classes](https://benefit.netlify.com) to style your components

```js

/** @jsx jsx */

import { jsx } from "benefit-react"

function MyComponent() {

  return (

    


      


        Williamsburg stumptown iPhone, gastropub vegan banh mi

        microdosingpost-ironic pok pok +1 bespoke dreamcatcher bushwick brunch.

      

    

  )

}

```


### Framework agnostic

Add `benefit` to your project.

```bash

yarn add benefit

```

Import and use the `createBenefit` function to create your utility classes

```

import { createBenefit } from "benefit"

const { styleWith } = createBenefit()

```

Use `styleWith(...)` to pass in utility classes

```



  ...



```