Class Management Area for Rapidly Adding/Editing/Deleting/Organizing Classes

[digitalgravy]

It would be nice if there was a dedicated class management area where we could see all selectors (even better if it shows used/unused) and manage selectors via add new / edit / delete / and even organize/sort via tag or folder structure.

[beziehungsweise]

It’s somewhere on the roadmap / ideaboard. I am quite sure they will implement this but not very soon. It’s obvious that there are more relevant and urgent tasks to solve or features to launch.

[crsmoore]

@beziehungsweise - I believe you’re referring to this, on the Roadmap.

Roadmap

It currently has 788 votes (needs more!) and is in the “Planned” column.

[d19dotca]

Yes, it’s “Planned” currently, no ETA of course and presumably not in the near future yet given it’s not in the Next nor In Progress phases yet.

Roadmap

Make sure we vote it up!

[Deanphillips]

To add to this, I like what Microthemer and Cwicly both do. Depending on the drag and drop order you arrange them in the class manager, it’s arranged in the stylesheets.

[JimiLives]

I do not feel that it is “obvious” that there are more relevant and urgent tasks to be solved, and surely NO feature would be needed more by a professional than this. If you do not use classes you are a hobbyist. Simple as that. CSS is at the core of all web design today so to say a manager of that is not relevant is a mis-statement.

[etobic]

Yep. The classes are so powerful yet whether you take this road or not in your workflow depends on the usability and management of the potentially dozens of classes. But so glad that the editor/manager for classes is under consideration.

[Tom]

I would also like to see some sort of regex like bulk class rename functionality. When importing templates this could allow me to update the class names to be consistent across my entire site.

I would also like to see the ability to combine classes. Sometimes I realize I have 2 similar classes that should be one. Right now I would have to pick which class I want to use and then try to remember where I used all the other classes and then go to the elements remove the old class and then add the new one.

Also I think Bricks should manage css variables as well which would make sense to implement when Global Class Management.

Variable Management Area (allow Bricks to manage css variables)

This request is related to feature request: Since the above request is on the roadmap already, if this related feature request gets approved it would make sense to implement it at this point. Since Bricks is a css class first builder and already manages classes created in the editor, I think it would be extremely useful for the same functionality to exist for css variables. Currently I define my css variables in a code snippet plugin. As I style the site I end up finding situations where a…

[Tom]

Just posting a resource for the Bricks Team incase they are unaware of this plugin. WPGet released a temporary Bricks Class Management plugin to help others while we wait for the official feature.

I like the ability to organize the classes the way they did in the plugin. Maybe in the official feature Bricks can add the ability to organize classes in a similar way with the option to even create our own custom lists based on the naming scheme of the classes (and by drag and drop as well).

https://plugins.wpget.net/bricks-class-manager/

Bricks Builder Class Manager Plugin

[benadam]

+1 This would be amazing feature. needed indeed.

[Tom]

I know this feature is for a Class Management Area but it could be for so much more… maybe be more of a Global CSS Management Area.

Features I think would be useful to implement (that relate to this) or at least plan to include in the future since they will change fundamentally how Bricks handles certain things are:

CSS Class Management

• See all selectors
• Filter by used/unused, where used,page, section, etc…
• Organize/sort via tag or folder structure
• Manage selectors via add new / edit / delete / rename
• Regex like support for bulk functionality (like rename)

CSS Variable Management

• Similar functionality to Class Management (I know this one is a lot of work since Bricks currently doesn’t track variables and variables can have different scopes and be created in classes, etc…)

Container Query Management

• Not sure the best way to handle this but some sort of interface needs to be planned and created for it…

Bricks Variable Management

• As suggested in Tokenize Breakpoint Values! have Bricks defined variables that can be referenced in the editor similar to how %root% works (this would mean Bricks custom CSS would have to be processed before the final output that the browser loads obviously)
• These variables can pull data from elsewhere like PHP. Obviously the variables must be fairly static since it’s final output is in CSS and that is not generated on the fly but cached within the page or in a css file
• Management of this could happen with the Global CSS Management Area

SASS support with Custom CSS

• This relates in part to Bricks Variable Management. If processing of CSS is added then it makes sense to add the ability to include other processors like SASS. They could even be changed together and work one after the other, ie Bricks Variables and then SASS is compiled
• Can be enabled in Custom CSS panels as needed
• Global Management of this could happen with the Global CSS Management Area

Bricks Editor

• Improved visual indicators of areas with modified attributes (Advance Themer has some good options here)
• Beside the Content and Style buttons/tabs in the editor have a third option that just shows any attribute that has been changed from the default, so we don’t have to hunt around for them. Or maybe improve the search to have an additional filter that can show just modified attributes

Adding in these features will make Bricks even more powerful and allow professional web developers to take their Bricks websites to the next level.