Get Started

Quick Start

Get productive with BreakMade in under 5 minutes.

This quick start guide will have you building with BreakMade in just a few minutes. Follow these steps for the fastest path to productivity.

5-Minute Setup

Step 1: Install & Activate (1 min)

  1. Upload the BreakMade ZIP file via Plugins → Add New → Upload Plugin
  2. Click Activate
  3. You’ll be redirected to the BreakMade dashboard

Step 2: One-Click Setup (2 min)

In the BreakMade dashboard, click these buttons in order:

  1. Install Default Palette - Sets up your color system
  2. Install Typography Presets - Configures fluid typography
  3. Set Default Design Set - Choose “Layers” and confirm

Step 3: Start Building (2 min)

  1. Open any page in the Breakdance editor
  2. Your new design variables are ready to use
  3. Access colors via the color picker (they appear under Global Colors)
  4. Use spacing variables in any spacing field: var(--s8), var(--s16), etc.

Using BreakMade Variables

Colors

In any Breakdance color picker, you’ll find your BreakMade colors under Global Colors:

Primary Base     → Primary color
Primary Surface  → Lighter shade for backgrounds
Primary Text     → Darker shade for text on primary backgrounds

Spacing

Use CSS variables in spacing fields:

VariableTypical Use
var(--s4)Small gaps, padding
var(--s8)Default element spacing
var(--s16)Section padding (mobile)
var(--s32)Section padding (desktop)
var(--s64)Large section gaps

Typography

Typography presets are automatically applied. Access them through:

  • Style tab → Typography → Preset dropdown
  • Or apply directly via the element’s typography settings

Your First Page

Here’s a simple page structure using BreakMade:

Hero Section

  1. Add a Section element
  2. Set vertical padding: var(--s32) (top and bottom)
  3. Add a Heading → Choose H1 preset
  4. Add a Paragraph → Set max-width to 600px
  5. Add a Button → Style with Primary color

Content Section

  1. Add another Section
  2. Set background: Primary Surface color
  3. Set padding: var(--s24) vertical, var(--s8) horizontal
  4. Add your content elements
  1. Add a Section with Neutral Base background
  2. Use var(--s16) for padding
  3. Add footer columns and links

Pro Tips

Use Alt-Shade Classes

For automatic light/dark contrast:

  • Add .alt-shade class to a section
  • Child elements automatically get inverted colors
  • Great for alternating section backgrounds

Leverage the Color System

The color shades follow a pattern:

  • Base: Main color
  • Bg: Very light, for backgrounds
  • Surface: Light, for cards
  • Text: Appropriate contrast for text
  • Hover: Interactive states

Responsive Spacing

All --s* variables are fluid - they scale between viewport sizes automatically. No media queries needed for basic responsive spacing.

Next Steps

Now that you’re set up, explore:

Video Walkthrough

Coming soon: A video tutorial walking through the entire setup process.

Getting Help

Stuck? We’re here to help: