Release 3.1

April 14, 2025
58 changes

This release introduces some of the most powerful tools we’ve ever shipped—designed to streamline your workflow, optimize performance, and give you full control over your design system. Here is a highlight of the most impactful features of 3.1:

 

AT CSS Framework

 

Introducing the AT CSS Framework – a lightweight, flexible CSS system built for speed and control. It sets up in seconds with zero dependencies, integrates natively with Bricks, and loads only the utilities you use. Built on CSS variables and BEM-friendly conventions, it’s transparent, fully customizable, and exportable for any project.

 

Track Where a Class Is Used

 

You can now instantly view every post, page, template, or component where a specific class is applied. Just one click takes you straight to the relevant content, so you can manage and maintain your styles with ease.

 

Find & Manage Unused Global Classes

 

Keep your codebase lean by identifying global classes that aren’t used anywhere on your site. Delete unused styles in seconds and enjoy a cleaner, more efficient builder experience.

 

Custom Fluid Scales

 

Generate entire fluid scales in one click within the Variable Manager. Whether you’re working with spacing, typography, or sizing, you can define the number of steps, rename variables, and adjust multipliers—perfect for creating consistent, scalable design systems.

 

Sticky CSS


A persistent CSS editor that stays visible while navigating elements and classes in the Structure Panel. No more jumping to the Custom CSS tab—edit styles instantly, view generated CSS, and enjoy all the SuperPowerCSS enhancements in one seamless interface.

 

Export View in Color Manager

 

A new “Export View” in the Color Manager lets you see all color-related CSS declarations generated by AT. Easily copy and reuse the code elsewhere, even if you deactivate the plugin.

 

Smarter CSS Variable Picker

 

The CSS Variable Picker now adapts to the context. It automatically shows the most relevant variable categories depending on which CSS property you’re editing—making it faster and easier to pick the right value.

Logical Properties Converter

A new global converter in Theme Settings transforms all directional styles into logical CSS properties. It scans elements, templates, and global classes, bringing your styles up to modern CSS standards with one click.

 

Remove All Styling Controls

 

If you’re a CSS-savvy developer who prefers writing styles manually, this feature is for you. Once enabled, it removes all styling controls from the Bricks builder, leaving only the content and custom CSS tabs. No more distractions—just clean, focused control.

 

Major Performance Refactoring

 

This release also includes a major codebase refactor aimed at improving builder performance, particularly in response to rendering issues introduced by the latest Chrome update. Modals are now loaded only when needed, reducing DOM overhead and speeding up interaction across the board.

 

20 Bug Fixes

 

This update addresses a wide range of issues reported in previous versions. Combined with the new features and enhancements, it delivers a smoother, more stable experience throughout the entire workflow.

 

Check it out today and experience the difference!

Introducing the AT CSS Framework – a lightweight, flexible CSS system built for speed and full control. It sets up in seconds with zero dependencies and can be customized or exported for any project. Fully integrated with Bricks, it uses native functions and conditional loading to stay efficient. All settings are editable directly in the builder, with optional AT managers for added convenience. Built on CSS variables and BEM-friendly, it’s transparent, bloat-free, and entirely yours to modify.

Ever wish you had a powerful CSS editor always at your fingertips while browsing elements and classes in the Structure Panel—without constantly jumping to the Custom CSS tab? That’s exactly what Sticky CSS offers. It stays visible as you work, includes all the enhancements from SuperPowerCSS, and can even display the generated CSS for each Bricks element.

During development, it’s common to create many classes without knowing exactly where they’re used. With this feature, you can instantly see every page a specific class appears on—and jump to any of them with a single click.

This feature empowers you to easily identify and handle global classes that aren’t being utilized across your website. With just a few clicks, you can pinpoint these unused classes and choose to delete them, ensuring a leaner and more efficient codebase without impacting your frontend. This optimization not only increases your site’s performance but also simplifies maintenance, allowing you to focus on the global classes that truly matter.

Creating static and clamp values in the Variable Manager is already convenient, but what if I told you that you could generate an entire scale with just a click? That’s exactly what this feature does! You can create custom fluid scales for any category – spacing, typography, sizes, or more. Adjust the number of variables to suit your needs, rename any variable, and customize the multiplier for each step. This scale generator is one of the most powerful tools on the market, yet it is super easy to use!

Are you a CSS expert who finds the Bricks styling controls getting in the way? Wish you could just have the Custom CSS control to style your elements? This feature is for you! Once enabled, all the styling controls will be removed from the builder, leaving only the content and custom CSS controls. If you’re comfortable working with CSS, this feature will boost your productivity by focusing only on the controls that matter to you!

Tired of typing your heading text only to copy and paste it as the element’s label again and again? We get it! With this new builder tweak, any text you enter into your heading elements will automatically sync with the label, making your structure panel much easier to manage!

Tired of not being able to enter your own value in a select control? With this feature enabled, all select fields become combo boxes—allowing you to filter options by keyword or input custom values freely.

The grid utility classes are now fully integrated into the builder via the Class Manager. By clicking the corresponding menu, you can manage all your grid utility classes directly within the builder. Any changes made are instantly compiled without the need to refresh your browser.
All custom CSS related to the responsive grid classes is contained within the Custom CSS control of each global class. This means AT no longer needs to output any custom code, as Bricks handles everything. These classes are now conditionally loaded on each page when required and will function fully even if you choose to…
A new 'Modify' option has been added to the bulk actions menu in the Class Manager of AT. This feature allows you to bulk-convert the directional styles of your global classes into logical properties with ease.
A new 'Restore' option has been added to the bulk actions menu in the Class Manager of AT. This feature allows you to bulk-restore the global classes sitting in the Trash category.
A new 'Permadelete' option has been added to the bulk actions menu in the Class Manager of AT. This feature allows you to permanently bulk-delete the global classes sitting inside the Trash category.
Generate all the relevant CSS variable categories within the Variable Manager with a single click! Each category will be automatically suggested in the CSS Variable Picker based on the control you're editing. Simply populate the categories with your own variables, and you're all set!
You can now easily reorder categories in the CSS Variable Manager by simply dragging and dropping them into your desired position.
Advanced Themer uses four CSS variables to manage clamp functions: --min-viewport, --max-viewport, --base-font, and --unit-clamp. Previously, these variables were enqueued by the plugin, creating a dependency that prevented deactivating the plugin without losing styles. Now, they have been migrated and integrated into the CSS Variable Manager, eliminating this limitation. As a result, the corresponding options…
A new Color type is now available for variables in the AT Variable Manager, featuring a handy color picker for quick selection and editing.
You can now customize your variable picker to automatically open the most relevant categories based on the CSS category of the control. For example, opening the variable picker in the margin controls will suggest spacing variables, while opening it in the typography controls will show font variables on top of the modal.