Style Manager

The Style Manager displays a complete list of classes, combo classes, and tags you've created or edited in your project. Here, you can rename styles and delete any styles that aren’t being used anymore.

Accessing the Style Manager

The Style Manager, located in the right panel, can be accessed by clicking on the Style Manager icon or pressing G on your keyboard.

Anatomy of the Style Manager

When you create a new class or style a tag, it appears in the Style Manager in the order it was created. Here, you can rename the class or clean up any unused classes as indicated in the top right.

Tags

All the tags (pink) you've styled will appear at the very top.

Classes

All the classes appear in blue below the tags in the order they were created.

Combo classes

All combo classes appear in blue and are nested under each class with an icon to their left.

Nested tags

All nested tags appear in pink and are nested under each class with an arrow icon to their left.

List affected items

Click this icon to view a list of all elements affected by a class or combo class on the current page, a list of pages with elements affected by this same style, and a list of symbols containing elements with that style.

Clicking an element in this list will select the element on the page. Clicking a page name will jump to that page and display a list of affected elements on that page.

‍Edit wrench

Click the wrench icon to rename a class or a combo class. Once you’ve renamed the class, click the check icon or press enter to save the new name. To discard the changes, click the x.

Click the wrench icon to delete classes that aren't applied in your project. Click the trashcan icon that appears only for unused classes.

Clean up

To view and delete any classes that are not associated with any page elements, select clean up in the top right. Make sure you confirm the deletion of classes by clicking remove. To abort, click cancel.

Renaming classes

Once you start styling an element, a class is created to save all the styles you apply to that element. You can rename this class so you can easily reuse it to apply the same classes to other elements.

To rename a class or a combo class in the Style Manager, click the wrench icon next to the class name, rename the class, and press enter.

You can also rename classes directly in the Style panel. Learn more about classes.

Delete styles from a project

Removing a class from an element (by removing it from the selector field in the Styles panel) will not remove the class from the Style manager or your project. That’s because a class can be reused for styling other elements at any time.

Classes can be fully removed from the Style Manager and project only when they aren’t connected to any element.

Deleting individual styles in the Style manager

You can delete an individual style from your project from the Style Manager if the style is not used anywhere in your project. You can easily detect these unused styles in the Style Manager because there won’t be a list icon next to their name.

Clicking the wrench icon next to these styles will reveal a trashcan icon that allows you to delete the style from the project.

Deleting all unused styles in the Style manager

Unused styles add weight to your website’s code, so cleaning up any unused styles will help improve your website's performance as unused styles add weight to your website’s code.

To delete all unused classes, go to the Style Manager and click “clean up” then confirm the deletion of classes by clicking “remove”.