Classes
Classes in Taptop are a set of custom styles for an element or widget. They are designed to simplify the process of styling a website.
To modify the design of similar elements, you only need to create a class once and save the required styles in it. The saved class can then be applied to other similar elements as needed.
An element can have multiple classes applied to it, each containing the desired styles.
Classes can be managed in the Design tab in the right panel of the Design Editor.
Each element contains default styles, such as size or Auto Layout settings. These styles are automatically assigned to an element when it is added to the canvas. These are system styles, and they are consistent for each type of element or widget.
For example, a container has the following system styles:
You can override an element's default styles by assigning different parameter values — these will become its local styles.
When you add an element to the canvas and make changes to its styles in the Design tab, those changes become unique and are applied only to the selected element. These are the element’s local styles.
When working with local styles, Local Styles Label becomes active — it is highlighted in the color of the current breakpoint you are on. Styles applied at this breakpoint are also marked with the same color.
This styling method is suitable if the element's styles do not need to be reused. For instance, you can use this approach to set a font for the entire project by applying it to the Root layer.
If you want to apply the same styles to multiple elements, create a Custom Class that contains the desired properties.
How to Work with Classes:
1. Create a class for an element and configure the required styles.
2. Assign this class to other elements in the project that need the same styles.
For example, you can create a class with styles for a container and use it for every container in the project.
A custom class will be highlighted in the color of the breakpoint for which it was created.
To create a custom class, click in the Style Sources field, type the desired class name, and press Enter.
For example, let us create a class named main-container for a container.
For class names, use letters from the Latin alphabet. Class names should not start with a number or contain spaces.
You cannot create classes with names such as "section", "container", "div" etc., as these are reserved for Taptop System Classes.
When a new class is created, it becomes active immediately, allowing you to start adding styles to it. The class name will be highlighted in the color of the current breakpoint where you are at. All styles you define in the active class will be saved within it.
An exclamation mark icon at the left of the class name indicates that no styles have been assigned to the class yet. Once you add at least one style, the icon will disappear.
When you first create a class, it is empty and does not contain any styles. To add element styles to the class, configure the required properties in the Styles Panel below.
Before adding styles, make sure you opened the desired class (it’s active). In the Style Sources field, the name of the active class will be highlighted in color. If the required class is not active, switch to it by clicking on its name.
Example: Let us add padding to the main-container class:
1. Confirm that the class is active — it should be highlighted in color.
2. Set the padding values in the Styles Panel.
Done! The main-container class has been updated with inner padding values of 20px and 15px.
Gradually add style properties to populate the class with the desired parameters.
To see a list of all styles added to the class, hover over its name. The list will be displayed in a tooltip.
You can assign multiple classes to an element, each with its own set of styles. To add another class, follow the same steps as for the first one: click to the right of the previously created class, enter the desired class name and press Enter.
You can assign any class to an element already created in the project. For example, you might set a container's background color using the previously created background class.
To do so, click on the empty space in the Style Sources field and select a class from the list of previously created classes. To quickly locate a necessary class, start typing its name — the list will filter to show only matching options.
The selected class will be assigned to the element and appear in the element's class list. The class will become active (highlighted in the current breakpoint's color) and the Styles Panel will display the properties defined in the class, which will also be highlighted in the breakpoint's color.
A single class can be reused not only for identical elements but it also can be assigned for entirely different elements. For instance, the background class can be used to set the background color for both a container and a card.
You can assign several classes to an element. You can assign just like when you assigned the first class.
Custom classes can be managed in the following ways:
- Rename
Assign a clear and descriptive name to a class to indicate its purpose. Example: A class named border-radius would define rounded corners for elements.
- Duplicate
You can create a copy of a class with all its assigned styles and you can then modify some styles to create a variation of the original class. For instance, a newly created class named button-color-contact could specify the color of buttons used for collecting visitors’ contact information.
- Duplicate and Replace
This allows you to copy a class and simultaneously replace it for the selected element.
- Delete from the Element
Remove the class from an element, which removes the styles from selected element. However, the styles will remain intact for other elements using the same class.
- Delete from the Project
Deleting a class from the project removes its custom styles from all elements to which the class was assigned.
To take action on a previously created class, you need:
1. Click on the dropdown menu to the right of the class name.
2. Select the desired action.
Before editing, it’s essential to understand how assigned styles are applied to an element and how they are displayed in the Styles Panel.
The following apply to the element:
- its local styles - they have the lowest priority,
- the styles of all classes assigned to it - they override the local styles.
If an element has multiple classes assigned to it, the class closest to the end of the list takes precedence.
If any property (for example, background color) is set for an element in several classes at once, then the value from the last class in the list will be applied to it.
Example: If a section has two classes assigned:
- section-paddings with inner padding of 100px.
- section-100 with inner padding of 0px.
The last class in the list (section-100) will take precedence, so the section will have inner padding of 0px.
The currently active class being edited is highlighted in the color of the current breakpoint. Properties defined in this class are also highlighted in the same color.
When Local Styles Are Open:
If a property of an element is defined in a custom class, its value is hidden behind a tag showing the name of that class. Clicking on this tag switches to the corresponding class, allowing for the styles to be edited.
For example, if the inner padding for a container is defined in the main-container class, the name of this class is displayed in place of their values.
When a Custom Class Is Open:
If a property is defined in a higher-priority class, its value is hidden behind a tag showing the name of that higher-priority class. Clicking on the tag switches to that class for editing its styles.
For instance, if the main-container class is open for a container and the background color is defined in the background class, the value field for the background color will display the name of the background class.
If the same property is assigned in multiple classes at once, the system displays the name of the highest-priority class along with a label “+1”. This indicates that the property is defined in more than one class but is currently using the value from the highest-priority class. Clicking on the “+1” label will reveal the names of all classes that define the property.
Changing local styles affects only the styles of that element.
1. Click on the local styles label to open them.
2. Change the necessary properties in the styles panel below.
Done! All the properties you set for the element when the local styles label is active will be automatically saved in them.
Changing the styles of a class that is assigned to several elements in the project automatically affects the styles of all these elements.
You can change the styles of a class on any of the elements to which it is assigned, and these changes will be automatically applied to the other elements.
Once you make a change, you will immediately receive it for all the necessary elements. This allows you to simplify the process of styling the site.
1. Click on the name of the desired class to open its styles.
2. Change the necessary properties in the styles panel below.
Done! All the properties you set for the active class will be automatically saved in it.
If you added a style to a class but want to delete it, do the following:
1. Hold down the Shift key and hover over the property. A darkened label with the inscription Reset will appear.
2. Click the mouse on the label. The style will be reset to the default value or to the value in the previous class by priority.