{"id":16488036,"url":"https://github.com/koustov/css-builder","last_synced_at":"2025-03-21T07:31:24.332Z","repository":{"id":46533693,"uuid":"407909559","full_name":"koustov/css-builder","owner":"koustov","description":"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.","archived":false,"fork":false,"pushed_at":"2021-12-01T06:22:47.000Z","size":901,"stargazers_count":12,"open_issues_count":15,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-12T13:36:33.972Z","etag":null,"topics":["builder","css","hactoberfest","react","reactjs"],"latest_commit_sha":null,"homepage":"https://css-builder.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/koustov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-18T16:20:39.000Z","updated_at":"2024-07-06T22:52:31.000Z","dependencies_parsed_at":"2022-09-19T03:02:47.049Z","dependency_job_id":null,"html_url":"https://github.com/koustov/css-builder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koustov%2Fcss-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koustov%2Fcss-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koustov%2Fcss-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koustov%2Fcss-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/koustov","download_url":"https://codeload.github.com/koustov/css-builder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221812871,"owners_count":16884716,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["builder","css","hactoberfest","react","reactjs"],"created_at":"2024-10-11T13:36:38.719Z","updated_at":"2024-10-28T09:36:07.560Z","avatar_url":"https://github.com/koustov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n   \u003cp\u003e\n    \u003ch1\u003ereact-ui-css-builder\u003c/h1\u003e\n  \u003c/p\u003e\n  \u003cp\u003e\n     When we say \u003ci\u003e\"CSS for everyone\"\u003c/i\u003e\n  \u003c/p\u003e\n  \u003cp\u003e\n     Learn | Build | Code | Test\n  \u003c/p\u003e\n  \u003cp\u003eA UI based CSS code generator for all expert level\u003c/p\u003e\n\n  \u003cp\u003e\n\n  \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n![GitHub watchers](https://img.shields.io/github/watchers/koustov/css-builder.svg?logo=github\u0026label=Watch) ![GitHub watchers](https://img.shields.io/github/issues/koustov/css-builder?logo=github\u0026label=Issues) ![GitHub watchers](https://img.shields.io/github/stars/koustov/css-builder?logo=github\u0026label=Stars) ![GitHub watchers](https://img.shields.io/npm/dt/react-ui-css-builder.svg?logo=npm\u0026label=downloads)\n\nThis is a **fully flexible** css builder based on [`React`](https://facebook.github.io/react/)\n\n## Note\n\nCurrently 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**\nCurrently its a preview build and \"0.1.0\" will be the first fully fledged version to consume.\n\nGive STAR to encourage me to complete this mammoth task with more energy\n\n**Table of Contents**\n\n- [Demo](#demo)\n- [Features](#features)\n- [When do you need it?](#when-do-you-need-it)\n- [Usage](#usage)\n  - [Install](#install)\n- [When do you need it?](#when-do-you-need-it)\n- [Run it locally](#run-it-locally)\n- [Supported Elements](#supported-elements)\n- [How to use](#how-to-use)\n- [Playground](#playground)\n- [Items in queue](#items-in-queue)\n- [Contribution](#contribution)\n- [License](#license)\n\n## Demo\n\nVisit https://css-builder.vercel.app/\n\n## Features\n\n- React based\n- Completely UI based\n- All CSS attributes supported\n- Customizable\n- Quick and easy.\n- Search attribute\n- Categorized attributes\n- Theme supported\n  - Out of the box there are two themes\n    - chalk (default)\n    - dark\n\n## 🤲 Want to Motivate?\n\nWho doesn't need motivation? Please give the project a star(⭐) and/or share it in your dev circle.\n\n## Many Thanks to all the `Stargazers` who has supported this project with stars(⭐)\n\n[![Stargazers repo roster for @koustov/css-builder](https://reporoster.com/stars/koustov/css-builder)](https://github.com/koustov/css-builder/stargazers)\n\n## When do you need it\n\n- You want to learn CSS while playing?\n- You want to allow n'th level customization on your web app?\n- You want to code CSS rapidly?\n- Not sure which attribute to chose?\n\n## Usage\n\n- Form customization\n- Tutorial\n- Learning\n- Rapid building\n\n### Install 🐙\n\n```bash\nnpm install react-ui-css-builder\n```\n\nor\n\n```bash\nyarn add react-ui-css-builder\n```\n\n## Run it locally\n\n1. Fork the repo\n2. Clone it from your repo\n3. Navigate to directory\n4. Open terminal\n5. Install Packages\n\n```\nyarn\n```\n\n6. Start the library\n\n```\nyarn start\n```\n\n7. Navigate to inner folder called `example`\n8. Install Packages\n\n```\nyarn\n```\n\n9. Start the library\n\n```\nyarn start\n```\n\n10. Your application is running on 3000\n\n```\nhttp://localhost:3000/\n```\n\n## Highlight 🔥\n\nIt 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.\n\n## Supported Elements\n\nIts a HUUUUUUGE list. Will list down in sometime.\n\n### How to use\n\nImport css-builder component\n\n```jsx\nimport { CSSBuilder } from 'react-ui-css-builder'\n```\n\nJust drop it to desired place\n\n```jsx\n\u003cCSSBuilder\n  onChange={(a, b, c) =\u003e {\n    console.log('Value received')\n  }}\n/\u003e\n```\n\n## Playground\n\nVisit https://css-builder.vercel.app/\n\n## Items in queue\n\n- Pending attributes\n- Drag/drop for sequencing\n\n## Contribution 🍰\n\nIf you understand the importance please feel free to create issue and make pull request\n\nRefer [code of conduct ](./CODE_OF_CONDUCT.md)\n\nRefer [contributing ](./CONTRIBUTING.md)\n\n## License\n\nMIT © [Koustov](https://github.com/koustov)\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://tapasadhikary.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/3633137?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTapas Adhikary\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/koustov/css-builder/commits?author=atapas\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/koustov\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/7145967?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ekoustov\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/koustov/css-builder/commits?author=koustov\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#maintenance-koustov\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"https://github.com/koustov/css-builder/pulls?q=is%3Apr+reviewed-by%3Akoustov\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/eemike07\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/2515617?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eeemike07\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/koustov/css-builder/commits?author=eemike07\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://oronium.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/59858506?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDon Jose Mathew\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/koustov/css-builder/issues?q=author%3Adontech09\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/koustov/css-builder/commits?author=dontech09\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoustov%2Fcss-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkoustov%2Fcss-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoustov%2Fcss-builder/lists"}