Opens in a new tab
Login/RegisterDownload

In review at WordPress.org · install the zip meanwhile

The free CSS framework for Bricks Builder, now inside Bricks itself.

A plugin writes the variables into Bricks' own storage (Etch too) and gives you a panel to move them: preview, review, apply, undo. Delete the plugin and nothing on your site changes.

Download the pluginHow it works

Version 1.3.4 · WordPress 6.5+ · PHP 8.1+ · Bricks and Etch · GPL, free

The Fancy Framework panel, Colors tab: the primary color with its contrast and calculated tones

The real panel, running on this page. Try anything: nothing is saved.

What changed

The same framework, done two ways.

Until now you built it here and pasted it into your builder by hand. Now the framework lives in the builder itself, and the generator still works for anyone who prefers it.

The web generator

  • Pick colors on this site, in a browser tab.
  • Download a JSON file, or copy the CSS.
  • Paste it into Bricks or Etch by hand.
  • Change one value? Generate and paste again.
  • Deactivate? Your pasted CSS stays, as it is.

The plugin

  • Pick colors on your own site, live.
  • No files or CSS to copy.
  • Written into Bricks' or Etch's own variables.
  • Change one value? Move it, review, apply.
  • Deactivate? Your variables stay as they are.

The panel

Open it where you are working.

Inside the Bricks or Etch builder, in wp-admin, and on your own site from the admin bar. The same panel, the same undo.

The Bricks builder with the panel open on the right, in Bricks' own dark colors
Inside Bricks, in Bricks' own colors.
The Fancy Framework screen in wp-admin: what is written, the accessibility verdict, the last change and its undo
In wp-admin: what is written, the accessibility verdict, undo.

What's inside

Everything the generator made, with controls.

The same variables you know. The difference: you change them in place, whenever you want, and nothing is regenerated.

Shape

Radius for cards, buttons and pills, and three shadows, from one setting.

Base CSS

Focus ring, smooth anchors, styled lists, at zero specificity.

AA · 5.6 : 1

Accessibility seal

Your own values checked against WCAG 2.2 AA, with a report.

New in 1.1

Dark mode

Off by default. Only role colors change; your brand stays.

Five personalities

Type, weight, radius and shadow set together, in one click.

Your own AI, over MCP

It reads the system and proposes; it applies only if you allow it.

How it works

Three steps. Nothing is written until you say so.

Every change is previewed on your page first. Apply lists every variable, and a value you set by hand is never overwritten without asking.

  1. 01

    Install the zip

    Plugins › Add New Plugin › Upload Plugin. Choose fancy-framework-1.3.4.zip, install, activate.

  2. 02

    Open the panel

    From the admin bar on your site, inside Bricks or Etch, or from Fancy Framework in wp-admin. Have a JSON from the web? Import it there.

  3. 03

    Move, review, apply

    The page previews live. Apply lists every variable first, and undo is one click. A history keeps every apply you ever made.

Download the pluginRead the docs
The Bricks builder with the Fancy Framework panel open, writing into Bricks' own global variables
0 bytesof JavaScript on your pages

Native

It writes to Bricks' own variables. Remove it and nothing changes.

The variables land in Bricks' global variables and color palette, or in Etch's own styles, like any you made yourself. Every figure below is measured on version 1.3.4.

0
external requests, ever
1.3 KBof base CSS, inside the builder's own stylesheet
207variables, written as Bricks global variables
1.4 MBthe whole plugin, zipped

Questions

All questions, in the docs

Yes. GPL-2.0-or-later, and nothing in it is locked behind another product.

Nothing visible. The variables live in Bricks' or Etch's own storage, so they stay exactly as they are.

No. It makes no external requests and keeps no statistics. The optional AI connects your own assistant to your own site over MCP, with no service of ours in between.

No. A variable you already have is never overwritten without asking; the review lets you keep yours. Your classes and custom CSS are left alone.

Both, with the panel inside either builder. On Bricks it writes global variables and the color palette; on Etch, a Fancy Framework collection in its own styles, adopting the one you pasted from the web if there is one.

Get it

Two ways to get Fancy Framework

Pick the one that fits today. You can move from one to the other at any time: the plugin imports the generator's JSON on Bricks and adopts the pasted CSS on Etch.

The plugin

Everything in the panel, on your own site.

  • Free and GPL
  • WordPress 6.5+ · PHP 8.1+
  • Bricks or Etch
Download the plugin

The web generator

Build it in your browser, paste it by hand.

  • No plugin to install
  • A JSON for Bricks, the CSS for Etch
  • Figma to Bricks uses the same variables
Open the web generator
  1. 1Plugins › Add New Plugin › Upload Plugin
  2. 2Choose fancy-framework-1.3.4.zip
  3. 3Install Now, then Activate

Version 1.3.4. Updates are manual until it is listed on WordPress.org: upload the new zip over the old one.

Etch, the builder by EtchWP

The same panel in Etch.

The plugin writes a Fancy Framework collection into Etch's own styles, with the panel inside the Etch builder, in the admin bar and in wp-admin, dark mode included. If you pasted the web's CSS into Etch's Style Manager before, it adopts that collection.

Fancy Framework in Etch
The panel open on an Etch site, Colors tab
The panel on an Etch site.