Classes and States

Classes are sets of custom styles for elements or widgets. They are needed in order to simplify the process of styling the site.

You may change the design of identical elements by styling one and saving the setting in a class. After that, you may apply the saved class to other similar elements. You may apply any number of classes containing the desired styles to an element.

You may manage classes on the Design tab in the right panel of the Design Editor.

Each element has default styles. For example, the size or Auto Layout settings. Styles are assigned to an element automatically when it is added to the Canvas. These are unchangeable system styles. However, you may override the element's styles.

An element may have no assigned classes, in which case the styles will be available on the Design tab. These are unique styles. To set such styles, you do not need to create a class, just select the desired settings on the Design tab.

This styling method is suitable if the element styles do not have to be reused. For example, this way you can add a font for the entire project by applying it to the Root layer.

 With custom classes you may save style settings to reuse them later. Once you've created a class for an element, you may customize the styles you want. Then, assign this class to other elements in the project that should have similar styles.

You may assign several classes to an element, thereby defining sets of different styles. For example, you may create button-big and button-small classes with size and typographics for buttons, and button-success and button-info classes that define button functions. This way you may combine these classes, applying them to different buttons, to create the desired interface.

To add a custom class, click “+” in Classes.

By default, a class is created with the name class. You may change it. To do this, enter the desired name in the block that opens. For example, let's create the button-color class, which will be responsible for the color of the button.

To save the class, press the Enter. The class appears in the element's class list. Now you may set styles for it.

When you create a class, it is added without any styles specified. You may add styles to that class. Let's add a background for the created button-color class.

To add the desired styles:

Assigning the created class to elements

You may assign any class that has already been added to the project to an element. For example, set the background color for the blocklist. To do this, select an element on the Canvas and:

 You may do the following with Custom Classes:

You may assign a name to the class that describes its purpose as accurately and clearly as possible. For example, the border-radius class will be responsible for rounding the corners of elements.

You may create a copy of the class containing all the styles applied to it, and then change some of the styles to create modifications. For example, the newly created button-color-contact class can be responsible for the color of buttons that are needed to collect contact data from site visitors.

This way you may simultaneously copy the class and replace the class of the selected element.

This is used to delete styles from the selected element. Other elements with the same class will [reserve their settings.

If you remove a class from a project, all elements that were assigned that class will have their custom styles removed.

To use the previously created class:

To change the existing class styles, click Edit in the list of classes or class name in the style panel. The class styles editing menu will open.

Follow the instructions above to configure the desired style settings. This way, you may consistently define styles for all classes of an element, switching between them.

For example, you need to change the background color of the buttons that allow the user to leave a request on the site.

By changing one element, you will change all the necessary elements at once. This simplifies the process of website styling.

If you have assigned several classes to an element, the styles of all of these classes will be applied to it. If the same style parameter is specified in two or more classes, although with different values (for example, the background color is set to green in one class, and blue in the other), then the class that is closest to the beginning of the list will take precedence.

For example, the button has rounded corners and background color. The following classes are used: button-color-green (responsible for the green background color), button-color-blue (responsible for the blue background color) and button-border (responsible for the rounded corners).

Since the button-color classes are responsible for the same parameter, button-color-blue will have priority — it is closer to the beginning of the list. The background color of the button will be blue.

button-border is the only class responsible for the rounded corners, so these styles will be applied.

You may style states individually for each element or custom class. To do this, click “+” next to the list of states and select the desired value.

To add a state, open the list in the State menu and add the one you need.

For example, let's change the transparency of an element in the “on hover” state.

To add a state for an element that has a custom class, open the class editing settings. For example, let's add the “on hover” state for the button-color-green class.

Do the following:

If you want to define different styles of a custom class in the same state, but for different breakpoints, create a class for the desired state with a default breakpoint (PC). After this, you may add states for the remaining breakpoints.

Select the one you need from the list of classes by clicking Applied classes and go to the  editing mode. Add the desired state according to the instructions above. For example, let's add a selector for the "on hover" state.

To add a state for a different breakpoint, switch to it. For example, let's switch to the Tablet breakpoint. To do this, select the breakpoint in the center of the top panel. This will take you to styling for the Tablet breakpoint. Set the desired styles.