HeadSpinUI Setup

This guide walks you through setting up HeadSpinUI integration with BreakMade.

Prerequisites

Before enabling HeadSpin Mode:

• BreakMade plugin installed and activated
• HeadSpinUI plugin installed and activated
• HeadSpinUI initialized with default settings
• Breakdance page builder active

Step-by-Step Setup

Step 1: Install HeadSpinUI

1. Purchase HeadSpinUI from the official source
2. Upload and activate the plugin
3. Run the HeadSpinUI initialization wizard
4. Configure default HeadSpinUI settings

Step 2: Enable HeadSpin Mode

1. Go to BreakMade in WordPress admin
2. Find the HeadSpin Mode toggle
3. Click to enable HeadSpin Mode
4. A confirmation dialog will appear

Step 3: Merge Data

After enabling HeadSpin Mode:

1. Click the Merge Data button
2. Wait for the merge to complete
3. This syncs BreakMade data to HeadSpinUI format

Step 4: Verify Integration

Check that integration is working:

1. Go to HeadSpinUI settings
2. Verify BreakMade variables appear
3. Check that colors are synced
4. Preview a page to confirm styles

What Changes with HeadSpin Mode

Variable Naming

CSS Output

• Native Mode: BreakMade generates CSS
• HeadSpin Mode: HeadSpinUI generates CSS

Design Selection

When copying designs from breakmade.com:

• Native Mode: Select “Native” framework
• HeadSpin Mode: Select “HeadSpin” framework

HeadSpin Mode Features

Automatic Variable Conversion

When HeadSpin Mode is active, BreakMade automatically:

• Converts all spacing variables
• Converts all color variables
• Converts radius variables
• Updates CSS output format

Data Synchronization

The “Merge Data” feature:

• Syncs color palette to HeadSpinUI
• Transfers spacing configuration
• Maintains design set compatibility

Unified Token Management

HeadSpinUI provides:

• Central token dashboard
• Variable organization
• Export capabilities
• Team collaboration features

Common Setup Issues

HeadSpin Mode Won’t Enable

Possible causes:

• HeadSpinUI not installed
• HeadSpinUI not activated
• HeadSpinUI not initialized

Solution:

1. Verify HeadSpinUI is active in Plugins
2. Run HeadSpinUI setup wizard
3. Try enabling HeadSpin Mode again

Variables Not Converting

Possible causes:

• Merge Data not clicked
• Cache needs clearing

Solution:

1. Click “Merge Data” button
2. Clear all caches
3. Regenerate CSS

Styles Breaking After Enable

Possible causes:

• Using Native designs with HeadSpin Mode
• CSS not regenerated

Solution:

1. Re-copy designs using HeadSpin framework
2. Regenerate CSS file
3. Clear browser cache

Best Practices

Plan Ahead

• Decide on HeadSpin Mode before adding designs
• Switching later requires re-copying designs

Document Your Setup

For team projects:

• Note that HeadSpin Mode is enabled
• Document in project README
• Inform all team members

Test Thoroughly

After setup:

• Preview all pages
• Check responsive views
• Verify colors render correctly
• Test on actual devices

Disabling HeadSpin Mode

If you need to switch back to Native mode:

1. Go to BreakMade settings
2. Toggle off HeadSpin Mode
3. Variables revert to Native format
4. May need to re-copy designs using Native framework

Related

• Variable Conversion - How variables are converted
• Native vs HeadSpin - Choosing the right framework
• Removing BreakMade - Removal instructions