Using the style builder

The Style builder provides a visual interface for creating CSS styles. It's accessed by creating or editing a Base style or Custom style. 

The Style builder has a number of features. Each of these have been described in the following sections:

1. Style preview - Use this to see what your style looks like while you're creating it. See Using the style preview
2. Base style selector - Use this to set the base style selector to target. See Creating base styles
3. Selector menu - Use this to add CSS selectors to your style. See Using CSS selectors
4. Properties menu - Use this to add CSS properties to your style. See Applying CSS properties
5. Style helpers - Use these as 'quick starts' when creating styles. See Using and creating style helpers
6. Tidy styles - Use this to remove empty fields from the style builder  
7. Open token browser - Use this to open the Drupal token browser and insert tokens. See Using the token browser
8. Toggle variable mode - Use this to toggle the style editor into variable mode to insert tokens
9. Breakpoint menu - Use this to add CSS properties to specific breakpoints. See Applying CSS properties