Release 3.2

May 27, 2025
41 changes

Meet Structure Generator – AI-Powered Code Creation

 

Structure Generator is your new all-in-one tool for creating HTML, CSS, and JavaScript — whether by hand or with AI.

  • Text-to-Code: Describe what you want in plain language, and let AI generate structured HTML/CSS/JS using your BEM conventions and Bricks variables.
  • Image-to-Code: Upload any design screenshot — Structure Generator will convert it into clean, native Bricks-compatible code. It even names elements, applies your variables, and follows your design system.
  • Live Preview & Edit: Instantly see and refine your code in a live iframe — styled with your Bricks globals, theme styles, and ATF variables — before importing.

 

CSS Variable Manager — Smarter, Cleaner, More Intuitive

 

  • Custom Groups: Organize your variables however you like. Group anything — colors, clamps, static values — for faster access in the Variable Picker.
  • Custom Labels: Give your variables human-friendly names. These labels appear in the picker, making your design tokens easier to use and remember.
  • Min/Max Type Scales: Define responsive typography more precisely with separate type scales and multipliers for min and max values.

 

ATF 1.1 — More Power, More Control

 

The Advanced Themer Framework gets a major boost:

  • Built-in form integration
  • New granular theme style options
  • Refined update system
  • Custom labels for all CSS variables

 

Polished Experience & Performance

 

  • Backend Refresh: A clean new look for Theme Settings, designed by Ari Pniel.
  • Performance Optimizations: Major improvements under the hood for faster performance, especially with the latest Chromium updates.

 

Ready to Upgrade?

 

Advanced Themer 3.2 is more than just an update — it’s a creative upgrade to how you work with Bricks. Explore AI-powered generation, better organization, and smoother design-to-code workflows today.

Turn plain text prompts into fully functional HTML, CSS, and JavaScript code with the help of AI. Just describe what you need — a layout, component, or interaction — and Structure Generator will instantly produce clean, ready-to-import code tailored for Bricks, complete with BEM classes and your project’s design tokens.

This feature is a game-changer: just upload any image or design screenshot, and Structure Generator — powered by AI — will transform it into clean HTML, CSS, and JavaScript code, ready to import into Bricks as native elements. It can automatically generate BEM-style class names, apply your Bricks variables for spacing, typography, and colors, and even suggest intuitive labels for your elements.

Structure Generator lets you create HTML, CSS, and JavaScript code manually or with AI assistance. Preview the output live in an iframe, make real-time adjustments, and import it effortlessly. The iframe is styled with all core Bricks styles, including your global classes, variables, and theme settings — ensuring full compatibility with ATF.

In previous releases, the conversion of CSS grid utility classes from theme settings to the Global Classes Manager could sometimes fail. You can now manually convert these classes using the dedicated converter available under Global Settings > Converters.
The Advanced Themer Framework has been updated with several enhancements, including form integration, a fresh update system, new granular options for theme styles, and custom labels for all CSS variables.
The AT Framework now offers full integration with the native Form Element, complete with essential CSS variables, a set of utility classes for advanced styling beyond Bricks' native options, fully mapped values in Theme Styles, and a dedicated recipe for one-off CSS customizations.
This version introduces an enhanced update and restore system. The script now automatically detects available updates for any options you enable in the ATF modal. It also highlights any changes made compared to your installed version, making it easy to see which options need to be re-imported or restored.
In previous releases, Theme Styles featured a single toggle that imported all mapped CSS values at once. In this version, you have complete control, with separate toggles for each option. This allows you to manage global styles more precisely without needing to delete anything manually.
This version introduces a new "contextual" palette, featuring colors for "info," "warning," "danger," and "success." These colors can now be customized separately for dark mode, giving you greater styling flexibility.
We've expanded the default radius scale to include new "large" and "extra-large" variants.
All colorset utility classes have been enhanced to automatically detect any nested class containing "accent" and apply custom styles accordingly.
Several users have asked for a way to enable or disable palettes dynamically, like applying a different color scheme to specific pages based on certain conditions. In the next release, you’ll be able to achieve this programmatically using this new PHP filter:
The Variable Manager now supports custom Groups - a handy way to keep your variables organized. These Groups enhance your workflow, especially when used alongside the Variable Picker, offering a smoother, more intuitive experience. Each Group can contain any type of variable, including clamps, colors, and static values, giving you complete flexibility and control over your setup.