CSS Frameworks for Bricks Builder: The Comprehensive Comparison 2026

An opinion piece with research. All assessments in this article reflect personal experiences and evaluations. Prices and features were researched in April 2026.

Anyone working with WordPress and Bricks Builder will sooner or later face a central decision: Do I use a CSS framework, and if so, which one? The answer influences the entire workflow, the maintainability of projects, and ultimately the speed at which new websites are created.

This article compares the currently relevant CSS frameworks for Bricks qualitatively and quantitatively, categorizes them, and doesn't mince words. At the end is a catalog of questions that helps with the decision.

Note on pricing: All prices are converted to euros (1 USD ≈ 0.92 EUR, as of April 2026). Most international providers bill in USD and show net prices. For buyers from Germany, 19% VAT is added if the provider hasn't already calculated it. When in doubt: check the price on the checkout page.

Why a CSS Framework at All?

Bricks Builder has delivered a solid styling system since version 2.2 with Style Manager, Fluid Typography, Spacing Scales, and Color Manager. You can work completely without a framework or simply import one. Nevertheless, many developers opt for an additional framework because it allows them to:

• Enforce consistency: Colors, spacing, and typography follow a system instead of individual decisions per element. Essential for teamwork.
• Reduce responsive work: Fluid Typography and Spacing with clamp() replace manual breakpoint adjustments.
• Increase maintainability: Changes to a central variable affect the entire site. Adherence to the DRY (Don't repeat yourself) principle.
• Increase speed: Variable tokens significantly accelerate the build process.
• Follow best practices: Opinionated frameworks like ACSS bring proven conventions that especially help teams and beginners.

At the same time, every framework also brings disadvantages: additional dependency, learning curve, potential costs, and the question of what happens if the manufacturer stops development. That this isn't a theoretical concern is shown by the OxyProps case further below.

The Frameworks in Overview

1. Bricks Native (Style Manager)

Approach: Since Bricks 2.2 (February 2026), Bricks delivers its own full-fledged design system tool: the Style Manager. This update has fundamentally changed the starting position. Bricks now offers natively what previously required a third-party framework. Personally, I think it's great that Bricks now has this natively. A few kudos to Maxime Beguin (Advanced Themer) and the team around David Babinec (Core Framework) wouldn't have hurt, though, since they laid the groundwork.

Price: Free (included in the Bricks license price)

What the Style Manager brings (since Bricks 2.2/2.3):

• Color Manager: Color palettes with automatic generation of shades, transparencies, and complementary colors. Light/Dark mode variants per color. Import/Export as JSON.
• Fluid Typography Generator: Since 2.1, unlimited Typography Scales with T-shirt sizes, numerical, or custom naming. Scaling via clamp() with configurable breakpoints and ratios.
• Spacing Scales: Analogous to typography, also for spacing. Fluid, variable, exportable.
• Global Variable Manager: Create, categorize, and manage CSS variables directly in the builder.
• CSS Framework Importer: Import any CSS files. Bricks automatically extracts classes and variables and groups them by categories.
• Live Preview on Hover: Colors, classes, and variables are live-previewed on the element when hovering.
• HTML & CSS to Bricks (since 2.3): Insert HTML and CSS from any sources, Bricks automatically converts to native elements, classes, and variables.

Anyone looking for a pre-configured starting point without a plugin can additionally use Fancy Framework: a free variable set (Fluid Typography, Spacing, color palette) that is loaded directly into Bricks as a JSON import and CSS snippet. No dependency, no plugin, but also no utility classes or autocomplete. For beginners, a pragmatic entry point before building their own system.

Strengths:

• No additional dependency, no plugin, no vendor lock-in
• Full control over every aspect of CSS
• Future-proof, as maintained directly by Bricks
• Export of generated variables and classes as CSS file

Weaknesses:

• No opinionated workflow: You must make your own decisions about naming conventions, scales, and structure (can also be an advantage depending on philosophy)
• No SCSS mixins or advanced developer tools
• For teams, the enforced convention that a framework like ACSS delivers is missing, or it requires the discipline to create and maintain one
• No convert-to-REM feature or clickable-parent classes

My assessment: Since Bricks 2.2, "no framework" is no longer synonymous with "everything manual". The question "Do I still need a commercial CSS framework?" has been seriously discussed in the community since this update, and the answer is no longer automatically "yes".

2. Automatic.css (ACSS)

Website: automaticcss.com

Approach: Started as a utility framework, evolved as a complete CSS tool library, specifically for WordPress theme builders like Bricks, Etch. Combines BEM classes with CSS variables and a UI dashboard for configuration. Strongly opinionated with clear best practices and continuous development.

Price (net prices, plus 19% VAT for DE buyers):

• Freelancer (3 sites): from approx. 73 €/year (79 $)
• Agency Pro (unlimited): approx. 137 €/year (149 $)
• Lifetime (unlimited): from approx. 367 € one-time (399 $)

Strengths:

• Most comprehensive feature set of all Bricks frameworks
• Automatic typography scaling, color shades, spacing rhythm
• "True Builder Integration" with autocomplete and context menus in Bricks
• Automatic mobile optimization (according to manufacturer 60–90% less responsive work)
• Extensive documentation, video courses, and active community
• Auto-BEM function (ctr) and SCSS mixins for advanced users
• Accessibility features like Clickable Parent with one class
• "Frames" as a complementary wireframing and component system and additional Figma libraries and tools.
• Now a large development team behind it.

Weaknesses:

• Highest price among the frameworks (affordable for agencies, an investment for freelancers, especially at the start)
• Steeper learning curve due to the scope of features
• Opinionated: Anyone who deviates from the ACSS workflow works against the system
• Updates (both builder and framework) can create maintenance and repair effort, as there is no baking.
• Can be oversized for small, simple projects

The Elephant in the Room: Etch, Version 4, and the Future of ACSS

ACSS founder Kevin Geary is developing Etch, his own WordPress page builder, positioned as a "Visual Development Environment" and built on Gutenberg APIs. Etch is the declared centerpiece of Geary's company Digital Gravy. The official line is: ACSS will continue to support Bricks. In practice, a more nuanced picture emerges.

ACSS Version 4 brings a radical break:

• No more support for GenerateBlocks, Breakdance.
• Not backward compatible with version 3. The majority of utility classes have been removed. Comparisons show: ACSS 4 is 85% lighter than 3.3.6, which sounds good but means that over 2,300 CSS entries (variables, classes, selectors) have been dropped.
• Version 3 receives five years of security updates, but no new features.
• Utility classes in v4 are being rebuilt into "Recipes" that are called via special triggers (@ in Bricks) instead of being loaded as global classes.

What this specifically means for Bricks users: Anyone who currently operates 20, 50, or 100 client sites on ACSS v3 faces considerable effort with a potential migration to v4. Classes that existed in v3 are no longer present in v4. CSS variables have changed. Custom CSS that references v3 selectors breaks. This rework is unpaid work on existing projects that no client has commissioned for agencies and freelancers. To be fair, though, it must be said: You don't have to upgrade. With an average lifespan of 3 years per website, the cost-benefit ratio doesn't add up either.

At the same time, the question remains: How does a team that simultaneously develops Etch, ACSS, and Frames prioritize support for a third-party builder like Bricks? Geary has promised that ACSS v4 will support Bricks. But the pattern is recognizable: ACSS is increasingly optimized for Etch, and Bricks support becomes a take-along feature instead of the core product.

My assessment: ACSS is still the most feature-rich framework. But anyone starting today should be aware that the strategic journey is heading toward Etch. For new projects, a look at v4 and its compatibility with your own workflow is worthwhile. For existing v3 projects, a realistic migration plan and an honest calculation of migration costs are recommended.

3. Core Framework

Website: coreframework.com

Approach: Modular CSS framework with visual interface for configuration. Available as a free web app, as a free WordPress plugin, and with paid builder addons.

Price:

• Web app and WordPress plugin: free
• Bricks Builder Addon: approx. 119 € one-time (net price, via the Core Framework Marketplace)
• Gutenberg integration: free included

Strengths:

• Free entry, both as a web app and as a WP plugin
• Modular structure: classes and variables can be activated or removed individually
• Visual UI for managing colors, typography, spacing, and components
• Cross-builder: works with Bricks, Oxygen, and Gutenberg
• No vendor lock-in: stylesheet can be exported and used without plugin
• Fluid Typography and Spacing with mathematical scales
• Active development, over 4,000 users, listed on WordPress.org

Weaknesses:

• Bricks integration (addon) is paid and must be purchased separately
• Less opinionated than ACSS, requires more own decisions
• Documentation and onboarding material not as extensive as ACSS
• Community smaller than the ACSS community
• Some users report occasional bugs in the Gutenberg integration

My assessment: Core is the best candidate for people who want to develop their own framework and are willing to take responsibility for it. Flexible enough to adapt to your own workflow, structured enough to ensure consistency. The export approach (CSS usable without plugin) makes it the framework with the lowest lock-in risk. For teams with Bricks and Gutenberg, it's the most obvious choice.

4. Advanced Themer (AT Framework)

Website: advancedthemer.com

Approach: Primarily a plugin to extend Bricks Builder (Builder Tweaks, productivity hacks) that has also included its own CSS framework for some time. The AT Framework is a sub-function of Advanced Themer.

Price (incl. VAT for EU buyers):

• 1 license: 59 €/year
• 5 licenses: 99 €/year
• Unlimited: 149 €/year
• Lifetime (unlimited): 369 € one-time

Strengths:

• Two products in one: Framework plus extensive builder extensions (176 features)
• Extremely simple setup directly in Bricks, no separate dashboard
• Fluid CSS variables, color palette generator with shades
• Visual CSS Grid Builder
• AI integration for CSS generation in the editor
• "Strict Editor View" to protect against client changes
• Performant: no JS framework on the frontend, no unused utility classes
• Modular approach: individual features can be disabled
• Active and extremely friendly developer

Weaknesses:

• The framework is intentionally simpler than ACSS, offers less detail
• Only for Bricks Builder, no cross-builder support
• AT is a Swiss Army knife. But like with that, you have to learn it first. It really has many features
• No product separation between framework and builder tweaks
• As cool as Maxime is, he's a one-man show.

My assessment: AT is the underestimated package. Anyone who uses the builder extensions anyway (and they are excellent) gets the framework almost for free. For developers who find ACSS too much and Bricks Native too little, AT hits a sweet spot.

5. OxyProps / BricksProps (discontinued)

Website: oxyprops.com (as of April 2026 still accessible, but without visible activity)

Status: OxyProps is the prime example of why vendor lock-in with CSS frameworks is a real risk. The project was based on Open Props, an open-source collection of CSS Custom Properties, and extended it with utility classes, custom elements, and builder integration for Oxygen and Bricks. In Bricks, the plugin automatically renamed itself to "BricksProps".

OxyProps was technically elegant: a zero-specificity approach, Smart Context Menus, Light/Dark Mode out of the box, a well-thought-out color system, and an affordable lifetime price starting at 49 €. It was maintained by a single developer (Cédric Bontems). That's exactly what became the problem.

The last substantial update of OxyProps dates from the end of 2024 (version 1.11.2). Since then, radio silence: no new releases, no communication about the future of the project, no response to compatibility questions with newer Bricks versions. The project is de facto dead.

What can be learned from this:

• A one-person project can cease to exist at any time and without warning.
• "Open source basis" (Open Props) only protects the underlying CSS Custom Properties, not the builder integration, utility classes, or custom elements.
• Anyone still using OxyProps today faces the question: manually migrate or hope nothing breaks.
• The cheap lifetime price was, in hindsight, a warning signal: A single developer cannot sustainably maintain a framework of this complexity at this price.

OxyProps remains in this comparison as a warning. Anyone evaluating a framework should always ask: What happens if this project disappears tomorrow?

6. Winden (Tailwind CSS for WordPress)

Website: dplugins.com/downloads/winden

Approach: Brings Tailwind CSS to WordPress and page builders. Compiles Tailwind directly in the browser, without Node.js or local development environment. Scans both files and the WordPress database.

Price: Annual and lifetime options via dPlugins (approx. 45–92 € net/year, plus VAT, exact prices on the website)

Strengths:

• Full Tailwind CSS 4 integration without build pipeline
• Final CSS under 10 KB through JIT compilation
• Cross-builder: Bricks, Oxygen, Breakdance, Elementor, Gutenberg, classic themes
• Access to the entire Tailwind ecosystem (DaisyUI, Flowbite, Preline UI, etc.)
• Autocomplete for Tailwind classes in Bricks
• @apply directive for extracting repeated patterns into custom classes
• No vendor lock-in: Tailwind classes work independently of the plugin

Weaknesses:

• Requires solid Tailwind knowledge; Bricks or builders in general aren't actually designed for this
• Documentation is described by users as incomplete
• No visual dashboard like ACSS or Core in the builder.
• The DX (Developer Experience) in Bricks is not comparable to Tailwind in VS Code
• Debugging can become complex when Bricks styles and Tailwind classes collide

Personal assessment: Tailwind CSS doesn't belong in a page builder

Tailwind CSS is an excellent tool. It has sustainably changed frontend development in React, Vue, and Svelte and rightfully dominates there. But a page builder is not the environment for which Tailwind was designed, and the transfer works worse in practice than in theory.

The core idea of Tailwind is: apply utility classes directly in markup instead of maintaining separate stylesheets. In a component-based framework like React or Svelte, this is elegant because each component has its own isolated scope. In a page builder like Bricks, however, this approach quickly creates spaghetti HTML: elements carry 15, 20, or more classes, the structure becomes confusing in the builder, and maintainability suffers. What is readable in a .svelte file becomes a nightmare in the Bricks structure tree.

Additionally: Tailwind doesn't scale well in a builder context. In a code editor, you have search-and-replace, linting, Tailwind IntelliSense, and full control over the markup. In Bricks, you work visually, click through elements, and the class input is a simple text field. The entire DX that makes Tailwind so productive is missing.

There's also a conceptual mismatch: Bricks brings its own, now powerful styling system (see Style Manager, section 1). Anyone using Tailwind in parallel has two systems competing for the same concerns. Colors, breakpoints, spacing: everything exists twice and can collide.

Nevertheless, there is a valid use case: Teams already deeply invested in Tailwind and needing to implement WordPress projects without retraining benefit from Winden. Familiarity with the classes and the ability to use the same design tokens across projects can reduce the learning curve to zero. For this specific case, Winden is a pragmatic solution.

7. DIY: Own Framework with AI and Bricks 2.2

Approach: Don't buy a framework, but generate your own project-specific CSS system with the help of AI (Claude Code, ChatGPT) and the Bricks Style Manager.

Price: 0 € (apart from your own working time and possibly an AI subscription)

Why this is realistic in 2026:

Three developments have made this option possible:

1. Bricks 2.2 Style Manager provides the infrastructure. The CSS Framework Importer consumes any CSS file and automatically sorts it into categories. The Variable Manager, Color Manager, and scale generators ensure that imported systems immediately work with autocomplete and live preview.

2. AI can generate a consistent variable system in minutes. A prompt like "Generate a CSS Custom Properties system with 6 spacing levels (fluid, clamp-based, 320px–1440px), a type scale (1.25 ratio, 7 levels), a color system with Primary/Secondary/Neutral each 10 shades in OKLCH, and BEM-compatible utility classes for spacing, colors, and typography" produces a functional framework in one pass. Not polished, but scalable.

3. The import workflow exists. Generate CSS, load into Bricks via Framework Importer, start working immediately.

Realistic effort: Half to one day for a usable framework, plus another day for fine-tuning and testing. This is less than the onboarding time for ACSS and costs nothing except your own time.

Which CSS methodology?

Anyone building their own system needs a convention for naming. The relevant options:

• BEM (Block Element Modifier) remains the most sensible approach for Bricks projects. .card, .card__title, .card--featured is immediately readable in the structure tree, scales well, and is consistently used by template providers like Bricksmaven. BEM works particularly well in combination with Bricks' component system: the component is the block, the inner elements are the elements, variants are controlled via modifiers.

• CUBE CSS (Composition, Utility, Block, Exception) is an interesting alternative for teams that want to combine utility classes and custom components. The composition layer (layout utilities) comes from the Bricks Style Manager, the block layer uses BEM-like custom classes. CUBE is conceptually clean but less widespread and harder to document.

• Pure utility-first (Tailwind style) makes little sense in the builder context (see section 6).

• SMACSS and OOCSS are more historically relevant and provide no added value over BEM in the page builder context.

My recommendation: BEM as a basis, supplemented by a small set of utility classes for frequently used spacing and typography values. This is the combination that works most naturally in Bricks and is easiest to convey to new team members.

Strengths:

• Maximum control and adaptation to your own workflow
• No costs, no vendor lock-in, no plugin dependency
• AI-generated systems can be iterated and adapted in minutes
• Ideal as a learning project: anyone who builds their own framework understands CSS better
• Can grow incrementally without having to cover all eventualities from the start

Weaknesses:

• Requires CSS knowledge and the discipline to adhere to conventions
• No support, no community, no tutorials
• No ecosystem (no compatible template libraries)
• AI-generated CSS must be reviewed and tested
• More difficult to standardize for teams than an established framework
• Must be sustainably maintained and adapted. Both to CSS evolution and to the builder

My assessment: For solo developers with solid CSS knowledge, an AI-generated framework based on the Bricks Style Manager is a serious option. For teams, I recommend an established framework (Core or AT) because the enforced convention is more valuable than the saved license costs.

Quantitative Comparison

OxyProps / BricksProps has been removed, as the project has not received updates since the end of 2024 and is considered discontinued.

Qualitative Classification

1. "Bricks is enough" (Bricks Native, DIY): Since Bricks 2.2, the strongest position. The Style Manager provides the technical foundation. The DIY option complements this with an AI-supported, customized system. The question of whether a third-party framework is even necessary is being actively and controversially discussed in the community.

2. "All-in-One Workflow" (ACSS): ACSS defines not just a CSS system, but a complete workflow. ACSS brings things that Bricks Native can't (yet) do: Convert-to-REM, Clickable Parent, SCSS mixins, the Frames system. However: With Etch as its own builder and the non-backward-compatible v4 update, the company's focus is shifting. Those who buy ACSS for Bricks are increasingly buying a side product rather than a core product.

3. "Visual Building Kit" (Core Framework): Modularity, visual UI, cross-builder compatibility, and CSS export make Core the framework with the lowest lock-in. The Bricks addon costs approximately €119 one-time.

4. "Builder Extension with Framework" (Advanced Themer): AT is primarily a builder enhancement plugin that includes a framework as a bonus. For many Bricks developers, AT is already installed anyway, and the AT Framework as a lightweight alternative is becoming increasingly attractive.

Special case Tailwind / Winden: In my opinion, only useful for a very specific use case: teams from the Tailwind world who need to implement WordPress projects.

Template and Block Ecosystem

An often underestimated factor: Which third-party templates and block libraries are compatible with the chosen framework?

• ACSS: Broadest support. Bricksmaven, BricksMade, Bricksfusion, Brixies and many others offer ACSS-compatible templates. Frames (by the ACSS makers) is its own wireframing system.
• Core Framework: Growing support from BricksMade, Bricksfusion, and its own marketplace.
• Advanced Themer: Support from BricksMade and Bricksmaven, growing.
• Winden/Tailwind: Access to the huge Tailwind ecosystem (DaisyUI, Flowbite, etc.), but integration into Bricks requires manual customization.
• Bricks Native / DIY: Compatible with all templates based on "Bricks Vanilla". BricksMade and Bricksfusion explicitly offer this option.
• OxyProps: Was never broadly supported. Ecosystem no longer exists.

Bricksfusion deserves special mention: The toolkit can automatically convert sections between ACSS, Core Framework, AT Framework, and Bricks Vanilla (from €119/year or €279 LTD). Those who decide on a framework today can at least partially ease the transition with Bricksfusion.

Performance Perspective

All mentioned frameworks are designed for performance. Nevertheless, there are differences:

• Bricks Native & DIY: Minimal overhead, as no additional plugin is loaded. The Style Manager generates pure CSS.
• ACSS: Can be switched between full utility mode and ultra-minimal variable mode. Requires conscious configuration.
• Core Framework: Modular approach allows removal of unused modules.
• Advanced Themer: Deliberately built without JS framework dependency on the frontend.
• Winden: JIT-compiled Tailwind CSS, typically under 10 KB final CSS. However: Tailwind tends to generate more classes per element in the builder context than CSS variable-based frameworks, which bloats the HTML output.

In practice, the differences in well-configured setups are marginal. The biggest performance killer is rarely the framework, but rather how it is used.

Vendor Lock-in: What happens if the framework disappears?

A legitimate concern, and with OxyProps no longer a hypothetical scenario, but documented reality.

• Bricks Native / DIY: No risk. Design tokens are part of the builder or pure, exportable CSS.
• ACSS: Classes and variables remain in the HTML/CSS. But with v4, the risk increases: those who stay on v3 don't get new features. Those who migrate to v4 must expect breaking changes. Theoretically, you can just load the stylesheet, but there is no baking feature.
• Core Framework: CSS can be exported as a stylesheet. The lowest lock-in among plugin-based frameworks. Though there is a risk of losing functionality in the builder.
• Advanced Themer: CSS variables remain, but the plugin must stay active.
• Winden: Tailwind CSS is an established standard. The generated CSS works without the plugin.
• OxyProps (Warning): Exactly the scenario everyone fears. Project effectively discontinued since the end of 2024. Anyone still using OxyProps should migrate promptly.

Conclusion

There is no objectively best CSS framework for Bricks Builder. There is only the best framework for your own context.

Bricks Native has reshuffled the cards with the Style Manager in version 2.2. Fluid Typography, Spacing Scales, a powerful Color Manager with Dark Mode, and the ability to generate custom utility classes: Much of what you needed a third-party framework for just a year ago, Bricks now provides itself. In combination with AI-generated CSS systems and a clean BEM convention, the DIY option in 2026 is no longer a compromise, but a real alternative.

ACSS dominates the market through scope, community, and ecosystem. It still offers features that go beyond the Bricks Native offering. But the strategic shift toward Etch, the non-backward-compatible jump to v4, and the risk of unpaid rework on existing projects make ACSS an investment that should be made with open eyes.

Core Framework offers the best compromise of flexibility, price, and cross-builder support. Advanced Themer is the best package when considering the builder extensions. Tailwind via Winden serves a niche that I wouldn't recommend for most Bricks projects.

The fate of OxyProps should serve as a warning. A technically elegant framework that disappeared without a trace. Anyone choosing a framework today should also ask: How big is the team behind it? How sustainable is the business model? What happens to my 50 client sites if updates stop tomorrow?

The most important insight remains: The framework that you consistently use and understand is better than the theoretically superior one that is only half-utilized.

All prices were researched in April 2026 and converted to the best of our knowledge. EUR conversion is based on approximately 1 USD ≈ 0.92 EUR. Net prices are marked as such. For purchases from Germany, plus 19% VAT, unless otherwise stated. Since offers can change, it is recommended to check the respective websites before purchasing.

This post contains no affiliate links.