BricksMade
Documentation

Introduction

BricksMade is a design library and framework plugin built exclusively for Bricks Builder. It has two parts:

• The Library — A growing collection of 485+ pre-designed blocks, 60+ templates, and 660+ pages on bricksmade.com. Browse, copy, and paste directly into your Bricks editor.
• The Plugin — A free design system framework that generates color palettes, fluid typography, fluid spacing, and imports design system templates. All tokens sync into Bricks' native variable panel.

How It Works

BricksMade follows a simple four-step workflow to get you from zero to a fully styled website.

Installation

1. 1
   Download the plugin ZIP from your BricksMade account.
2. 2
   In WordPress, go to Plugins → Add New → Upload Plugin and select the ZIP file.
3. 3
   Activate the plugin. You'll find BricksMade under the WordPress admin menu.

License Activation

After installation, navigate to BricksMade → Settings and enter your license key. Your license unlocks all features — templates, color palette, typography, and spacing tools.

License status is cached for 12 hours. If the licensing server is temporarily unreachable, the plugin gracefully continues working for up to 1 hour to avoid workflow interruptions.

After activation, BricksMade will prompt you to select a framework and automatically import the default Layers template to get you started immediately.

Framework Selection

BricksMade supports two operational frameworks. The selector appears in the admin header, between the logo and license status badge.

Templates Overview

Templates are pre-configured design systems hosted on bricksmade.com/templatesdata. Each template bundles a complete set of theme styles, CSS variables, and global classes.

The Templates tab displays a thumbnail grid of all available templates. The template list is cached locally for 12 hours — use the Refresh button to fetch the latest.

What's inside a template

Importing Templates

Click Import on any template card. BricksMade supports two import modes:

What gets imported

• Theme Style — Bricks theme style entry with CSS and typography
• Variables — Global CSS variables with categories
• Classes — Global CSS classes with categories and lock states

Import Preview

Before any data is written, BricksMade shows a preview modal with a detailed breakdown of what will change:

• New items — Variables, classes, or styles that will be added
• Updates — Existing items that will be modified
• Unchanged — Items that are identical and won't be touched

Each category is expandable. You can uncheck individual items to skip specific updates, giving you granular control over what gets imported.

Backup & Restore

Every import automatically creates a timestamped backup of your current Bricks settings — theme styles, variables, variable categories, classes, class categories, and locked classes.

If anything goes wrong, use the Restore button to roll back to the exact state before the last import. You can also use the Diff view to compare your current settings against the backup.

Color System

BricksMade generates a complete color palette from a single primary color. The system creates 5 color groups, each with 11 semantic shades — totaling 55 design tokens that cover every UI need.

Enable Auto-generate to derive secondary, tertiary, and accent colors automatically via hue rotation. Or set each base color manually for full creative control.

Color Groups

Semantic Shades

Each color group generates 11 semantically named shades. Instead of arbitrary numeric scales (100–900), BricksMade uses purpose-driven names so every shade has a clear use case.

Click any shade swatch in the Colors tab to override its generated hex value with a custom color.

CSS Variables

Colors are output as CSS custom properties following the convention --{shade}-{group}. RGB triplet variables are also generated for alpha variations.

/* Generated color variables */
--bg-primary: #f0f4ff;
--surface-primary: #dbe4ff;
--base-primary: #4c6ef5;
--text-primary: #3451b2;
--heading-primary: #1e2a5e;

/* RGB triplets for alpha usage */
--primary-rgb: 76, 110, 245;

/* Usage with alpha */
background: rgba(var(--primary-rgb), 0.1);

All variables sync to Bricks' variable panel under the bm-colors category, making them available in every Bricks element.

Typography System

BricksMade generates a complete type system with fluid responsive sizing using CSS clamp(). Headings scale smoothly from 400px to 1400px viewport widths.

The system generates two sets of variables: heading sizes (hero, h1–h6) and text sizes (text-xs through text-7xl). Both are synced to Bricks' variable panel.

Heading Modes

Choose how heading sizes are calculated. Each mode offers different levels of control.

Text Sizes

Beyond headings, BricksMade generates a utility text size scale from text-xs to text-7xl. Smaller sizes use fixed rem values; larger sizes use fluid clamp.

Table shows default values. Continues up to text-7xl (72px → 120px).

Fluid Clamp Formula

BricksMade uses the CSS clamp() function to create smoothly scaling values between a minimum (mobile) and maximum (desktop) size.

/* Viewport range: 400px (min) to 1400px (max) = 1000px */
/* REM base: 10px (Bricks uses 62.5% font-size) */

font-size: clamp(MIN_REM, BASE + SLOPE * 100vw, MAX_REM);

/* Example: h2 at 24px mobile → 32px desktop */
font-size: clamp(2.4rem, 1.6rem + 0.8vw, 3.2rem);

This formula ensures text scales linearly between breakpoints with no media queries needed. The same formula is used for spacing values.

Spacing System

BricksMade generates three categories of spacing tokens: a numeric scale for general use, named section spacers for vertical rhythm, and border-radius values. Numeric and section spacing use the same fluid clamp formula as typography.

Numeric Scale

A 24-step spacing scale from s1 (4px) to s72 (288px). When mobile and desktop values differ, fluid clamp() is generated.

Showing key steps. Full scale includes 24 sizes (s1–s72). All values are customizable.

Section Spacing

Named spacers designed for vertical rhythm between page sections. Uses t-shirt sizing for quick selection.

10 sizes total. Values shown as mobile → desktop pixels. Fixed values have identical mobile and desktop.

Border Radius

A fixed (non-fluid) radius scale for consistent roundness across components.

Bricks Sync

Every time you save colors, typography, or spacing, BricksMade syncs the generated values into Bricks Builder's native systems:

Variables appear in Bricks' variable picker grouped by category — bm-colors, bm-headings, bm-text-sizes, bm-spacing, bm-section-spacing, bm-border-radius.

Advanced Themer Integration

When using the Advanced Themer Framework, BricksMade seamlessly integrates template data into AT's system. The ATF handles color palette generation, typography, and spacing, while BricksMade contributes templates and alt-shade CSS for dark mode support.

What BricksMade handles in ATF mode

• Template importing with AT-specific settings
• Alt-shade CSS injection for dark mode color flipping
• Color palette merging with AT's color groups
• Preserving user's existing AT configuration

CSS Output

BricksMade writes generated CSS to the WordPress uploads directory. These files contain all custom properties and are automatically loaded by Bricks.

/wp-content/uploads/bricksmade/
  ├── bricksmade-colors.css       /* Color custom properties */
  ├── bricksmade-typography.css   /* Typography clamp() values */
  └── bricksmade-spacing.css      /* Spacing custom properties */

Security

• .htaccess restricts the directory to CSS files only
• PHP execution is blocked in the output directory
• Atomic writes (temp file + rename) prevent partial writes
• Path traversal validation on all file operations

Requirements