Code Monkey home page Code Monkey logo

carlyraejepsenstan / css-builder Goto Github PK

View Code? Open in Web Editor NEW

This project forked from koustov/css-builder

0.0 0.0 0.0 842 KB

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.

Home Page: https://css-builder.vercel.app

License: MIT License

HTML 5.97% JavaScript 75.60% Shell 0.09% CSS 18.34%

css-builder's Introduction

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

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

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

Features

  • 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

๐Ÿคฒ 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

  • 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?

Usage

  • Form customization
  • Tutorial
  • Learning
  • Rapid building

Install ๐Ÿ™

npm install react-ui-css-builder

or

yarn add react-ui-css-builder

Run it locally

  1. Clone the repo
  2. Navigate to directory
  3. Open terminal
  4. 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

  • Pending attributes
  • Drag/drop for sequencing

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

๐Ÿ’ป ๐Ÿšง ๐Ÿ‘€

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

css-builder's People

Contributors

aaronzshey avatar allcontributors[bot] avatar atapas avatar koustov avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.