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

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.

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

Manage your Global & Theme CSS variables easily within the builder. Create static or clamp values on the fly that are reflected inside the builder without the need of refreshing your browser. Create multiple categories, reorder any option, rename, duplicate, delete, etc... Everything is included to keep your CSS variables under control!

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.