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.

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.

System Styles

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.

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.

Custom Classes

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.

Creating Custom Classes

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.

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 .

Adding Styles to a Custom Class

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.

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.

To see a list of all styles added to the class, hover over its name. The list will be displayed in a tooltip.

Creating Multiple Classes for an Element

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.

Assigning an Existing Class to Elements

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.

You can assign several classes to an element. You can assign just like when you assigned the first class.

Actions with Custom Classes

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.

How to Edit Styles

Before editing, it’s essential to understand how assigned styles are applied to an element and how they are displayed in the Styles Panel.

Style Prioritization

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.

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.

Display of Properties in the Styles Panel

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 of an Element

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.

Changing Styles in a Custom Class

1.   Click on the name of the desired class to open its styles.

2.   Change the necessary properties in the styles panel below.

Deleting styles defined in a class

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.