Vitops

Bricks elements

Every repo-owned Bricks element, its controls, defaults, seeded children and keywords, for driving the Bricks Builder UI.

Context for driving the Bricks Builder UI (e.g. Claude for Chrome). Every section below is generated from the element’s own source, so this reference always matches the elements currently deployed. See also the CSS class vocabulary in /css/classes.md and the integration guidance in /bricks/index.md.

How they appear in the builder

  • The elements register from dist/bricks/load.php and group under a “Vitops” category pinned to the top of the element panel. Insert one by searching its label (e.g. “Split”, “Carousel”) or any of its keywords (listed per element).
  • Two rendering families:
    • Web-component elements render a Lit custom element (<wc-*>, <wc-copy>, …) from dist/elements.js and progressively enhance. A few (Image Compare, Split Panel) show their children stacked in the builder canvas until the client-side upgrade runs — that is expected, not broken.
    • CSS-pattern elements (Split, Centered, Menu, Split Link) render plain markup styled by the framework CSS — no JS dependency.
  • Nestable elements accept child elements dropped into them; some seed starter children (listed as “Seeded children”). Non-nestable elements are configured entirely through their controls.

Configuring layout

Some layout is set through controls; some through CSS classes typed into the element’s built-in “CSS classes” field (called out per element as modifier classes). Responsive suffixes on those classes engage from a container breakpoint: -sm = 30rem, -md = 48rem, -lg = 64rem, -xl = 80rem.

Each control below lists its type, default/placeholder, any select options, and the CSS custom property it writes (when it drives one). Info notes flagged Note: carry the modifier-class and structural guidance from the element itself.

Split — vitops-split · nestable

A nestable flex row rendering the framework’s .split (layout.css) — equal columns by default. Set a ratio by adding a class in the CSS-classes field: split-1-2 / 2-1 / 1-3 / 3-1 / 1-4 / 4-1 / 2-3 / 3-2, each with an optional sm-/md-/lg-/xl- PREFIX to engage the ratio from a container breakpoint. flex-col stacks the columns below that breakpoint; split-reverse (also breakpoint-prefixable) swaps the two panels. Reversing puts visual order out of step with DOM order, so keep focusable content in only one of the two columns.

The .split base rides on the built-in “CSS classes” setting (defaulted below) so it shows in the builder canvas (assembled from settings) and the frontend.

Controls

  • HTML tag (select, default div) — Options: div, section, article, aside, main, header, footer, nav.
  • Note: Equal columns by default. Add a class in “CSS classes” for a ratio: split-1-2, 2-1, 1-3, 3-1, 1-4, 4-1, 2-3, 3-2 (prefix with sm-/md-/lg-/xl- to engage it from a breakpoint). Add flex-col to stack the columns below that breakpoint, and split-reverse to swap the two panels — when reversing, keep focusable content in only one column so the tab order stays linear.

Base CSS class: split (applied automatically; add ratio/modifier classes alongside it in the element’s “CSS classes” field).

Seeded children: Column 1, Column 2.

Keywords: split, columns, ratio, flex, container, layout.

Centered — vitops-centered · nestable

A nestable container that renders the framework’s named-track grid, .centered (src/css/layout.css). Children auto-place in the reading measure track; a child widens by adding breakout / spotlight / fullbleed (+ responsive -sm/-md/-lg/-xl) in its own Bricks “CSS classes” field.

The framework classes ride on the built-in “CSS classes” setting (defaulted below): a nestable element’s root is assembled from settings in the builder canvas, so classes added only in render()/set_root_attributes() never appear there — _cssClasses does.

Controls

  • HTML tag (select, default div) — Options: div, section, article, aside, main, header, footer, nav.
  • Measure (reading width) (number+units, default 65ch) — Bound to --width-measure.
  • Breakout width (number+units, default 90ch) — Bound to --width-breakout.
  • Spotlight width (number+units, default 120ch) — Bound to --width-spotlight.
  • Gutter (text, placeholder clamp(1rem, 4cqi, 3rem)) — Bound to --gutter.

Base CSS class: centered rhythm (applied automatically; add ratio/modifier classes alongside it in the element’s “CSS classes” field).

Keywords: centered, measure, grid, container, layout, track.

Carousel — vitops-carousel · nestable

Renders the Lit component (src/web-components/WCCarousel.ts) around a .carousel__track scroll container. Each direct child of the element is a slide.

Without JS the .carousel classes still yield a working scroll-snap carousel with a visible scrollbar, a “scroll for more” hint and — in Chromium — native prev/next buttons and dot navigation, so the builder canvas stays functional. Where those pseudo-elements are missing (Firefox, older Safari) the component builds real buttons and dots styled to match.

The .carousel base rides on the built-in “CSS classes” setting (defaulted below) so it applies in the canvas and the frontend. Add modifier classes there: carousel--scroll-buttons, carousel--scroll-markers, carousel--auto-pages, carousel--inert, carousel--force-stop, carousel--no-scrollbar, carousel--markers-below.

Note the slide track here is a

, not a