koustov / css-builder Goto Github PK

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 6.01% JavaScript 75.59% Shell 0.09% CSS 18.32%

builder css hactoberfest react reactjs

css-builder's Introduction

Hello there! My name is Koustov 👋🤓

📈 My GitHub Stats

Achievements

reactplay - Level 5

View my contribution log

📦 NPM Packages Published by Me

🚀 My Side Hustles

Here are my top-most Side Hustles. Most of the projects I have created are opensource. Please consider contributing to them. You are welcome to follow 🤝 me here to stay connected. Who doesn't need motivations? Show your support with a star(⭐) if any of my projects inspire you or helpful to you.

📫 You can find me @

Twitter 🐤
Blog 💻
LinkedIn 💼
Instagram 😎
Facebook 😏

My Github Page

Page Views(Counting since 1st October 2022):

css-builder's People

Contributors

Stargazers

Watchers

Forkers

atapas therakeshpurohit eemike07 carlyraejepsenstan donjosemathew shrilakshmishastry

css-builder's Issues

Implement attributes starts wit E

This repository needs a good amount of ingestion of various css attributes. The framework is ready now and what is pending is to add all the leftover CSS attributes.
The target of this issue is to add all attributes start with E.

Attribute definition request for F

Attribute Prefix

Attributes start with F

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for "C"

Attribute Prefix

Attributes start with "C"

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for "X"

Attribute Prefix

Attributes start with "X"

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for L

Attribute Prefix

Attributes start with L

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for "Q"

Attribute Prefix

Attributes start with "Q"

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for "W"

Attribute Prefix

Attributes start with "W"

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Allow CSS builder Whitelist and Blacklist tags

Is your feature request related to a problem? Please describe.
How would wish to filter out some unrelated attributes when you consume CSS builder as a component in your application?

Describe the solution you'd like
When an application is consuming CSS builder, we would need to provide functionality where the consumer can instruct CSS builder to show only a specific set of attributes. These can be done in two different way

white-list-tags and black-list-tags
white-list-attributes and black-list-attributes

e.g: Let's take an example of a problem, My application uses css-builder for runtime customization, however,

I don't want end-user to modify the color of any element as it will interfere with my out-of-the-box theme.
I don't want anyone to change the element border due to theme interference again.
This is where a whitelist and black list tags will be very useful.

A blacklist is the highest priority filter, anything configured in blacklist will never appear on css-builder UI
By default all the attributes are considered as whitelist item however when whitelist value is provided, the component will consider every other attribute as blacklist.
Coming back to the above problem, we would like to provide a solution to the consumer like

<CSSBuilder black-list-tags=["color"] black-list-attributes=["border", "border-radius"]/>

So now no will see any attributes related to color tag and also border and border-radius will be hidden from the end-user.

Describe alternatives you've considered
NA

Additional context
NA

Attribute definition request for "O"

Attribute Prefix

Attributes start with "O"

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for "S"

Attribute Prefix

Attributes start with "S"

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for E

Attribute Prefix

Attributes start with E

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for "I"

Attribute Prefix

Attributes start with I

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for "Y"

Attribute Prefix

Attributes start with "Y"

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for "P"

Attribute Prefix

Attributes start with"P"

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for "R"

Attribute Prefix

Attributes start with "R"

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for "J"

Attribute Prefix

Attributes start with "J"

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Scrolling Is not Working

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
The Scrollbar is not showing. Components are overlapping
Describe the solution you'd like
A clear and concise description of what you want to happen.
Add Overflow-y to auto
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.
Can I work On this issue?

Attribute definition request for M

Attribute Prefix

Attributes start with N

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for "H"

Attribute Prefix

Attributes start with H

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for G

Attribute Prefix

Attributes start with G

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for "V"

Attribute Prefix

Attributes start with "V"

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for N

Attribute Prefix

Attributes start with N

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for "Z"

Attribute Prefix

Attributes start with "Z"

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for "T"

Attribute Prefix

Attributes start with "T"

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for "D"

Attribute Prefix

Attributes start with "D"

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Update example UI to a more usable one

Is your feature request related to a problem? Please describe.
Example UI is not so very intuitive

Describe the solution you'd like
As not all attribute is applicable to all elements, we need an element-based UI where live preview can be seen

Describe alternatives you've considered
NA

Additional context
NA

Attribute definition request for K

Attribute Prefix

Attributes start with K

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]

Attribute definition request for "U"

Attribute Prefix

Attributes start with "U"

Is for an entire prefix or partial implementation

Full

If partial, mention segment count

Definition template

All the attribute definitions are maintained under definitions directory and here is the template
Template:

[
  {
    "display": "<Display Name>",
    "description": "<A very simple description, not going much technical>",
    "link": "<External link to get more details>",
    "propertyName": "<Underneath attribute name>",
    "valuetemplate": "<The template for the value>",
    "categories": ["<A list of categories this attribute can belong>"], 
    "tags": "<A comma separated values for adding tags which is more internal for filter/search etc>",
    "controls": [<List of controls that is required to build the value>]
  }
]