Global Class Manager

Bricks’ Global Class Manager is a powerful new feature for creating, editing, deleting, and categorizing CSS classes directly inside the builder. This tool simplifies managing global styles, allowing you to apply consistent designs across your entire project easily.

Accessing the class manager

To access the Class Manager click the “Gear” icon in the top-left side o f the builder toolbar to open the “Style Manager”. Then, clicking the “CSS 3” icon in the sidebar opens up the Class Manager.

The Class Manager can be disabled under Bricks > Settings > General > Disable global class manager.

Core functionalities

Class creation and management

In the Global Class Manager, you can seamlessly handle your CSS classes through a unified interface where they can:

• Manage classes: Create new CSS classes or update existing ones. Delete classes that are no longer needed.
• **Order & categorize: **You can categorize classes for better management and order classes or categories via drag-and-drop for preferred structuring.
• Bulk actions: When two or more classes are selected, the editor enables users to perform mass actions such as renaming, duplicating, locking, and unlocking classes. These actions include the ability to find and replace strings or add prefixes or suffixes to class names.

Search and sorting capabilities

In the header of the Global Class Manager, you can filter classes by:

• Including or excluding specific strings.
• Sorting options: Alphabetically sort classes for better organization.
• Filtering based on usage and properties: Filter options include “Used on this site”, “Unused on this site”, “Used on this page,” “Unused on this page,” “Has styles,” “Has no styles,” “Locked,” and “Unlocked.”

Note

For more information on creating and applying global CSS classes, please refer to our dedicated Global CSS Classes guide.

Exporting and importing classes

The Global Class Manager facilitates the exporting and importing of CSS classes, making it easier to maintain a consistent styling framework across various Bricks projects.

Exporting classes

Users have two options for exporting classes:

1. Export all: By clicking the “Export” button at the top of the manager, users can export all classes currently managed within the system as a JSON file.

2. Export selected: Users can also choose specific classes to export by selecting them and then clicking the “Export selected” icon within the classes column header. This allows for more granular control over which classes are included in the exported JSON file.

Importing classes

In the “Import” popup, users can drag and drop a JSON file containing exported classes, streamlining transferring classes between projects.

Managing imported classes

If you’re importing global classes and need to handle conflicts or organize new classes before they are added to your project, check out the Global Class Import Manager. This feature, introduced in Bricks 1.12, provides a structured way to resolve conflicts and categorize imported classes, ensuring a smooth and controlled workflow.