koustov / css-builder

CSS Builder is a unique application to learn, adapt, develop and test CSS snippets. It's being developed as a library which means anyone can consume it and provide form customization for their product in real time.
https://css-builder.vercel.app
MIT License
12 stars 8 forks source link
builder css hactoberfest react reactjs

react-ui-css-builder

When we say "CSS for everyone"

Learn | Build | Code | Test

A UI based CSS code generator for all expert level


All Contributors

GitHub watchers GitHub watchers GitHub watchers GitHub watchers

This is a fully flexible css builder based on React

Note

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

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

Features

🤲 Want to Motivate?

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

Many Thanks to all the Stargazers who has supported this project with stars(⭐)

Stargazers repo roster for @koustov/css-builder

When do you need it

Usage

Install 🐙

npm install react-ui-css-builder

or

yarn add react-ui-css-builder

Run it locally

  1. Fork the repo
  2. Clone it from your repo
  3. Navigate to directory
  4. Open terminal
  5. Install Packages
yarn
  1. Start the library
yarn start
  1. Navigate to inner folder called example
  2. Install Packages
yarn
  1. Start the library
yarn start
  1. Your application is running on 3000
http://localhost:3000/

Highlight 🔥

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.

Supported Elements

Its a HUUUUUUGE list. Will list down in sometime.

How to use

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')
  }}
/>

Playground

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

Items in queue

Contribution 🍰

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

Refer code of conduct

Refer contributing

License

MIT © Koustov

Contributors ✨

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!