bricks-builderlisted

# Building websites with Bricks Builder (code-first) Bricks is a WordPress site builder. Its pages are **not** HTML files — they are a tree of element objects stored in WordPress postmeta as a PHP/JSON array. You build a Bricks site by **generating that element tree as JSON and importing it**, then letting Bricks render it to HTML+CSS on the frontend. You (Claude Code) **cannot operate the visual builder**. There is no canvas, no drag-and-drop, no live preview you can click. Everything you produce is data. This skill is the schema and workflow for producing correct Bricks data. > Targets **Bricks 2.3.x** and **Advanced Themer 3.3.x**. Bricks changes between > versions, so treat anything version-specific here as a starting point and confirm > it against the running install before relying on it. ## The core loop 1. **Understand the design *and the install*.** What sections, content, responsive behavior; reusable patterns → global classes (BEM) and components. Read the target install first ([references/16-live-introspection.md](references/16-live-introspection.md)) — its Bricks version, registered elements, existing classes/components, and CSS-loading mode shape every later choice. 2. **Model it as a Bricks element tree** using native elements (see [references/03-elements.md](references/03-elements.md)). Each node is `{ id, name, parent, children, settings }`. 3. **Style with global classes**, not per-element ad-hoc settings, and not IDs. See [reference