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.