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

Location	Use When
Element → Style panel	Styling a single element visually
Element → Custom CSS	Overrides or pseudo-elements for this element
Global Class → CSS	Reusable styles across many elements
Settings → Custom Code	Global :root tokens and base resets
Child theme style.css	Permanent 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

Type	Class Format	Best For
Bricks element ID	#brxe-abc123	One-off targeting (DevTools only)
Bricks Global Class	.my-hero-section	Reusable components
WordPress body class	.page-id-42	Page-specific overrides
Post type class	.single-post	Content 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.