The class system in Mosaic offers an efficient way to style multiple elements effectively, building upon CSS fundamentals. Leveraging this class system can significantly speed up the editing process, making it an essential feature for a seamless design experience. It consists of element classes, element subclasses, utility classes, and utility subclasses.
Each element is designated an element class, which establishes its initial appearance. Some elements can have multiple element classes to choose from, but only one element class can be selected at a time, allowing them to achieve different looks. Element classes can be further refined using element subclasses, allowing for detailed customization.
For example, the Button element class might have primary and secondary as element subclasses. These element subclasses can, in turn, be extended with additional element subclasses, enriching the styling options available.
Using element classes and element subclasses is recommended because they maintain a hierarchical structure that is directly linked to the elements. On the other hand, utility classes, including their utility subclasses, are universal and can be applied to any element without restrictions. This flexibility makes utility classes a versatile tool, though they operate outside the hierarchical system of element and element subclasses.
Working with classes
Classes can be selected in the Editor on the active element’s style panel. These classes are connected to the style settings of the given element. As you can see below, state properties are part of them too.
Every styleable element has two default classes: an element class and a custom class, and any number of element subclasses, utility classes, and utility subclasses. If you want to edit the current element only, use the custom class. If you want to edit multiple elements together, use one of the additional classes.
- Element class: All elements with the same element class share their styles.
- Element subclasses: Element subclasses have the ability to define new classes based on element classes. They are optional.
- Utility classes: Utility classes provide a way to apply consistent styles across various elements on your website. They are optional as well.
- Utility subclasses: They are a way to fine-tune your styles by building on the utility classes you already have. They can provide extra detailed options that are fully optional.
- Custom class: Unique to each element, applying specific styles only to that element.
Create, add, or select
Within Mosaic you can only create element sub, utility, and utility subclasses, but not element classes. They are an integral part of the system.
1. Create element sub or utility classes
Click the + button on the right side of the class list. It gives you the option to create either of them.
2. Create a completely new class
Write down its name and press Enter. If you want to select an existing class, you can find a list of your classes under the search/create field.
3. Add a utility subclass to an existing utility class
Go to the Utility tab and pick the class you want to add a new one to. Once selected, this class will appear in your class list, allowing you to add a utility subclass using the create/search field.
4. Select element class
In some elements, you can choose from predefined element classes. You can do this in two ways:
- Use the dropdown on the right-hand side panel.
- Select directly on the Canvas.
Class selector
In the Toolbar, you can easily choose element, element sub, utility, and utility subclasses for your elements, making the styling process more efficient.
You can find the same menu in the Class manager. Simply use the dropdown menu of your classes to access all their available classes located within their element, element sub, or utility class menu points.
Actions
Each class has an Actions list containing options specific to that class type. These are the possible options you can find:
- Duplicate: Create a new class with the style settings of the current class.
- Rename: Rename the current class.
- Assign as default: By default, when you select an element, the Custom class will be selected. You can change that, by marking a different class as default.
- CSS Class: What we call “classes” in Mosaic are not actual CSS classes, they are just names used within our system. If you would like to add a CSS class to the HTML code of elements using the current Mosaic class, use this option.
- Copy style: Copy the style settings of the selected class.
- Paste style: Paste the style settings to the selected class.
Best practices
When you are creating classes, we suggest keeping things clean and well-organized. Here are some tips to help you maintain a structured approach.
Add meaningful names
Name your classes in a way that makes them easy to recognize. Instead of generic names like “text a” and “text b”, opt for descriptive names such as “description” and “title”.
Element subclasses first
Start with element subclasses as they often have a strong connection to the element you’re working on. It helps maintain a logical hierarchy.
Don’t over-specify element subclasses
Try not to get too specific with element subclasses. Instead, use element sub-subclasses to create variations within an element subclass. For instance, a text element’s first element subclass could represent its size, while element sub-subclasses could stand for different font weights.
Utility classes for common styles
Create utility classes for styles that are commonly used across various elements. For example, a consistent border radius and box shadow could be applied to both image and button elements.
Use the Style guide
Take advantage of the Style guide feature. It allows you to create a visual representation of each class, making it easy to check and modify them.
Strength in styling
Your class types are listed in separate slots, and any extra utility class will show up on additional slots. This vertical setup sets the style hierarchy from top to bottom. Plus, for all slots, except for custom classes, the order from left to right also matters, so your styles are affected by both the horizontal and vertical arrangement of your classes.
Let’s break this down with an example. A text element has all possible classes: an element class, an element subclass, a utility class, a utility subclass, and a custom class. Let’s set the following styles.
1. Set the element class
- Text: Red font color
- M: No specified font color
- Box shadow: No specified font color
- S: No specified font color
- Custom: No specified font color
→ This way your text will be red.
2. Style of the element subclass
- Text: Red font color
- M: Blue font color
- Box shadow: No specified font color
- S: No specified font color
- Custom: No specified font color
→ The text will become blue.
3. Add color to the utility class
- Text: Red font color
- M: Blue font color
- Box shadow: Green font color
- S: No specified font color
- Custom: No specified font color
→ The text will have a green color.
4. Set a color for the utility subclass
- Text: Red font color
- M: Blue font color
- Box shadow: Green font color
- S: Yellow font color
- Custom: No specified font color
→ The text will have a yellow font color.
5. Use the custom class
- Text: Red font color
- M: Blue font color
- Box shadow: Green font color
- S: Yellow font color
- Custom: Violet font color
→ You will end up with a violet text.
Breakpoint selector
You can edit the style settings device specifically. To help this process, you can find the same breakpoints in the Class manager as you would in the Toolbar. Each breakpoint shows the available hover states.
State selector
Customizing the appearance of buttons and links when you hover over them is a common practice. In our Editor, you can easily define distinct styles for these interactive states.
To explore more styling options, look for the Hover and other states under the class list. This allows you to enhance the visual experience of your buttons and links based on different user interactions.
You can set these states for specific devices for a more customized user interaction.
Custom states
You can use the + sign to define extra states, this allows you to create more complex styling scenarios.
In the selector field, the & sign represents your element’s class, like in Sass or SCSS. For instance, define an after pseudo-element as follows.
Unlock your creativity by combining states. Imagine you have a <div> element containing various elements, including links (<a> elements). To create an engaging effect, let’s explore how to simultaneously change the styles of all links within the <div> when hovering over it.
- Define the hover state for the <div> element using &:hover
- Adding a after &:hover specifies that the styles apply to all <a> elements inside the hovered <div>
Styles
Each state is directly linked to the style settings listed below it, which determine its appearance and behavior. These settings play a crucial role in defining the overall design and functionality. You can learn more about the style settings here.
Class manager
Effortlessly manage and organize your classes through the Class manager. Use it to easily handle tasks such as deleting, renaming, and performing other functions with your classes. You can access it in one of two ways.
1. From the class list
- Click on the Add button.
- In the popup, click on the cog icon to manage subclasses, or you can find the same icon under the Utility tab to manage utility classes.
2. From the Top panel
- Alternatively, you can access the Class manager through the Top panel‘s settings.
Once in the Class manager, you gain the power to:
- Reset: Restore a class to its default settings.
- Duplicate: Create an exact copy of a class.
- Rename: Give your classes more meaningful or updated names.
- Favored elements: Mark specific classes as favorites for quicker access and organization.
- CSS Class: Assign or modify the CSS class associated with it to customize its styling.
- Delete: Remove classes that are no longer needed.
- Exclude: Hide specific classes from search results.
