Bricks CSS Classes Structure Guide

A comprehensive visual guide to understanding and working with the Bricks Builder CSS classes JSON structure

-
Total CSS Classes
-
Classes with Settings
53+
Available Settings Properties
-
JSON File Size
📋 Object Structure Overview ▼

Each CSS class object in the JSON array follows this structure:

{ "id": "jcv30u", // ✅ Required: Unique 6-char identifier "name": "ui-typography-section", // ✅ Required: CSS class name "settings": { ... } or [], // ✅ Required: Configuration object or empty array "_exists": false, // ✅ Required: Always false // Optional fields: "modified": 1731705127, // 🔄 Optional: Unix timestamp "user_id": 1, // 🔄 Optional: User identifier "_mappedId": "acss_import_..." // 🔄 Optional: Import mapping ID }
⚠️ Critical Fields: Never modify id, name, _exists, or _mappedId values. These maintain system integrity.
🔄 Modifiable Fields: You can safely modify all settings properties, modified timestamps, and user_id values.
⚙️ Settings Properties ▼

Layout & Display Properties

_display
CSS display property (grid, flex, block, etc.)
_direction
Flex direction (row, column, etc.)
_alignItems
Flex align-items property
_justifyContent
Flex justify-content property
_gridTemplateColumns
CSS Grid template columns
_gridTemplateRows
CSS Grid template rows

Spacing Properties

_padding
Padding object with top, right, bottom, left properties
_margin
Margin object with top, right, bottom, left properties
_rowGap
CSS gap property for rows
_columnGap
CSS gap property for columns
_gridGap
CSS Grid gap property

Visual Properties

_typography
Text styling object (font-size, color, weight, etc.)
_background
Background properties (color, image, etc.)
_border
Border properties including radius
_gradient
Gradient properties (angle, colors)
_cssCustom
Raw CSS strings for custom styling

Responsive Variants

Many properties support responsive breakpoint suffixes:

:mobile_landscape
Mobile landscape breakpoint variant
:mobile_portrait
Mobile portrait breakpoint variant
:tablet_portrait
Tablet portrait breakpoint variant
Example:
_gridTemplateColumns → Default value
_gridTemplateColumns:mobile_landscape → Mobile landscape override
🧬 Nested Structures ▼

Complex Property Objects

Typography Object (_typography)

"_typography": { "line-height": "1.1", "text-transform": "uppercase", "letter-spacing": ".095em", "font-size": "var(--text-s)", "font-weight": "400", "text-align": "center", "color": { "raw": "var(--text-dark)" } }

Padding/Margin Object

"_padding": { "top": "var(--space-m)", "right": "var(--space-m)", "bottom": "var(--space-m)", "left": "var(--space-m)" }

Border Object (_border)

"_border": { "radius": { "top": "var(--radius)", "right": "var(--radius)", "bottom": "var(--radius)", "left": "var(--radius)" } }
📥 CSS Import Tool ▼

Import regular CSS files and convert them to Bricks JSON format. Upload a CSS file or paste CSS code directly.

Upload CSS File

CSS Preview

Generated JSON Classes

Paste CSS Code

Conversion Options

Generated JSON

Import Bricks JSON File

Import an existing Bricks CSS classes JSON file for editing and export:

JSON Preview & Validation

Total Classes: 0
With Settings: 0
Empty Classes: 0
Modified Classes: 0

Export Options

Sample CSS File & Live Preview

Download our sample CSS file or preview it directly in the browser:

/* Sample CSS includes: • Button components (primary, secondary, large) • Card layouts with hover effects • Grid systems (auto-fit, 2-col, 3-col) • Typography scales (hero, section, lead text) • Flexbox utilities • Spacing utilities • Responsive breakpoints • Advanced components (glassmorphism, animations) */

Live CSS Preview

See how the sample CSS components look when rendered:

Click "Load Preview" to see the CSS components in action

CSS Source Code

⚠️ CSS Import Limitations

  • Complex selectors are simplified to class names
  • Media queries are converted to Bricks responsive syntax
  • Some CSS properties may not have direct Bricks equivalents
  • Always review generated JSON before importing
  • Pseudo-selectors (:hover, :focus) are handled via _cssCustom

💡 Best Practices for CSS Import

  • Use CSS custom properties (--variables) for consistency
  • Keep class names semantic and BEM-friendly
  • Organize CSS with clear sections and comments
  • Test responsive breakpoints after import
  • Review and customize generated IDs if needed
🔍 Object Explorer ▼
📁 Import Your JSON File: To explore your specific Bricks CSS classes, use the "Import JSON" tab in the CSS Import Tool section above. This explorer will then show your actual classes.
sample1
example-button-class
Settings: 5 properties • Example class structure
sample2
example-grid-layout
Settings: 8 properties • Example responsive class
sample3
example-typography
Settings: 3 properties • Example text styling
Import your Bricks JSON file to see your actual CSS classes here
🚀 Real Examples & Walkthroughs ▼

Example 1: Simple Button Class

Let's create a custom button class with basic styling:

Step 1: Generate Unique ID

Use a 6-character alphanumeric string (avoid existing IDs):

"id": "btn001" // ⚠️ Check existing IDs first!

Step 2: Complete Object Structure

{ "id": "btn001", "name": "my-custom-button", "settings": { "_padding": { "top": "var(--space-s)", "right": "var(--space-m)", "bottom": "var(--space-s)", "left": "var(--space-m)" }, "_background": { "color": { "raw": "var(--primary)" } }, "_typography": { "color": { "raw": "white" }, "font-weight": "600", "text-align": "center" }, "_border": { "radius": { "top": "var(--radius)", "right": "var(--radius)", "bottom": "var(--radius)", "left": "var(--radius)" } }, "_display": "inline-block" }, "modified": 1703980800, "user_id": 1, "_exists": false }
🎯 Key Points:
• Use CSS variables (var(--primary)) for consistency
• Include timestamp for modified classes
• Follow existing naming conventions
• Always set "_exists": false

Example 2: Complex Grid Layout

Creating a responsive card grid with custom gaps:

{ "id": "grid01", "name": "custom-card-grid", "settings": { "_display": "grid", "_gridTemplateColumns": "repeat(auto-fit, minmax(300px, 1fr))", "_gridGap": "var(--space-l)", "_padding": { "top": "var(--space-xl)", "right": "var(--space-m)", "bottom": "var(--space-xl)", "left": "var(--space-m)" }, "_alignItems": "stretch", "_gridTemplateColumns:mobile_landscape": "1fr", "_gridGap:mobile_landscape": "var(--space-m)", "_cssCustom": ".custom-card-grid > * {\n background: var(--neutral-light);\n border-radius: var(--radius);\n padding: var(--space-m);\n box-shadow: var(--shadow);\n}" }, "modified": 1703980900, "user_id": 1, "_exists": false }
⚠️ Complex Layout Gotchas:
• Test responsive breakpoints thoroughly
• Use consistent spacing variables
• Validate grid template syntax
• Check browser compatibility for advanced grid features

Example 3: Responsive Typography

A heading class that adapts across breakpoints:

{ "id": "typo01", "name": "responsive-hero-heading", "settings": { "_typography": { "font-size": "clamp(2rem, 5vw, 4rem)", "line-height": "1.2", "font-weight": "700", "text-align": "center", "color": { "raw": "var(--text-primary)" } }, "_margin": { "bottom": "var(--space-l)" }, "_typography:mobile_landscape": { "font-size": "2.5rem", "text-align": "left" }, "_typography:tablet_portrait": { "font-size": "3rem" }, "_margin:mobile_landscape": { "bottom": "var(--space-m)" } }, "modified": 1703981000, "user_id": 1, "_exists": false }
📱 Responsive Best Practices:
• Use clamp() for fluid typography
• Test on actual devices
• Consider mobile-first approach
• Don't override every property on every breakpoint

Example 4: Advanced Custom CSS

Using _cssCustom for complex styling that can't be achieved with standard properties:

{ "id": "adv001", "name": "advanced-hover-card", "settings": { "_position": "relative", "_overflow": "hidden", "_border": { "radius": { "top": "var(--radius-lg)", "right": "var(--radius-lg)", "bottom": "var(--radius-lg)", "left": "var(--radius-lg)" } }, "_cssCustom": ".advanced-hover-card {\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n cursor: pointer;\n}\n\n.advanced-hover-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n transition: left 0.5s;\n}\n\n.advanced-hover-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);\n}\n\n.advanced-hover-card:hover::before {\n left: 100%;\n}" }, "modified": 1703981100, "user_id": 1, "_exists": false }
⚠️ Custom CSS Warnings:
• Escape newlines properly in JSON (\n)
• Test CSS syntax before adding
• Avoid !important declarations
• Use CSS variables for consistency
• Consider performance impact of complex animations

Interactive Class Builder

Build your own CSS class object step by step:

Class Details





Generated JSON

⚠️ Common Gotchas & Troubleshooting ▼

🔥 Critical Mistakes to Avoid

  • Duplicate IDs: Each ID must be unique across the entire JSON
  • Invalid JSON: Escaping issues in _cssCustom properties
  • Missing _exists: Always include "_exists": false
  • Wrong nested structure: Padding/margin must be objects with top/right/bottom/left
  • Responsive syntax: Use colons, not dots: "_property:mobile_landscape"

🐛 Common Issues & Solutions

Issue: CSS not applying in Bricks
Solution: Check class name matches exactly, verify CSS variable availability
Issue: Responsive styles not working
Solution: Ensure breakpoint syntax is correct, test inheritance
Issue: JSON validation errors
Solution: Validate JSON structure, check for trailing commas, escape quotes in _cssCustom

ID Generation Best Practices

// ✅ Good ID patterns "btn001", "card01", "nav123", "hero99" // ❌ Avoid these patterns "button-1" (hyphens), "CARD01" (uppercase), "btn_01" (underscores) // 💡 Pro tip: Use a prefix system "btn" + random3digits for buttons "lay" + random3digits for layouts "txt" + random3digits for typography
📋 Best Practices & Guidelines ▼

What You Can Safely Modify:

  • ✅ All properties within settings objects
  • ✅ modified timestamp values
  • ✅ user_id values
  • ✅ Add new properties to settings objects
  • ✅ Change settings from [] to {} and vice versa

What Must Never Be Changed:

  • ❌ id values (unique identifiers)
  • ❌ name values (CSS class names)
  • ❌ _exists values (always false)
  • ❌ _mappedId values (when present)
  • ❌ Overall JSON array structure

Common Value Patterns:

CSS Variables
var(--container-gap), var(--space-m), var(--primary)
Calculated Values
calc(var(--content-gap) / 2)
Raw CSS
Complex CSS rules in _cssCustom properties
💡 Pro Tip: When adding new CSS classes, follow the existing naming conventions and use CSS variables for consistency with the Bricks Builder system.