Skip to main content

Bricks Builder CSS Guide

Bricks Builder is a visual, front-end WordPress theme builder that generates clean CSS directly in the page DOM. It's a powerful platform for applying your CSS knowledge visually.

1. How Bricks Loads CSS​

Bricks generates inline styles and dynamic CSS that are output in the <head> of the page. It uses:

  • Element styles: CSS scoped to individual elements via unique IDs (e.g., #brxe-abc123).
  • Global Classes: Reusable CSS classes applied across elements.
  • Custom CSS: Per-element custom CSS panel.

2. Bricks Global Styling System​

Under Bricks → Global Styles you set:

  • Colors → Available as color pickers in all elements.
  • Typography → Sets heading/body fonts globally.
  • CSS Variables → Custom variables injected into :root.

Custom Variables in Bricks Settings:​

Navigate to Bricks → Settings → Custom Code → Custom CSS and define your tokens:

:root {
  --brand-primary:   #f5a623;
  --brand-dark:      #0f0f0f;
  --brand-text:      #f0f0f0;
  --section-padding: 5rem 2rem;
}

These are now accessible in any element's CSS.

3. Where to Write CSS in Bricks​

LocationUse When
Element → Style panelStyling a single element visually
Element → Custom CSSOverrides or pseudo-elements for this element
Global Class → CSSReusable styles across many elements
Settings → Custom CodeGlobal :root tokens and base resets
Child theme style.cssPermanent global overrides

4. Applying AI-Generated CSS in Bricks​

The Workflow:

  1. Generate your component in pure HTML/CSS with AI.
  2. Build the matching structure in Bricks visually (Section → Container → Heading, etc.).
  3. For each element, open Custom CSS and paste the relevant CSS rules.
  4. Replace hardcoded values with your Bricks global variables.

Example — Porting a Hero Section:​

AI-generated CSS:

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  padding: 5rem 2rem;
}

In Bricks Element Custom CSS:

/* Use %root% to target the current element */
%root% {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-dark), #16213e);
  padding: var(--section-padding);
}

[!NOTE] In Bricks, %root% in the Custom CSS panel refers to the element itself. This avoids specificity conflicts and is the recommended pattern.

5. Bricks Global Classes vs WordPress Classes​

TypeClass FormatBest For
Bricks element ID#brxe-abc123One-off targeting (DevTools only)
Bricks Global Class.my-hero-sectionReusable components
WordPress body class.page-id-42Page-specific overrides
Post type class.single-postContent type overrides

6. Using AI to Generate Bricks-Ready CSS​

Prompt template:

Generate CSS for a [component] to use inside Bricks Builder WordPress.
- Use %root% to target the main element.
- Use CSS custom properties referencing var(--brand-primary), var(--brand-dark), var(--brand-text).
- Include :hover states and transition effects.
- Ensure it is mobile-first responsive.