Global Classes Extension: Visual Tab (Ad Hoc Interface)

Flexible visual panel for Global Classes

With “Ad Hoc” I mean an interface that is rendered based on the CSS the moment I click the tab hence it doesn’t drive the CSS Code, but feed from it and can change values in it. Allowing for a very flexible and open approach to many design systems while offering an easy system to edit key values visually.

The visual editor could be tied to the User Role settings either in total or per Stylesheet… what ever make more sense. Allowing the Admin or specific groups to edit CSS Code and others only ad hoc expose settings when clicking on this tab on the BricksForge Panel.

This panel ① would display CSS Code as a form panel

② Each variable would become a line and a fitting UI component (number input, color picker etc.)*
③ Comment blocks above a class are rendered as a hint**


* The block could have a title based on the class name or something found in a comment

**An alternative would be that only variables are listed or only classes that have a hint.
This would be a powerful ad hoc interface for arbitrary CSS files and systems including descriptions etc. as many other classes would and could depend on a few variables (calc etc.).


Something like this should come in handy for this idea:

1 Like

Hi Max,

thanks for this request! It all sounds really interesting at first glance. Do you see this visual area, where you can enter the values via input fields, only for the Bricksforge framework? Or also for the custom sets that can be created? In that case we would also need to add the possibilities to add new classes via the visual area using a button. Or does the visual area just pull in all the classes that have been entered in the code area?

I would be interested in your opinion on this :slight_smile:

When I wrote down the request I was actually thinking about pulling in classes and variables that have been tagged by a CSS comments, hence Ad Hoc.
As in write some custom classes and do your calcs and clamps etc. and expose some values and variables that can be tweaked.

Please consider it a brainstorming idea and what ever makes more sense to you or if it fits the agenda at all.

1 Like

As always, after thinking about it a little more, I changed my mind. I think having a completely form-based solution is the better approach, and this would entail deciding if a global class set is either a generator or just a text for you to paste CSS code. The generator would be helpful and could be combined with a regular CSS text field. Creating our calculations and variable dependent classes, in the CSS text and offer key variables (like colors, value ranges, steppers, text inputs [content]) to augment the calculations and CSS classes with the CSS variables generated. Finally, we can assign different roles to either access, the CSS text with the variables, or only the generator.

Updated:
As I used text to speech… I had some errors in the text. Hopefully, it is more comprehensive now!