This new shortcut will show up when a global class is active and will allow you to open the class manager with the current global class already selected and ready to be modified using the advanced tools integrated within the Class Manager.
Release 2.1
October 30, 2023
15 changes
we’ve got some exciting updates to share with you!
Say hello to CSS Variable Manager V1
Easily manage your Global & Theme CSS variables directly within the builder. Create static or clamp values on the fly, and see them reflected instantly in the builder without refreshing your browser. We’ve got you covered with the ability to create multiple categories, reorder options, rename, duplicate, delete, and even check which CSS variables are being used on your pages.
Get ready for Color Manager V2
With just a simple click, Advanced Themer can generate a variety of color shades for you. You can now create up to 20 shades at a time, including transparent, light, and dark variations! What’s even better? All shades are linked to your main color, so any change you make to the parent color will automatically update all the shades. You can also easily link or unlink any shade from the parent color, create complementary colors, apply auto-dark mode to any color, and even import colors from a CSS variable list into your palette.
Introducing the Structure Panel Helper
We’ve got something special for those who like to keep their web pages tidy and well-organized! Our new Structure Panel Helper allows you to filter your structure panel based on advanced criteria. You can now highlight non-consecutive headers on your page, easily locate elements with data-attributes set, identify elements with pseudo-classes styles, and much more. This assistant is here to ensure that your page follows the best web practices.
Boost your productivity with CSS Keyboard Shortcuts
For all you CSS code wizards out there, we have a treat for you! We’ve added over 20 keyboard shortcuts to all our CSS code editors to automate popular declarations. From media queries to states and pseudo-elements, these shortcuts are designed to skyrocket your productivity.
But wait, there’s more… Cool new tweaks!
- Now you can create CSS variables directly from our Variable Picker.
- We’ve introduced an Element CSS shortcut inside the element panel.
- Open your class in the Class Manager from a convenient element shortcut.
- Expand Spacing controls to get a lot more room for your variables and complex calc functions.
- Dynamic CSS variable suggestions.
- Add descriptions to your classes for better organization and clarity.
…and like always, this release includes tons of bug fixes and small UX enhancements!
Hope you’re excited about these awesome updates!
NEW
Class Manager Shortcut
NEW
Complementary Color Generator
Create complementary colors based on any color – following the color theory. Generate the (split) opposite/triad/tetrade/quadratic/compound colors, or an analogous color palette in one click.
NEW
Auto-darkmode
Automatically generate the dark version of your color. The script will calculate the opposite lightness of your light color, and assign it to your dark palette in one click.
NEW
Import colors from a CSS variable List
Would you like to import your CSS color variables inside the native Bricks color palettes and leverage the benefits of dynamic data? With Advanced Themer it’s as easy as copy/pasting!
NEW
Enable/Disable any Color Palette
Wish you could A/B test your colors by temporarily disabling an entire palette? That’s a one-click action with Advanced Themer!
NEW
Structure Panel Helper
This new panel allows you to filter your structure panel based on advanced criteria, such as: highlighting the non-consecutive headers on the page, showing the elements that have data-attributes set, having pseudo-classes styles, etc… This assistant will ensure your page follows the best web practices!
NEW
CSS keyboard Shortcuts
If you’re writing a lot of CSS code, chances are this feature will drastically increase your productivity! 20+ keyboard shortcuts have been added to all the CSS code editors to automate popular declarations such as media queries, states, and pseudo-elements.
NEW
Element CSS Shortcut
Check if your element has custom CSS styles set on the fly! Click on the icon to directly access the CSS control and manage your custom codes in no time.
NEW
Expand Spacing Controls
The spacing controls in Bricks are fancy, but can sometimes be unfriendly when dealing with CSS variables. With Advanced Themer, you can easily toggle an “expanded” view and easily manage your long values without fear!
NEW
Variable Manager
FIX
Advanced CSS improved
The variable suggestion dropdown integrated inside Advanced CSS is now fully compatible with the new variable manager. The values inside the dropdown are dynamically generated each time you open the Editor. The variables created inside Advanced CSS are also reflected in the suggestion dropdowns of each Bricks control and Superpower CSS.
FIX
Variable Picker improved
The variable picker is now fully integrated with the new variable manager. It's dynamically populated with the variables created in the variable manager without needing a refresh. You are also able to add theme variables directly from the variable picker. There are new small indicators to quickly check between global and theme variables. The general…
FIX
New “full-size” option in Superpower CSS
You have now a new icon option on top of the Code Editor to hide the description text under the control and span SuperPower CSS through the whole available height of the screen.
FIX
“Comments” added to Superpower CSS
Now you can easily comment your code by pressing the following keyboard shortcut: CMD + SHIFT + 7 (WIN + SHIFT + 7 for Windows users).
FIX
“Description” added to the Class Manager
You can now add a description to each class inside the Class Manager.