Automatic.css vs Core Framework for Bricks Builder

A feature list only tells you so much. Here is something more useful: the same Bricks Builder section, built once and delivered for each framework. Once you see what actually changes, the choice gets easier.

Automatic.css vs Core Framework: the same template, two frameworks

Both give a Bricks Builder site one set of design tokens, colors, spacing, type sizes and radius, as CSS custom properties. They get there in different ways.

Every Fancy Bricks template is written once and converted to each framework before it’s published. Here is a card from one. The design is identical; only the names change.

.fbk-card {
  padding: var(--space-m);
  border-radius: var(--radius);
  color: var(--text-color);
}
.fbk-card__title {
  color: var(--heading-color);
}

.fbk-card {
  padding: var(--space-m);
  border-radius: var(--radius-m);
  color: var(--text-body);
}
.fbk-card__title {
  color: var(--text-title);
}

name converted for Core

Spacing reads the same in both. Text color, heading color and radius use each framework’s own names. That pattern holds across the library.

The vocabulary differs; the idea is the same.

What stays the same: your site’s variables, in either framework

I dumped the variables of fresh installs of ACSS 4.0.1 and Core Framework 2.0.2 and compared them name by name. Both let you configure a lot, and newer versions may rename things.

The defaults differ too. I built the same test page on both and measured it:

• Section spacing

  ACSS pads sections and gaps their children out of the box. Core leaves sections at zero, so the Core versions of the templates add that spacing to their own section class.

• Root font size

  ACSS sets the root to 16 px. With Core, the Bricks default of 10 px stays. A loose rem written by hand is why something looks different on each site.

• Links inside text

  ACSS colors them with your primary; Core keeps the text color. Neither underlines them, so templates with text links carry their own class.

None of this makes one framework better. It means a template built for one won’t look right on the other unless someone converts it. That’s the work the library does: you paste the version for your framework, and it reads your colors, spacing and type.

What people ask before choosing

The questions that come up in the Bricks forum, answered from each framework’s own site and from the two installs.

The page on CSS frameworks for Bricks Builder puts Fancy Framework in the same table. You can also browse the Automatic.css templates or the Core Framework templates directly.

Where Fancy Framework fits

If you don’t use a framework yet, you don’t have to buy one. Every template is written first in the free Fancy Framework; the ACSS and Core versions are converted from it.

It gives your site one set of colors, spacing, radius and type as Bricks’ own global variables, with no stylesheet of its own. Its names line up closely with ACSS, so the ACSS versions need fewer changes than the Core ones.

If you already run Automatic.css or Core on your site, you don’t need Fancy Framework at all.

Where Tailwind fits into Bricks Builder

Tailwind is utility-first: you style elements with many small classes in the markup, and a build step writes only the CSS you used. Its Play CDN, which skips that step, is described in Tailwind’s own docs as “designed for development purposes only, and is not intended for production.”

That model sits awkwardly in Bricks, which is built around global classes and global variables you style once in the panel. ACSS, Core and Fancy Framework all feed that workflow. Tailwind isn’t a bad tool; it just isn’t one of the frameworks the templates ship in.

Choosing a framework for your Bricks Builder templates

Here’s how I’d decide, in order:

1. Already using one? Keep it, and copy the version of each template that matches.
2. New site, variables plus utility classes? Core Framework is free and open source and generates both. Expect to set your own section spacing.
3. Variable-first with more built in? Automatic.css 4 handles section spacing, shades and dark mode. It needs a paid license.
4. Lightest start at no cost? Fancy Framework gives you Bricks’ own variables and nothing else to learn, and every template is designed in it first.

You can change your mind later. The design is the same in all three versions, so switching means copying the template again. Nothing is rebuilt.

Frequently asked questions