Skip to content

Latest commit

 

History

History
1546 lines (1298 loc) · 41.2 KB

bricks-layouts.md

File metadata and controls

1546 lines (1298 loc) · 41.2 KB

Bricks Builder Layouts Skill

Create ready-to-paste sections and importable templates for Bricks Builder.

Styling Priority

When styling elements, follow this order of preference:

  1. Core Framework Classes (core-framework.css) - Use existing utility classes first
  2. Inline Settings - Use element settings for element-specific styling
  3. Custom CSS - Only for complex/unique styles not covered by framework

The Core Framework provides a comprehensive utility-first CSS library. Always prefer these classes over creating new global classes or inline styles.

Two Layout Formats

Bricks uses two distinct JSON formats:

1. Sections (Copy/Paste Format)

For pasting directly into the builder via clipboard. Used for hero sections, feature blocks, CTAs, etc.

{
  "content": [...elements...],
  "source": "bricksCopiedElements",
  "sourceUrl": "https://example.com",
  "version": "2.0.1",
  "globalClasses": [...class definitions...],
  "globalElements": []
}

2. Templates (Site-Wide Assignment)

Full templates with metadata for importing via Bricks Templates system.

{
  "id": 1195,
  "name": "header-new",
  "title": "Header New",
  "date": "2025-07-24 14:09:56",
  "date_formatted": "July 24, 2025",
  "author": {
    "name": "Author Name",
    "avatar": "https://...",
    "url": "https://..."
  },
  "permalink": "https://example.com/template/header-new/",
  "thumbnail": null,
  "bundles": [],
  "tags": [],
  "type": "header",
  "header": [...elements...],
  "templateType": "header",
  "global_classes": [...class definitions...],
  "globalVariables": [...variables...],
  "globalVariablesCategories": [...]
}

Section Structure (Copy/Paste)

Required Keys

Key Type Description
content array Root array of all elements
source string Must be "bricksCopiedElements"
sourceUrl string Origin URL for reference
version string Bricks version (e.g., "2.0.1")
globalClasses array CSS class definitions used
globalElements array Global elements (usually empty)

Element Structure

Each element in content array:

{
  "id": "enrntt",
  "name": "section",
  "parent": 0,
  "children": ["azdlaa"],
  "settings": {
    "_cssGlobalClasses": ["classId1", "classId2"]
  },
  "label": "Hero"
}
Property Description
id Unique 6-character alphanumeric ID
name Element type (section, container, block, heading, etc.)
parent Parent element ID or 0 for root
children Array of child element IDs
settings Element-specific settings
label Display name in structure panel
themeStyles Optional array of theme style references

Element Types Reference

Layout Elements

Name Purpose Key Settings
section Full-width section wrapper tag, _padding
container Content container with max-width _width, _widthMax, _direction
block Flexbox div element tag, _display, _direction, _flexWrap
div Basic div element tag

Content Elements

Name Purpose Key Settings
heading H1-H6 heading text, tag
text-basic Paragraph text text, tag
text Rich text with HTML text (HTML content)
button Button element text, style, link, icon, iconPosition
image Image element image, _aspectRatio, _objectFit
logo Site logo logo, logoWidth, logoHeight
icon SVG icon icon, iconSize

Navigation Elements

Name Purpose Key Settings
nav-nested Nested navigation menu mobileMenu
dropdown Dropdown menu item text, toggleOn, megaMenu
text-link Navigation link text, link
toggle Mobile menu toggle icon, animation, toggleSelector

Interactive Elements

Name Purpose Key Settings
slider-nested Carousel/slider perPage, gap, autoplay, pagination
accordion Collapsible content titleTypography, contentTypography
icon-box Icon with text icon, iconSize, typographyHeading, typographyBody
form Contact form Field and submit button settings
list Styled list separatorDisable, itemMargin

Utility Elements

Name Purpose Key Settings
code Custom CSS/JS cssCode, javascriptCode, executeCode

Element Settings by Type

Heading

{
  "text": "Welcome to Our Site",
  "tag": "h1",
  "_cssGlobalClasses": ["heading-1"],
  "_typography": {
    "font-family": "Inter",
    "font-size": "var(--text-3xl)",
    "font-weight": "700",
    "color": {"raw": "var(--color-secondary)"},
    "text-align": "center"
  }
}

Text (Rich Text)

{
  "text": "<p>Paragraph with <strong>bold</strong> and <em>italic</em> text.</p>",
  "_cssGlobalClasses": ["body-text"],
  "_typography": {
    "font-size": "var(--text-sm)",
    "color": {"raw": "var(--color-tertiary)"}
  }
}

Button

{
  "text": "Get Started",
  "style": "primary",
  "link": {"type": "external", "url": "#"},
  "icon": {"library": "fontawesomeSolid", "icon": "fas fa-arrow-right"},
  "iconPosition": "right",
  "_cssGlobalClasses": ["btn", "btn--primary"]
}

Button styles: primary, secondary, info, success, warning, danger, light, dark

Image

{
  "image": {
    "url": "https://example.com/image.jpg",
    "external": true,
    "filename": "image.jpg"
  },
  "_aspectRatio": "16 / 9",
  "_objectFit": "cover",
  "_objectPosition": "50%",
  "_border": {
    "radius": {"top": "var(--radius-m)", "right": "var(--radius-m)", "bottom": "var(--radius-m)", "left": "var(--radius-m)"}
  }
}

For internal images (from media library):

{
  "image": {
    "id": 123,
    "filename": "image.jpg",
    "size": "large",
    "full": "https://example.com/wp-content/uploads/image.jpg",
    "url": "https://example.com/wp-content/uploads/image-1024x768.jpg"
  }
}

Logo

{
  "logo": {
    "url": "https://example.com/logo.svg",
    "external": true,
    "filename": "logo.svg"
  },
  "logoWidth": "clamp(16.0rem, 14.7763rem + 3.8241vw, 20.0rem)",
  "logoHeight": "auto"
}

Nav Nested (Navigation Menu)

{
  "mobileMenu": "tablet_portrait",
  "_cssGlobalClasses": ["main-nav"]
}

Values for mobileMenu: always, never, laptop, tablet_landscape, tablet_portrait, mobile_landscape, mobile_portrait

Dropdown (Menu Item)

{
  "text": "Services",
  "toggleOn": "both",
  "megaMenu": true,
  "megaMenuSelector": ".header__container",
  "link": {"type": "external", "url": "#"},
  "_cssGlobalClasses": ["dropdown-menu"]
}

Values for toggleOn: hover, click, both

Toggle (Mobile Menu Button)

{
  "icon": {
    "library": "svg",
    "svg": {
      "id": 2530,
      "filename": "bars.svg",
      "url": "https://example.com/bars.svg"
    }
  },
  "animation": "spin",
  "toggleSelector": ".mobile-menu",
  "ariaLabel": "Open Menu",
  "iconSize": "30",
  "barColor:tablet_portrait": {"raw": "var(--color-secondary)"}
}

Slider Nested (Carousel)

{
  "perPage": "3",
  "perPage:tablet_portrait": "2",
  "perPage:mobile_portrait": "1",
  "gap": "2rem",
  "autoplay": true,
  "interval": "5000",
  "pauseOnHover": true,
  "pagination": true,
  "paginationBottom": "-40",
  "arrows": true,
  "height": "none",
  "_cssCustom": ".slider-class .splide__list { transition-timing-function: linear !important; }"
}

Icon Box

{
  "icon": {"library": "fontawesomeSolid", "icon": "fas fa-rocket"},
  "iconSize": "3rem",
  "gap": "var(--spacing-xs)",
  "typographyHeading": {
    "color": {"raw": "var(--color-secondary)"},
    "font-size": "var(--text-md)"
  },
  "typographyBody": {
    "font-family": "Inter",
    "color": {"raw": "var(--color-tertiary)"},
    "font-size": "var(--text-sm)"
  },
  "_cssCustom": ".icon-box h3 { margin-bottom: var(--spacing-3xs); }"
}

Accordion

{
  "titleTypography": {
    "font-size": "var(--text-md)",
    "color": {"raw": "var(--color-secondary)"}
  },
  "contentTypography": {
    "font-size": "var(--text-sm)",
    "color": {"raw": "var(--color-tertiary)"}
  },
  "titleMargin": {"bottom": "var(--spacing-xs)"},
  "contentMargin": {"bottom": "var(--spacing-md)"},
  "titleBorder": {
    "width": {"bottom": "1"},
    "style": "solid",
    "color": {"raw": "var(--color-tertiary)"}
  },
  "_cssCustom": ".accordion .brxe-icon { transition: transform 0.3s ease; }\n.accordion .brx-open .brxe-icon { transform: rotate(90deg); }"
}

Form (Newsletter Style)

{
  "submitButtonWidth": "35",
  "submitButtonTypography": {
    "color": {"raw": "var(--color-light)"},
    "font-size": "var(--text-xs)"
  },
  "submitButtonBackgroundColor": {"raw": "var(--color-primary)"},
  "submitButtonBorder": {
    "width": {"top": "2", "right": "2", "bottom": "2", "left": "2"},
    "style": "solid",
    "color": {"raw": "var(--color-primary)"}
  },
  "fieldTypography": {
    "color": {"raw": "var(--color-secondary)"},
    "font-size": "var(--text-xs)"
  },
  "fieldBorder": {
    "width": {"top": "1", "right": "0", "bottom": "1", "left": "1"},
    "style": "solid",
    "color": {"raw": "var(--color-light)"}
  },
  "fieldPadding": {"top": "0.5rem", "bottom": "0.5rem", "left": "1.2rem", "right": "1.2rem"},
  "fieldMargin": {"bottom": "0"}
}

List (Footer Links)

{
  "separatorDisable": true,
  "itemMargin": {"bottom": "1.5rem"},
  "itemJustifyContent": "flex-start",
  "_typography": {
    "font-family": "Inter",
    "color": {"raw": "var(--color-tertiary)"},
    "font-size": "var(--text-sm)"
  }
}

Code Element

{
  "executeCode": true,
  "cssCode": ".my-section { background: linear-gradient(...); }",
  "javascriptCode": "(function() { console.log('Loaded'); })();",
  "signature": "hash-for-security",
  "user_id": 1,
  "time": 1720582839
}

Common Layout Settings

Flexbox Container

{
  "_display": "flex",
  "_direction": "row",
  "_direction:tablet_portrait": "column",
  "_justifyContent": "space-between",
  "_alignItems": "center",
  "_flexWrap": "wrap",
  "_columnGap": "var(--spacing-md)",
  "_rowGap": "var(--spacing-md)"
}

Grid Container

{
  "_display": "grid",
  "_gridTemplateColumns": "repeat(3, minmax(0, 1fr))",
  "_gridTemplateColumns:tablet_portrait": "repeat(2, minmax(0, 1fr))",
  "_gridTemplateColumns:mobile_portrait": "repeat(1, minmax(0, 1fr))",
  "_gridGap": "var(--spacing-md)",
  "_alignItemsGrid": "stretch"
}

Width & Sizing

{
  "_width": "100%",
  "_width:tablet_portrait": "50%",
  "_widthMax": "1200",
  "_widthMin": "300",
  "_height": "auto",
  "_heightMin": "400",
  "_aspectRatio": "16 / 9"
}

Spacing

{
  "_padding": {"top": "var(--spacing-lg)", "right": "var(--spacing-md)", "bottom": "var(--spacing-lg)", "left": "var(--spacing-md)"},
  "_margin": {"top": "0", "bottom": "var(--spacing-xl)"}
}

Typography

{
  "_typography": {
    "font-family": "Inter",
    "font-size": "var(--text-md)",
    "font-weight": "600",
    "line-height": "1.5",
    "letter-spacing": "0.02em",
    "text-transform": "uppercase",
    "text-align": "center",
    "color": {"raw": "var(--color-secondary)"}
  }
}

Background

{
  "_background": {
    "color": {"raw": "var(--color-primary)"},
    "videoUrl": "https://example.com/video.mp4"
  },
  "_gradient": {
    "applyTo": "background",
    "colors": [
      {"id": "c1", "color": {"raw": "transparent"}, "stop": "0"},
      {"id": "c2", "color": {"raw": "var(--color-dark-70)"}, "stop": "100"}
    ]
  }
}

Borders & Radius

{
  "_border": {
    "width": {"top": "1", "right": "1", "bottom": "1", "left": "1"},
    "style": "solid",
    "color": {"raw": "var(--border-primary)"},
    "radius": {"top": "var(--radius-m)", "right": "var(--radius-m)", "bottom": "var(--radius-m)", "left": "var(--radius-m)"}
  }
}

Position & Overlay

{
  "_position": "relative",
  "_zIndex": "1",
  "_overflow": "hidden",
  "_isolation": "isolate"
}

For absolute positioned overlays:

{
  "_position": "absolute",
  "_top": "0",
  "_right": "0",
  "_bottom": "0",
  "_left": "0",
  "_zIndex": "-1"
}

Shadows

{
  "_boxShadow": {
    "values": {"blur": "20", "offsetY": "8", "offsetX": "0", "spread": "0"},
    "color": {"raw": "var(--shadow-primary)"}
  }
}

Custom CSS

{
  "_cssCustom": ".my-element { transition: all 0.3s ease; }\n.my-element:hover { transform: translateY(-5px); }"
}

Global Classes Definition

Basic Class

{
  "id": "btn-primary",
  "name": "btn-primary",
  "settings": {
    "_typography": {"color": {"raw": "var(--color-light)"}},
    "_background": {"color": {"raw": "var(--color-primary)"}},
    "_padding": {"top": "1rem", "right": "2rem", "bottom": "1rem", "left": "2rem"},
    "_border": {"radius": {"top": "var(--radius-s)", "right": "var(--radius-s)", "bottom": "var(--radius-s)", "left": "var(--radius-s)"}}
  }
}

Class with Category

{
  "id": "heading-1",
  "name": "heading-1",
  "settings": {
    "_typography": {"font-family": "Inter", "font-size": "var(--text-3xl)"}
  },
  "category": "typography",
  "_categoryData": {"id": "typography", "name": "Typography"},
  "modified": 1733551470,
  "user_id": 1
}

Class with Custom CSS

{
  "id": "card-hover",
  "name": "card-hover",
  "settings": {
    "_cssCustom": ".card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }\n.card-hover:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); }"
  }
}

Responsive Settings

Append breakpoint suffix to any setting:

{
  "_direction": "row",
  "_direction:tablet_portrait": "column",
  "_direction:mobile_portrait": "column",
  "_display": "flex",
  "_display:mobile_portrait": "none",
  "_width": "50%",
  "_width:tablet_portrait": "100%",
  "_gridTemplateColumns": "repeat(3, minmax(0, 1fr))",
  "_gridTemplateColumns:tablet_portrait": "repeat(2, minmax(0, 1fr))",
  "_gridTemplateColumns:mobile_portrait": "repeat(1, minmax(0, 1fr))"
}

Breakpoints

Breakpoint Suffix Max Width
Desktop (none) -
Laptop :laptop 1366px
Tablet Landscape :tablet_landscape 1024px
Tablet Portrait :tablet_portrait 991px
Mobile Landscape :mobile_landscape 767px
Mobile Portrait :mobile_portrait 478px
Small Mobile :small_mobile 320px

Template Structure (Site-Wide)

Required Keys

Key Type Description
id int Unique template ID
name string Template slug
title string Display title
date string Creation date (Y-m-d H:i:s)
type string Template type
templateType string Same as type
header or content array Elements (key based on type)

Template Types

Type Content Key Purpose
header header Site header
footer footer Site footer
content content Page content
section content Reusable section
archive content Archive pages
search content Search results
error content 404 page
popup content Popup/modal

Author Object

{
  "name": "Author Name",
  "avatar": "https://secure.gravatar.com/avatar/...",
  "url": "https://example.com"
}

Global Variables

{
  "id": "primary",
  "name": "primary",
  "value": "#2364a9",
  "category": "corefrm"
}

Variable Categories

{
  "id": "corefrm",
  "name": "Core Framework"
}

Complete Layout Examples

Hero Section with CTA

{
  "content": [
    {
      "id": "sec001",
      "name": "section",
      "parent": 0,
      "children": ["con001"],
      "settings": {"_cssGlobalClasses": ["pad-top-bottom-lg"]},
      "label": "Hero"
    },
    {
      "id": "con001",
      "name": "container",
      "parent": "sec001",
      "children": ["col001", "col002"],
      "settings": {
        "_direction": "row",
        "_direction:tablet_portrait": "column",
        "_alignItems": "center",
        "_cssGlobalClasses": ["gap-md"]
      }
    },
    {
      "id": "col001",
      "name": "block",
      "parent": "con001",
      "children": ["hdg001", "txt001", "btns01"],
      "settings": {"_cssGlobalClasses": ["gap-xs"]},
      "label": "Content Column"
    },
    {
      "id": "hdg001",
      "name": "heading",
      "parent": "col001",
      "children": [],
      "settings": {
        "text": "Speak directly to the visitor's challenge",
        "tag": "h1",
        "_cssGlobalClasses": ["heading-1", "text-secondary"]
      }
    },
    {
      "id": "txt001",
      "name": "text",
      "parent": "col001",
      "children": [],
      "settings": {
        "text": "<p>Clearly explain how your product or service solves the problem—keep it simple and direct.</p>",
        "_cssGlobalClasses": ["text-p", "text-tertiary"]
      }
    },
    {
      "id": "btns01",
      "name": "block",
      "parent": "col001",
      "children": ["btn001", "btn002"],
      "settings": {
        "_direction": "row",
        "_cssGlobalClasses": ["gap-xs", "margin-top-xs"]
      },
      "label": "Buttons"
    },
    {
      "id": "btn001",
      "name": "button",
      "parent": "btns01",
      "children": [],
      "settings": {
        "text": "Get Started",
        "_cssGlobalClasses": ["btn", "btn--primary"]
      }
    },
    {
      "id": "btn002",
      "name": "button",
      "parent": "btns01",
      "children": [],
      "settings": {
        "text": "Learn More",
        "_cssGlobalClasses": ["btn", "btn--outline"]
      }
    },
    {
      "id": "col002",
      "name": "block",
      "parent": "con001",
      "children": ["img001"],
      "settings": {},
      "label": "Image Column"
    },
    {
      "id": "img001",
      "name": "image",
      "parent": "col002",
      "children": [],
      "settings": {
        "image": {"url": "https://example.com/hero.jpg", "external": true},
        "_cssGlobalClasses": ["object-cover", "full-width"]
      }
    }
  ],
  "source": "bricksCopiedElements",
  "sourceUrl": "https://example.com",
  "version": "2.0.1",
  "globalClasses": [
    {"id": "pad-top-bottom-lg", "name": "pad-top-bottom-lg", "settings": {"_padding": {"bottom": "var(--spacing-lg)", "top": "var(--spacing-lg)"}}},
    {"id": "gap-md", "name": "gap-md", "settings": {"_columnGap": "var(--spacing-md)", "_rowGap": "var(--spacing-md)"}},
    {"id": "gap-xs", "name": "gap-xs", "settings": {"_columnGap": "var(--spacing-xs)", "_rowGap": "var(--spacing-xs)"}},
    {"id": "heading-1", "name": "heading-1", "settings": {"_typography": {"font-family": "Inter", "font-size": "var(--text-3xl)"}}},
    {"id": "text-secondary", "name": "text-secondary", "settings": {"_typography": {"color": {"raw": "var(--color-secondary)"}}}},
    {"id": "text-p", "name": "text-p", "settings": {"_typography": {"font-size": "var(--text-sm)", "font-family": "Inter"}}},
    {"id": "text-tertiary", "name": "text-tertiary", "settings": {"_typography": {"color": {"raw": "var(--color-tertiary)"}}}},
    {"id": "margin-top-xs", "name": "margin-top-xs", "settings": {"_margin": {"top": "var(--spacing-xs)"}}},
    {"id": "btn", "name": "btn", "settings": {"_padding": {"top": "1rem", "right": "2rem", "bottom": "1rem", "left": "2rem"}}},
    {"id": "btn--primary", "name": "btn--primary", "settings": {"_background": {"color": {"raw": "var(--color-primary)"}}, "_typography": {"color": {"raw": "var(--color-light)"}}}},
    {"id": "btn--outline", "name": "btn--outline", "settings": {"_border": {"color": {"raw": "var(--color-primary)"}}, "_typography": {"color": {"raw": "var(--color-primary)"}}}},
    {"id": "object-cover", "name": "object-cover", "settings": {"_objectFit": "cover"}},
    {"id": "full-width", "name": "full-width", "settings": {"_width": "100%"}}
  ],
  "globalElements": []
}

Features Grid (3 Columns)

{
  "content": [
    {
      "id": "sec001",
      "name": "section",
      "parent": 0,
      "children": ["con001"],
      "settings": {"_cssGlobalClasses": ["pad-top-bottom-lg"]},
      "label": "Features"
    },
    {
      "id": "con001",
      "name": "container",
      "parent": "sec001",
      "children": ["hdr001", "grid01"],
      "settings": {"_cssGlobalClasses": ["gap-md", "container-width-md"]}
    },
    {
      "id": "hdr001",
      "name": "block",
      "parent": "con001",
      "children": ["tag001", "hdg001"],
      "settings": {"_cssGlobalClasses": ["text-center", "gap-xs"]},
      "label": "Section Header"
    },
    {
      "id": "tag001",
      "name": "heading",
      "parent": "hdr001",
      "children": [],
      "settings": {"text": "Features", "tag": "h6", "_cssGlobalClasses": ["heading-6", "text-font-600"]}
    },
    {
      "id": "hdg001",
      "name": "heading",
      "parent": "hdr001",
      "children": [],
      "settings": {"text": "Everything you need", "tag": "h2", "_cssGlobalClasses": ["heading-2"]}
    },
    {
      "id": "grid01",
      "name": "block",
      "parent": "con001",
      "children": ["feat01", "feat02", "feat03"],
      "settings": {"_cssGlobalClasses": ["grid-3col", "grid-gap-md"]},
      "label": "Features Grid"
    },
    {
      "id": "feat01",
      "name": "icon-box",
      "parent": "grid01",
      "children": [],
      "settings": {
        "icon": {"library": "fontawesomeSolid", "icon": "fas fa-rocket"},
        "_cssGlobalClasses": ["icon-box"]
      }
    },
    {
      "id": "feat02",
      "name": "icon-box",
      "parent": "grid01",
      "children": [],
      "settings": {
        "icon": {"library": "fontawesomeSolid", "icon": "fas fa-shield-alt"},
        "_cssGlobalClasses": ["icon-box"]
      }
    },
    {
      "id": "feat03",
      "name": "icon-box",
      "parent": "grid01",
      "children": [],
      "settings": {
        "icon": {"library": "fontawesomeSolid", "icon": "fas fa-chart-line"},
        "_cssGlobalClasses": ["icon-box"]
      }
    }
  ],
  "source": "bricksCopiedElements",
  "sourceUrl": "https://example.com",
  "version": "2.0.1",
  "globalClasses": [
    {"id": "pad-top-bottom-lg", "name": "pad-top-bottom-lg", "settings": {"_padding": {"bottom": "var(--spacing-lg)", "top": "var(--spacing-lg)"}}},
    {"id": "gap-md", "name": "gap-md", "settings": {"_columnGap": "var(--spacing-md)", "_rowGap": "var(--spacing-md)"}},
    {"id": "gap-xs", "name": "gap-xs", "settings": {"_columnGap": "var(--spacing-xs)", "_rowGap": "var(--spacing-xs)"}},
    {"id": "container-width-md", "name": "container-width-md", "settings": {"_width": "90%", "_widthMax": "900"}},
    {"id": "text-center", "name": "text-center", "settings": {"_typography": {"text-align": "center"}}},
    {"id": "heading-2", "name": "heading-2", "settings": {"_typography": {"font-family": "Inter", "font-size": "var(--text-2xl)"}}},
    {"id": "heading-6", "name": "heading-6", "settings": {"_typography": {"font-size": "var(--text-xs)", "font-family": "Inter", "text-transform": "uppercase"}}},
    {"id": "text-font-600", "name": "text-font-600", "settings": {"_typography": {"font-weight": "600"}}},
    {"id": "grid-3col", "name": "grid-3col", "settings": {"_gridTemplateColumns": "repeat(3, minmax(0, 1fr))", "_display": "grid", "_gridTemplateColumns:tablet_portrait": "repeat(2, minmax(0, 1fr))", "_gridTemplateColumns:mobile_portrait": "repeat(1, minmax(0, 1fr))"}},
    {"id": "grid-gap-md", "name": "grid-gap-md", "settings": {"_gridGap": "var(--spacing-md)"}},
    {"id": "icon-box", "name": "icon-box", "settings": {"typographyBody": {"font-family": "Inter", "color": {"raw": "var(--color-tertiary)"}, "font-size": "var(--text-sm)"}, "typographyHeading": {"color": {"raw": "var(--color-secondary)"}, "font-size": "var(--text-md)"}, "gap": "var(--spacing-xs)", "iconSize": "3rem"}}
  ],
  "globalElements": []
}

Core Framework Classes Reference

The core-framework.css provides utility classes. Use these via _cssGlobalClasses setting.

Components

Class Purpose
.btn Button base style
.btn.small / .btn.large Button sizes
.btn.secondary / .btn.tertiary / .btn.ghost / .btn.slight Button variants
.card / .card.secondary / .card.primary Card component
.badge / .badge.secondary Badge/tag component
.link / .link.secondary / .link.tertiary Link styles
.input Form input styling
.select Form select styling
.icon / .icon.small / .icon.large Icon container
.avatar / .avatar.small / .avatar.large Avatar image
.divider / .divider.vertical Divider line
.checkbox / .radio Form checkbox/radio
.expand-click Expand click area to parent

Layout & Flexbox

Class Purpose
.flex-row / .flex-column Flex direction
.flex-wrap / .flex-nowrap Flex wrap
.flex-1 / .flex-2 / .flex-3 Flex grow
.row Flex row with wrap
.column Flex column
.items-center / .items-left / .items-right Align items horizontally
.items-top / .items-middle / .items-bottom Align items vertically
.content-center / .content-left / .content-right Justify content horizontally
.content-top / .content-middle / .content-bottom Justify content vertically
.self-center / .self-stretch Align self
.space-between / .space-around Justify content

Grid

Class Purpose
.columns-2 to .columns-8 Grid columns
.columns-min-5 to .columns-min-70 Auto-fit grid with min width
.col-span-2 to .col-span-8 Column span
.col-start-1 to .col-start-8 Column start
.row-span-2 to .row-span-8 Row span
.row-start-1 to .row-start-8 Row start

Spacing (Gap)

Class Purpose
.gap-4xs to .gap-4xl Gap (4xs, 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl)

Padding

Class Purpose
.padding-4xs to .padding-4xl All sides padding
.padding-top-xs to .padding-top-4xl Top padding
.padding-bottom-xs to .padding-bottom-4xl Bottom padding
.padding-left-xs to .padding-left-4xl Left padding
.padding-right-xs to .padding-right-4xl Right padding
.padding-horizontal-xs to .padding-horizontal-4xl Left + Right padding
.padding-vertical-xs to .padding-vertical-4xl Top + Bottom padding

Margin

Class Purpose
.margin-4xs to .margin-4xl All sides margin
.margin-top-xs to .margin-top-4xl Top margin
.margin-bottom-xs to .margin-bottom-4xl Bottom margin
.margin-left-xs to .margin-left-4xl Left margin
.margin-right-xs to .margin-right-4xl Right margin
.margin-horizontal-xs to .margin-horizontal-4xl Left + Right margin
.margin-vertical-xs to .margin-vertical-4xl Top + Bottom margin

Width & Height

Class Purpose
.full-width / .full-height 100% width/height
.auto-width / .auto-height Auto width/height
.screen-width / .screen-height 100vw/100vh
.width-10 to .width-90 Percentage width (10%, 20%, etc.)
.max-width-10 to .max-width-140 Max width in rem
.max-site-width Max site container width

Aspect Ratio

Class Purpose
.aspect-1 1:1 square
.aspect-16-9 / .aspect-9-16 16:9 and 9:16
.aspect-4-3 / .aspect-3-4 4:3 and 3:4
.aspect-3-2 / .aspect-2-3 3:2 and 2:3

Background Colors

Class Purpose
.bg-primary / .bg-primary-5 to .bg-primary-90 Primary with opacity
.bg-primary-l-1 to .bg-primary-l-4 Primary light variants
.bg-primary-d-1 to .bg-primary-d-4 Primary dark variants
.bg-secondary, .bg-tertiary Same pattern as primary
.bg-light / .bg-dark Light/dark backgrounds
.bg-light-5 to .bg-light-90 Light with opacity
.bg-dark-5 to .bg-dark-90 Dark with opacity
.bg-body / .bg-surface Body/surface backgrounds
.bg-success / .bg-error Status colors

Text Colors

Class Purpose
.text-primary / .text-secondary / .text-tertiary Brand text colors
.text-primary-l-1 to .text-primary-l-4 Light variants
.text-primary-d-1 to .text-primary-d-4 Dark variants
.text-light / .text-dark Light/dark text
.text-body / .text-title Body/title text
.text-success / .text-error Status text colors

Text Size

Class Purpose
.text-xs / .text-s / .text-m / .text-l / .text-xl Font sizes
.text-2xl / .text-3xl / .text-4xl Large font sizes

Text Alignment

Class Purpose
.text-left / .text-center / .text-right Text alignment

Text Style

Class Purpose
.bold Font weight bold
.font-100 to .font-900 Font weights
.italic Italic text
.uppercase / .lowercase Text transform
.underline Text decoration
.white-space-nowrap No text wrap
.line-height-xs to .line-height-xl Line heights

Border Colors

Class Purpose
.border-primary / .border-secondary / .border-tertiary Border colors
.border-light / .border-dark Light/dark borders
.border-success / .border-error Status borders
.border Default border
.border-top / .border-bottom / .border-left / .border-right Single-side borders

Border Radius

Class Purpose
.radius-xs / .radius-s / .radius-m / .radius-l / .radius-xl Border radius
.radius-full Full circle/pill

Shadows

Class Purpose
.shadow-xs / .shadow-s / .shadow-m / .shadow-l / .shadow-xl Box shadows

Position

Class Purpose
.relative / .absolute / .fixed / .sticky Position type
.top-0 / .right-0 / .bottom-0 / .left-0 Position values
.inset-0 All sides 0
.z--1 / .z-0 / .z-1 / .z-10 / .z-100 / .z-1000 / .z-10000 Z-index

Display & Visibility

Class Purpose
.display-none / .hidden Hide element
.visible Show element
.opacity-0 to .opacity-100 Opacity (increments of 10)

Object Fit

Class Purpose
.fit-cover / .fit-contain / .fit-fill Object-fit for images

Overflow

Class Purpose
.overflow-hidden / .overflow-auto Overflow
.overflow-x-hidden / .overflow-x-auto Horizontal overflow
.overflow-y-hidden / .overflow-y-auto Vertical overflow

Effects

Class Purpose
.bg-blur-xs to .bg-blur-xl Backdrop blur
.grayscale Grayscale filter
.rotate-90 / .rotate-180 Rotation
.transition-global Standard transition

Cursor

Class Purpose
.pointer Pointer cursor
.cursor-auto Auto cursor
.not-allowed Not-allowed cursor
.no-pointer-events Disable pointer events

Lists

Class Purpose
.list-none Remove list styling

Usage Example

{
  "id": "sec001",
  "name": "section",
  "parent": 0,
  "children": ["con001"],
  "settings": {
    "_cssGlobalClasses": ["padding-vertical-xl", "bg-surface"]
  }
}
{
  "id": "hdg001",
  "name": "heading",
  "parent": "con001",
  "children": [],
  "settings": {
    "text": "Welcome",
    "tag": "h1",
    "_cssGlobalClasses": ["text-3xl", "text-primary", "text-center", "margin-bottom-m"]
  }
}
{
  "id": "btn001",
  "name": "button",
  "parent": "con001",
  "children": [],
  "settings": {
    "text": "Get Started",
    "_cssGlobalClasses": ["btn", "shadow-m"]
  }
}

ID Generation

Element IDs must be 6-character alphanumeric strings:

function generateId() {
  return Math.random().toString(36).substring(2, 8);
}

Or use patterns:

  • Semantic: sec001, hdr001, btn001, img001
  • Random: jdhuyf, hxbbms, towhmc

CSS Variables Reference (from core-framework.css)

Spacing (--space-*)

--space-4xs  --space-3xs  --space-2xs  --space-xs  --space-s
--space-m    --space-l    --space-xl   --space-2xl --space-3xl  --space-4xl

All spacing values use fluid clamp() for responsive scaling.

Typography (--text-*)

--text-xs  --text-s  --text-m  --text-l  --text-xl
--text-2xl --text-3xl --text-4xl

Colors

Brand Colors:

--primary    --secondary    --tertiary

Opacity Variants (5-90%):

--primary-5 ... --primary-90
--secondary-5 ... --secondary-90
--tertiary-5 ... --tertiary-90

Shade Variants:

--primary-d-1 to --primary-d-4   (darker)
--primary-l-1 to --primary-l-4   (lighter)

Neutral Colors:

--base        --light       --dark
--bg-body     --bg-surface
--text-body   --text-title

Status Colors:

--success  --error
--success-5 to --success-90
--error-5 to --error-90

Grid Columns (--columns-*)

--columns-1 to --columns-12

Border Radius (--radius-*)

--radius-xs  --radius-s  --radius-m  --radius-l  --radius-xl  --radius-full

Shadows (--shadow-*)

--shadow-xs  --shadow-s  --shadow-m  --shadow-l  --shadow-xl

Shadows use --shadow-primary for color.

How to Use Layouts

Copy/Paste Sections

  1. Copy JSON content to clipboard
  2. In Bricks Builder, right-click in structure panel
  3. Select "Paste" or use Ctrl/Cmd+V
  4. Elements and classes are pasted together

Import Templates

  1. Go to Bricks > Templates in WordPress admin
  2. Click Import
  3. Upload JSON file or paste content
  4. Template appears in template list
  5. Assign to pages via template conditions

Interactions & Animations

Bricks uses _interactions for animations and dynamic behaviors. The deprecated _animation property (pre-v1.6) should not be used.

Interaction Structure

{
  "_interactions": [
    {
      "id": "anim01",
      "trigger": "enterView",
      "action": "startAnimation",
      "animationType": "fadeInUp",
      "animationDuration": "0.8s",
      "animationDelay": "0.2s",
      "runOnce": true
    }
  ]
}

Interaction Properties

Property Type Description
id string Unique identifier (6 chars)
trigger string Event that triggers the action
action string Action to perform
animationType string Animation style (for startAnimation)
animationDuration string Duration (e.g., "0.8s", "1s")
animationDelay string Delay before starting (e.g., "0", "0.2s")
runOnce boolean Run animation only once
target string Target element (for show/hide)
templateId string Target template ID (for popups)

Triggers

Trigger Description
enterView Element enters viewport (scroll)
click User clicks element
mouseover Mouse hovers over element
contentLoaded Page content fully loaded

Actions

Action Description Used With
startAnimation Play CSS animation animationType, animationDuration, animationDelay
show Show hidden element target, templateId
hide Hide visible element target, templateId

Animation Types

Type Description
fadeIn Fade in (opacity 0 to 1)
fadeInUp Fade in while moving up
fadeInDown Fade in while moving down
fadeInLeft Fade in while moving from left
fadeInRight Fade in while moving from right
pulse Pulsing/scaling effect

Staggered Animations

Create sequential reveal effects by incrementing animationDelay:

{
  "id": "card01",
  "settings": {
    "_interactions": [
      {"id": "a1", "trigger": "enterView", "action": "startAnimation", "animationType": "fadeInUp", "animationDuration": "0.6s", "animationDelay": "0", "runOnce": true}
    ]
  }
},
{
  "id": "card02",
  "settings": {
    "_interactions": [
      {"id": "a2", "trigger": "enterView", "action": "startAnimation", "animationType": "fadeInUp", "animationDuration": "0.6s", "animationDelay": "0.1s", "runOnce": true}
    ]
  }
},
{
  "id": "card03",
  "settings": {
    "_interactions": [
      {"id": "a3", "trigger": "enterView", "action": "startAnimation", "animationType": "fadeInUp", "animationDuration": "0.6s", "animationDelay": "0.2s", "runOnce": true}
    ]
  }
}

Hover Effects via Custom CSS

Use _cssCustom for hover states and transitions:

{
  "id": "card01",
  "settings": {
    "_cssCustom": "#brxe-card01 { transition: transform 0.3s ease, box-shadow 0.3s ease; }\n#brxe-card01:hover { transform: translateY(-5px); box-shadow: var(--shadow-l); }"
  }
}

Common hover patterns:

Card Lift Effect:

"_cssCustom": "#brxe-card01 { transition: all 0.3s ease; }\n#brxe-card01:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }"

Background Color Change:

"_cssCustom": "#brxe-card01 { transition: background 0.3s ease; }\n#brxe-card01:hover { background: var(--primary-10); }"

Image Zoom:

"_cssCustom": "#brxe-imgwrap img { transition: transform 0.5s ease; }\n#brxe-imgwrap:hover img { transform: scale(1.05); }"

Border Accent:

"_cssCustom": "#brxe-card01 { transition: border-color 0.3s ease; border-left: 3px solid transparent; }\n#brxe-card01:hover { border-left-color: var(--primary); }"

Button Glow:

"_cssCustom": "#brxe-btn01 { transition: all 0.3s ease; }\n#brxe-btn01:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }"

Popup Interactions

Show/hide popups with click triggers:

{
  "id": "closebtn",
  "settings": {
    "_interactions": [
      {
        "id": "close01",
        "trigger": "click",
        "action": "hide",
        "target": "popup",
        "templateId": "1323"
      }
    ]
  }
}

Entrance Animation on Section

Animate entire section when scrolled into view:

{
  "id": "sec001",
  "name": "section",
  "parent": 0,
  "children": ["con001"],
  "settings": {
    "_cssGlobalClasses": ["padding-vertical-xl"],
    "_interactions": [
      {"id": "secAnim", "trigger": "enterView", "action": "startAnimation", "animationType": "fadeIn", "animationDuration": "1s", "animationDelay": "0", "runOnce": true}
    ]
  }
}

Complete Animated Card Example

{
  "id": "card01",
  "name": "block",
  "parent": "grid01",
  "children": ["cardimg", "cardtxt"],
  "settings": {
    "_cssGlobalClasses": ["card", "padding-m", "radius-m"],
    "_interactions": [
      {"id": "cardAnim", "trigger": "enterView", "action": "startAnimation", "animationType": "fadeInUp", "animationDuration": "0.8s", "animationDelay": "0", "runOnce": true}
    ],
    "_cssCustom": "#brxe-card01 { transition: transform 0.3s ease, box-shadow 0.3s ease; }\n#brxe-card01:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }"
  },
  "label": "Feature Card"
}

Best Practices

  1. Use Core Framework First - Always check core-framework.css for existing utility classes before creating new ones
  2. Styling Priority - Core Framework classes → inline settings → custom CSS (in that order)
  3. Compose with Utilities - Combine multiple utility classes instead of creating new component classes
  4. Responsive Design - Always include tablet and mobile breakpoint settings for inline styles
  5. Semantic Labels - Use descriptive labels for elements in structure panel
  6. Consistent ID Patterns - Use semantic prefixes like sec, con, hdg, btn, img
  7. Minimize Custom CSS - Only use code elements for complex animations/interactions not covered by framework
  8. Version Matching - Match the version field to target Bricks version
  9. Custom Classes for Components - Only create new global classes for repeated component patterns
  10. Animation Performance - Use runOnce: true to prevent repeated animations on scroll
  11. Stagger Delays - Increment delays by 0.1s for smooth sequential reveals
  12. Hover Transitions - Always include transition property before defining hover states

Examples in Repository

See templates-2026-01-12/ folder:

File Type Description
hero.json Section Hero section with grid, testimonials, CTA
home.json Section Complete homepage with navbar, hero, features, testimonials, FAQ, footer
template-header-new-2026-01-12.json Template Complete header with mega menu
template-frontpage-2026-01-12.json Template Homepage content template
template-*-archive-*.json Template Archive page templates

Key Patterns from Examples

home.json demonstrates:

  • Navigation with nav-nested, dropdown, toggle elements
  • Hero section with two-column layout
  • Features grid with icon-box elements
  • Logo slider with slider-nested
  • Testimonials carousel
  • FAQ with accordion element
  • Newsletter form
  • Footer with link lists
  • Responsive breakpoints (:tablet_portrait, :mobile_portrait)