Native vs HeadSpin Code

BreakMade designs are available in two frameworks: Native and HeadSpin. This guide explains the differences and helps you choose the right one for your project.

Overview

Native Framework

The standard BreakMade framework using BreakMade’s own CSS variables.

/* Native variable examples */
--s8
--s16
--s32
--primary-base
--secondary-surface
--radius-lg

HeadSpin Framework

Designed for use with HeadSpinUI, using HeadSpin-prefixed variables.

/* HeadSpin variable examples */
--hsp-s8
--hsp-s16
--hsp-s32
--hsp-primary-base
--hsp-secondary-surface
--hsp-radius-lg

Which Should You Use?

Use Native When

• ✅ Using BreakMade plugin only
• ✅ Not using HeadSpinUI
• ✅ Want simpler setup
• ✅ New to BreakMade
• ✅ Building standalone projects

Use HeadSpin When

• ✅ Using HeadSpinUI plugin
• ✅ HeadSpin Mode is enabled in BreakMade
• ✅ Want HeadSpinUI’s token management
• ✅ Need HeadSpinUI components
• ✅ Building HeadSpin-based projects

Setting Up Each Framework

Native Setup

1. Install BreakMade plugin
2. Go to BreakMade settings
3. Install design set (Layers)
4. Install color palette
5. Install typography presets
6. Keep HeadSpin Mode OFF

Your site uses Native variables automatically.

HeadSpin Setup

1. Install BreakMade plugin
2. Install HeadSpinUI plugin
3. Initialize HeadSpinUI
4. Go to BreakMade settings
5. Enable HeadSpin Mode
6. Click Merge Data
7. Install design set

Variables are converted to HeadSpin format.

Variable Comparison

Spacing Variables

Color Variables

Other Variables

Getting the Right Code

On BreakMade.com

When browsing designs:

1. Look for the framework indicator
2. Native = Standard BreakMade
3. HeadSpin = HeadSpinUI compatible
4. Select the matching version

Copy the Correct Version

Before copying a design:

1. Check your site’s setup
2. Is HeadSpin Mode enabled?
3. Copy the matching framework
4. Paste into your editor

Switching Frameworks

From Native to HeadSpin

If you decide to add HeadSpinUI later:

1. Install HeadSpinUI
2. Enable HeadSpin Mode in BreakMade
3. Click Merge Data
4. Re-register selectors
5. Note: Existing designs may need updating

From HeadSpin to Native

To go back to Native:

1. Disable HeadSpin Mode
2. Variables revert automatically
3. May need to re-paste designs
4. Re-register selectors

Updating Existing Designs

When switching frameworks:

• Old designs keep their variables
• May show incorrect values
• Best to re-copy from correct framework
• Or manually update variable names

Common Issues

Mixed Variables

Problem: Page has both Native and HeadSpin variables

Solution:

1. Check all sections use same framework
2. Re-copy mismatched sections
3. Or manually update variables

Variables Not Working

Problem: Variables show no value

Cause: Wrong framework selected

Solution:

1. Check HeadSpin Mode setting
2. Match designs to your setup
3. Re-copy correct framework version

Styles Breaking on HeadSpin Enable

Problem: Enabling HeadSpin Mode breaks existing designs

Solution:

1. Re-copy designs using HeadSpin framework
2. Or keep HeadSpin Mode disabled
3. Run unconverted variable checker

Best Practices

Choose Once, Stick With It

• Decide on framework early
• Use consistently throughout project
• Avoid mixing frameworks

Document Your Choice

For team projects:

• Note which framework you’re using
• Add to project documentation
• Inform all team members

Test After Changes

After any framework changes:

• Preview all pages
• Check responsive views
• Verify colors and spacing

Feature Comparison

Recommendations

For Beginners

Start with Native:

• Simpler setup
• Fewer moving parts
• Easy to understand
• Can switch later if needed

For Advanced Users

Consider HeadSpin if:

• Already using HeadSpinUI
• Need advanced token management
• Want HeadSpinUI components
• Building complex design systems

For Agencies

Native for:

• Quick client projects
• Simpler handoffs
• Maintenance simplicity

HeadSpin for:

• Enterprise projects
• Design system projects
• Long-term maintenance