After a rebrand, updating colors and spacing element by element is the slow way. Breakdance 3.0 splits styling into variables, which hold values like colors, spacing, typography and image URLs, and selectors, which apply styles to elements. Point a selector at a variable and one change updates the whole site.
I walk through the workflow in the 3.0 release candidate on my Lodestar Coffee Roasters test site.
What is covered
- The difference between variables and selectors (classes)
- Creating color and spacing variables
- Applying variables to an existing class so changes update sitewide
- Organizing variables into collections
- Managing selector folders and states such as :before
- Locking selectors to prevent accidental edits
- Importing and exporting variables and selectors as JSON to reuse across sites