Release 2.0
September 21, 2023
48 changes
we’ve got some exciting updates to share with you!
Pre-requisite
This release is considered as a major update! Thousands of rows of code have been edited, and while it has been widely tested by the community, it could potentially break things… So please make sure to backup your site before updating!
Color Manager
We’re super excited to introduce our new game-changer feature, the Color Manager. You can now manage all your dynamic colors inside the builder, create unlimited shades, and generate advanced scales without leaving the builder. It also brings a whole new way to set a darkmode to your site.
Class Manager V2
Version 2 of the class manager lets you easily categorize your classes, use AI to generate CSS codes, and apply bulk actions to your classes: rename/duplicate/group or delete multiple classes in a few clicks!
New CSS controls
Column-count, white-space, transform & perspective, backdrop-filter, background-clip etc… are now properties you can add inside the builder without using custom CSS.
Revamped Class Converter
The class converter has been upgraded with basename auto-populated, a preview window, and new functionalities that make it a must-have in your building workflow.
Bug fixes and new enhancements
This release contains tons of bug fixes and small enhancements
NEW
Group your Classes by Categories
Should you find yourself utilizing a large number of classes, it can potentially lead to clutter over time. With Advanced Themer, you're provided with the opportunity to organize your classes into distinct categories for more streamlined management and effective filtering.
NEW
Generate CSS with AI
In instances where you need some assistance and want to save time, artificial intelligence comes in handy! Advanced Themer allows you to instantly produce AI-driven CSS code directly in the class manager and target your root element efficiently.
NEW
Bulk Actions on Classes
Seeking a method for quickly renaming, duplicating, grouping, or even deleting multiple classes? Fear not. The bulk actions feature caters to your needs without inducing tedious manual procedures, thereby functioning as a quick and efficient instrument for managing multiple classes all together with easiness and accuracy.
NEW
Convert Vanilla Bricks Colors into CSS variables
The colors created in Bricks aren't typically saved as CSS Variables; they're primarily static values. But, if you're keen on enjoying the convenience of CSS variables, guess what? You're simply a button tap from utilizing our color variable converter.
NEW
Manage & Organize Your Colors with Ease
Your color palettes can get a little overcrowded with various roles for diverse tasks. The good news is that the color manager is all dressed up with new features to put order back into your color system. You can easily play around - adding, removing, duplicating, reordering (with drag-and-drop), or renaming any color and palette.
NEW
Advanced Color Pickr
Looks familiar? Typically, if you frequently tweak the developer settings on Chrome, chances are you've come across this same color picker. It offers easy navigation between HEX, RGB, and HSL formats. Not only that, but you can also set custom values for hue, saturation, lightness, and alpha via a convenient drag-and-drop interface.
NEW
Alpha channel supported
The initial color palette manager didn't have the capability to support colors with alpha channels. That's a thing of the past — now, you can assign any transparency value to any color present in your palette and it will indeed be accurately represented within the generated CSS variable.
NEW
Color Shades generator
With a simple click, Advanced Themer can create various color shades for you. You can create up to 20 variations at a time for transparent/light/dark shades! It's pretty much limitless!
NEW
Advanced Scale Generator
The scale generator is engineered to handle multi-level color schemes, helping you craft complex color gradients with ease. Making intricate color scales won't be a problem anymore.
NEW
No-code Darkmode
Implementing dark mode might seem challenging since it usually needs custom JS and CSS to function smoothly. But don't worry! Thanks to Advanced Themer, creating a dark mode variant of your color shades is now a breeze. Just a few clicks, and you're good to go!
NEW
Customize any shade and dark color variant
If you need to refine each color shade in both light and dark mode after using our time-saving shade generator - that's perfectly OK! You have full control over every color that is generated by our color manager. Indeed, it's completely customizable whenever you need it.
NEW
Set Custom Darkmode colors for ACSS variables
Do you stick with ACSS colors, yet find yourself longing for an effortless route to design a darkmode version of your website? We've got you covered! And it won't mess with your ACSS settings!
NEW
Meta Theme Color – Both globally and per page
Do you want to easily customize the display of the page or of the surrounding user interface? Now you can quickly do that for all the browsers that support the meta theme-color attribute. Set a global theme-color value that will apply to the whole site, and even customize it on a per-page basis inside the builder settings.
NEW
New CSS Controls
Column properties ("fake" masonry layouts...), advanced transform settings, white-space, backdrop-filter, background-clip, break, perspective, etc... are just some of the new CSS controls that you can now activate inside the builder.
NEW
Expand All Children Elements
Got a load of nested elements to deal with? It can definitely feel overwhelming sorting through several parent elements in the structure panel, just to access the one you need to tweak. Now, there's no pressure. Using this feature, you can swiftly unfold all the elements within a container.
FIX
New Filters / Transitions Tab
An optional "Filters / Transitions" tab has been added to quickly access these properties and leave the CSS tab free of distraction.
FIX
Color picker now accepts HEXA capitalized letters
There was a bug inside the Color Manager that prevented to paste HEXA values with capitalized values. Now the script automatically parses the HEXA value to lowercase letters.
FIX
Manually Rename Classes inside the Class Converter
In the previous releases, the Class Manager automatically assigned a context (or an element) to each class based on the element's label. Now can further customize your class names manually by clicking on the class input inside the preview window.
FIX
Add you custom Icons inside the Light/Dark mode toggle/button
In the previous releases, the dark/light icons inside the darkmode button/toggle were hardcoded. You have now the option to choose a custom dark/light icon from the Bricks library - or upload your own SVG.
FIX
Enhanced the Light/Dark mode to avoid FUC on load
In some cases, users could experience a color "jump" when loading the page in dark mode - creating an unpleasant experience for the visitor. The Javascript scripts have been revamped to avoid such issues.
FIX
Copy Class name to Clipboard inside the Class Manager
Added a "copy to clipboard" icon next to each class inside the Class Manager to quickly copy the class name inside your clipboard.
FIX
Copy Color Variable to Clipboard inside the Color Manager
Added a "copy to clipboard" icon when hovering a color inside the Color Manager to copy the CSS variable related to the color inside your clipboard.
FIX
Active Colors on page indicator inside the Color Manager
You have now a small "check" icon next to all the colors that are being used on the current page you're editing. This is an easy way to see on the fly whether a specific color is being used on a page.
FIX
Multi-select drag & drop in the Color Manager
Added a new "handle" icon next to each color. You can reorder any single color by dragging this handle, or even drag multiple colors by clicking on the handle icon - the colors will be considered as "selected". By dragging the selected colors, you'll automatically "group" them during the drag and will expand again on…
FIX
More Granular Control over the classes created with the Class Converter
When running the Class Converter script, a class was automatically assigned to each element of your component. You can now skip the script on specific elements by toggling the icon next to each class.