Configuration

BreakMade offers flexible configuration options to adapt to your workflow. This guide covers all available settings and how to customize them for your projects.

Accessing Settings

Navigate to BreakMade in your WordPress admin menu to access the main settings dashboard. The interface is divided into several sections, each controlling different aspects of the plugin.

Color Palette Settings

The color palette system is at the heart of BreakMade’s design system.

Installing the Default Palette

Click Install Default Palette to set up the structured color system with:

• 5 Main Colors: Primary, Secondary, Tertiary, Accent, and Neutral
• Color Shades: Each color includes multiple shade variations (base, bg, dark, surface, heading, subtle, active, border, text, muted, hover)
• Alpha Variations: 10% to 90% opacity variants for each color

Sync to Breakdance

When enabled, changes to your BreakMade color palette automatically sync to Breakdance global colors:

• Enable: Color changes immediately update Breakdance
• Disable: Manage colors independently in each system

Toggle the Do Not Sync Colors option if you want to prevent automatic synchronization.

Custom Colors

You can customize any color in the palette:

1. Click on a color swatch to open the color picker
2. Select your desired color or enter a hex value
3. Click Save Palette
4. Changes will generate updated CSS variables

Typography Configuration

Installing Typography Presets

Click Install Typography Presets to add predefined styles:

• Headings (H1-H6): Responsive sizes with appropriate line heights and letter spacing
• Body Text: Comfortable reading sizes with 160% line height
• Font Weights: Varied weights for visual hierarchy

Typography Only Mode

Enable Typography Only to install just the typography settings without affecting other global settings. This is useful when:

• You want to preserve existing Breakdance settings
• You only need the typography system
• You’re adding BreakMade to an existing project

Design Set Selection

Design sets provide coordinated global settings, typography, and styling.

Choosing a Design Set

1. Click Set Default Design Set
2. Browse available design sets in the modal
3. Preview designs using the preview links
4. Click on a design set to select it
5. Confirm installation

Available Design Sets

• Layers: The default, versatile design set suitable for most projects
• Additional design sets may be available based on your license

Selectors (CSS Classes)

BreakMade provides pre-built CSS selectors for common components.

Registering Selectors

1. Click Add/Update Selectors
2. Selectors are added to Breakdance’s selector library
3. Access them in the Breakdance editor under Selectors

Selector Modes

• Add New: Adds new selectors without modifying existing ones
• Update: Updates existing selectors with new styles
• Overwrite: Replaces all selectors (use with caution)

Toggle Overwrite Selectors based on your needs before registering.

HeadSpinUI Integration

If you have HeadSpinUI installed, BreakMade can integrate with it seamlessly.

Enabling HeadSpin Mode

1. Ensure HeadSpinUI plugin is installed and activated
2. Toggle HeadSpin Mode to ON
3. Confirm the modal prompt
4. Click Merge Data to sync BreakMade data with HeadSpinUI

What Gets Synced

• Color Schemas: 5 predefined color schemas (Crimson, Jade, Gold, etc.)
• Spacing Tokens: BreakMade spacing variables converted to HeadSpin format
• Variable Naming: --s32 becomes --hsp-s32

Variable Conversion

When HeadSpin Mode is enabled:

• BreakMade variables are converted to HeadSpinUI format
• CSS is regenerated through HeadSpinUI
• Unconverted variables are detected and flagged

Disabling HeadSpin Mode

To disable:

1. Toggle HeadSpin Mode to OFF
2. Variables will revert to BreakMade format
3. May require manual updates if you’ve used HeadSpin variables in custom code

Feature Toggles

Control which BreakMade features are active on your site:

Best Practices

New Projects

For new projects, we recommend:

1. Install default design set first
2. Install color palette
3. Install typography presets
4. Register selectors
5. Customize colors as needed

Existing Projects

For existing Breakdance projects:

1. Enable Typography Only if you have existing styles
2. Disable Sync to Breakdance initially
3. Review existing colors before syncing
4. Test thoroughly before going live

Team Workflows

For teams:

• Document any custom color changes
• Use consistent design set across all team members
• Consider HeadSpinUI integration for advanced token management

Configuration Files

BreakMade stores configuration in WordPress options:

• breakmade_color_palette - Full palette data
• breakmade_typography_presets - Typography configuration
• breakmade_headspin_mode - HeadSpin integration status
• breakmade_do_not_sync_colors - Sync preference

These are managed automatically but can be useful for debugging or migration.