When we say "CSS for everyone"
Learn | Build | Code | Test
A UI based CSS code generator for all expert level
This is a fully flexible css builder based on React
The basic infrastructure is created and currently all attributes starting with "a", "c", "d", "e", and "j" has been incorporated. 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
- 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
- Out of the box there are two themes
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
- Clone the repo
- Navigate to directory
- Open terminal
- Install Packages
yarn
- Start the library
yarn start
- Navigate to inner folder called
example
- Install Packages
yarn
- Start the library
yarn start
- Your application is running on 3000
http://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 ๐ป ๐ง ๐ |
This project follows the all-contributors specification. Contributions of any kind welcome!