This is a fully flexible css builder based on React

Currently completed only subset of attributes for pending items refer git issue section. You are welcome to inject more and make it "full-fledged" css-builder for everyone Currently its a preview build and "0.1.0" will be the first fully fledged version to consume.

Give STAR to encourage me to complete this mammoth task with more energy

Table of Contents

• Demo
• Features
• When do you need it?
• Usage
  • Install
• When do you need it?
• Run it locally
• Supported Elements
• How to use
• Playground
• Items in queue
• Contribution
• License

Visit https://css-builder.vercel.app/

• React based
• Completely UI based
• All CSS attributes supported
• Customizable
• Quick and easy.
• Search attribute
• Categorized attributes
• Theme supported
  • Out of the box there are two themes
    • chalk (default)
    • dark

Who doesn't need motivation? Please give the project a star(⭐) and/or share it in your dev circle.

• You want to learn CSS while playing?
• You want to allow n'th level customization on your web app?
• You want to code CSS rapidly?
• Not sure which attribute to chose?

• Form customization
• Tutorial
• Learning
• Rapid building

npm install react-ui-css-builder

or

yarn add react-ui-css-builder

1. Fork the repo
2. Clone it from your repo
3. Navigate to directory
4. Open terminal
5. Install Packages

yarn

6. Start the library

yarn start

7. Navigate to inner folder called example
8. Install Packages

yarn

9. Start the library

yarn start

10. Your application is running on 3000

https://localhost:3000/

It was frustrating for me when iI was looking for some easy tool to build CSS using UI and couldn't find anything that helps me in the context. So built my own.

Its a HUUUUUUGE list. Will list down in sometime.

Import css-builder component

import { CSSBuilder } from 'react-ui-css-builder'

Just drop it to desired place

<CSSBuilder
  onChange={(a, b, c) => {
    console.log('Value received')
  }}
/>

Visit https://css-builder.vercel.app/

• Pending attributes
• Drag/drop for sequencing

If you understand the importance please feel free to create issue and make pull request

Refer code of conduct

Refer contributing

MIT © Koustov

Thanks goes to these wonderful people (emoji key):

Tapas Adhikary 💻

koustov 💻 🚧 👀

eemike07 💻

Don Jose Mathew 🐛 💻

This project follows the all-contributors specification. Contributions of any kind welcome!