The Blocs Class Manager lets you manage all of the custom classes within your project. We recommend watching this video lesson that covers the basics of the Class Manager.
Open Class Manager
To open the Class Manager, navigate to Window > Class Manager from the apps main menu.
Add and Remove Classes
Adding and removing custom classes using the Class Manager is really simple. In the top right corner of the Class Manager there are two buttons, one marked with a – symbol and one marked with a + symbol. The button marked with a – symbol will remove the currently selected class when Left Clicked and the button marked with a + will add a new custom class when it is Left Clicked.
When you click the + button to add a new class you will be presented with a new sub window containing an input field and a drop down button. To create your new custom class enter the class name in the text field and then click the button labelled Add Class which is located in the bottom right corner of the sub-window.
Editing Classes
To edit a custom class from the Class Manager, simply Left Click the small settings symbol that is located at the far right side of the class list item you wish to edit or alternatively, double click anywhere on the list item you would like to edit. Doing either of these will open up the Class Editor panel.
Create Subclasses
As well as letting you create custom classes, Blocs also lets you create subclasses of some of the core classes used by Blocs for elements such as the scroll to top button or the hover tooltips. The point in subclassing is to override the default style created by Blocs to something more custom for your project. Sub-classing is more of an advanced feature that should be used with care. An example of subclassing would be to create a subclass of the scroll to top button and change its background colour to green. To create a subclass, follow the add and remove class steps from above, but instead of entering a class name, Left Click the dropdown button labelled Subclass Lib and select the core class you wish to override.
We have an online reference guide you can read here that explains what each subclass controls.
Reorder Classes
Due to the nature of the way custom classes work (cascade down), there are times when the styling values of a class may be overruled by the styling values of a class lower down the class list. To ensure the style sheets generated by Blocs work as intended, the Menu Manager has an option to set the ordering, per breakpoint of the custom classes in a project.
To change the cascading order of the custom classes in a project, simply navigate to the Edit Order button located to the right of the class search input field and Left Click it. This will switch the Class Manager into ordering mode. From here you can set the cascading order of classes for each break point.
