Opens in a new tab
Log inStart free

Frameworks

Choose a CSS framework for your Bricks Builder templates

Fancy Bricks templates carry no colors or sizes of their own; they read your framework's variables, so what you paste matches your site.

  1. One templateWritten once, in Fancy Framework.
  2. Converted when publishedNames swapped per framework.
  3. Your variablesCopy yours: Fancy Framework, Automatic.css 4 or Core Framework.

Same template, your framework

Pick a framework. The card stays the same; only the variable names change.

Same name in all three:

  • --primary
  • --space-s … --space-xl
  • --text-s … --text-xl
fancy-framework.cssThe source every template is written in.
.fbk-card {
  padding: var(--card-padding);
  border-radius: var(--radius);
  background: var(--base-ultra-light);
  color: var(--text-color);
}
.fbk-card__title {
  font-size: var(--h3);
}

Name converted for this framework

Side by side

Fresh installs: Fancy Framework, Automatic.css 4.0.1, Core Framework 2.0.2.

WhatFancy FrameworkAutomatic.css 4Core Framework
LicenseFreePaid licenseFree, open source
Variables live inBricks' global variablesIts own stylesheetIts own stylesheet
Stylesheet addedNone65 KB, 10 KB gzipped50 KB, 8 KB gzipped
Utility classesNoFewer in 4Yes, generated
Color shadesShades and transparenciesShadesShades and transparencies
Dark modeYes, from 1.1YesYes
Your AI through MCPYes, four abilitiesNot in its docsNot in its docs
Section padding by defaultYesYesNo; the template adds it
Root font sizeConfigurableConfigurableConfigurable
Also works inEtchEtch, GutenbergGutenberg, Oxygen, Figma
Renamed in our conversionNone, the sourceA few namesMore names

Coming from Fancy Bricks 1.0 or 2.0

Those templates set every value by hand; 3.0 reads your variables. What you already pasted keeps working.

Questions, answered

The long comparison is in Automatic.css vs Core Framework in Bricks.

Ask a question

Yes, every 3.0 template requires one. Fancy Framework is free, so you can start without any extra cost.

All three give the template its variables: colors, spacing and typography. Automatic.css and Core are separate frameworks you install on your own, while Fancy Framework is free and built for this library.

With Fancy Framework, yes: the templates marked “Dark mode ready” switch with the site when it goes dark. Dark mode is a framework setting for the whole site, not the same as a dark background on one section.

Yes. The same template is available in all three frameworks, so switching doesn’t mean redoing the design.

Fancy Bricks 1.0 and 2.0 didn’t require one; the 3.0 library does. Fancy Framework is free, so you can move to 3.0 without buying anything extra, and the templates you already pasted keep working.

Start with the free Fancy Framework

Pick a template and copy the version for your framework.

Get Fancy FrameworkBrowse templates