Intro
So, what’s Mosaic all about? Well, imagine having a WordPress theme builder that lets you create your website just the way you want. Mosaic is focused on providing you with detailed control, whether you’re an experienced designer or a beginner.
With Mosaic, you receive a one-of-a-kind method for creating pages. It’s more than just assembling elements, it’s about creating something that truly reflects your style. That can mean starting from a WordPress page kit for instant structure, then adjusting the look with classes for more control.
The focus on user-friendly customization, the flexibility of CSS, and the option to reuse components make it stand out. You can let your creativity run wild without feeling stressed, thanks to the helpful tools and features made for everyone.
The class system in Mosaic
The Class system in Mosaic transforms the process of styling elements on your website, making it much faster and easier to build.
Picture this: you’re working on a website and you want to maintain consistency throughout. This is where classes come into play. They enable you to create designs quickly, save time, and guarantee that everything looks perfect across different website layouts.
Moreover, making updates is super easy. For example, if your client decides they want more space between sections, you can simply modify the padding of one class and witness the change take effect everywhere that class is used.
When you’re using the Editor, take a look at the Navigator located on the left side, it’s the icon with three lines. It displays all your elements in a single location. On the right side, you’ll see the Right sidebar, which allows you to customize your selected element. At the top of this sidebar, you’ll find a list of your selected element’s classes. This makes it incredibly easy to arrange and use them effectively.
Types of classes
Alright, let’s jump into how utility and semantic classes work in Mosaic and how they can really simplify your work.
When you select an element in Mosaic, you’ll see a style panel on the right with all the classes that the element is using. Need to make changes to a class? Easy: simply click on the class and adjust its style settings on the spot.
If you haven’t made any additional classes for your element yet, you’ll find two default ones: an element class and a custom class. Don’t worry, I’ll break down what each of these does shortly.
Element class
- Purpose: Base style assigned to all elements of the same type
- Scope: Global (shared across elements)
- Inherits from: None
- Best for: Consistent default styles (e.g., all buttons)
Element subclass
- Purpose: Adds more specific styles on top of an element class
- Scope: Inherits from the element class
- Inherits from: Element class
- Best for: Customizing a group of related elements
Utility class
- Purpose: Applies a single reusable style across different elements
- Scope: Global
- Inherits from: None
- Best for: Managing spacing, shadow, radius, etc., site-wide
Utility subclass
- Purpose: Extends a utility class for finer control
- Scope: Inherits from utility class
- Inherits from: Utility class
- Best for: Layering adjustments on utility rules
Custom class
- Purpose: Applies styles to a specific element only
- Scope: Local (one element only)
- Inherits from: None
- Best for: One-off tweaks without affecting anything else
Semantic classes in Mosaic
Keeping your design well-structured and organized is all about using semantic classes. In Mosaic, we categorize a semantic class into two types: element classes and element subclasses.
First, let’s discuss the element classes. In Mosaic, every element is assigned an element class according to its type. So, elements with the same element class will have the same basic styles. This ensures a consistent look for similar elements on your website from the start.
Now let’s move on to element subclasses. Element subclasses are not mandatory, but they are extremely useful. They enable you to create new classes based on element classes, inheriting their styles and allowing you to add more specific customizations.
You can create as many element subclasses as you want, and each can be fine-tuned further with additional subclasses. They do not function independently, instead, they serve as enhancements to the element class they are connected to. This provides a great deal of flexibility and control over your design.
Utility classes in Mosaic
Now, let’s discuss utility classes in Mosaic. Unlike element and element subclasses, the utility class doesn’t follow a structure. Instead, it’s designed to be flexible and widely usable throughout your entire project.
Utility classes can be applied globally across your website, which in turn ensures consistent CSS properties. They’re not limited to specific elements like element and element subclasses but can be used across different ones. The term “utility” emphasizes their practical functionality and centralized control, making it easy to make changes in one place and have them affect everywhere that class is used.
You can create as many utility classes as you need, just like with subclasses. And the best part? You can adjust each one even more by adding utility subclasses.
These classes help you maintain a consistent design without having to adjust each element separately. They are perfect for making overall style changes that give your website a clean look.
Custom class in Mosaic
Let’s look at another important class type you’ll come across in Mosaic, the custom class. Unlike a semantic class or utility class, a custom class is specific to each element.
Here’s how it works: so basically, when you start styling an element, a custom class is generated for it automatically. This class is designed exclusively for that element, just as its name states. It’s already pre-selected in the class list, so any changes you make will be saved to this custom class.
Custom classes are great when you want a specific element to stand out without changing everything else. They allow you to customize individual parts without impacting the overall design.
Hierarchy in styling
So, how does the hierarchy of styles work in Mosaic? And why does it matter?
Vertical class order
While you’re working on styling your elements, take a look at the right sidebar. You’ll see a well-organized list of your classes laid out for you. Your class types are arranged in separate lines, and if you add any extra utility classes, they’ll appear on additional lines as well. This vertical arrangement is what sets the order of precedence for your styles from top to bottom.
Horizontal class order
Though there’s even more to it. Remember how we’ve talked about creating numerous sub-classes and utility classes? Well, this introduces an additional dimension to the hierarchy. Their lines have a left-to-right order of precedence to consider. Meaning that the arrangement of your classes, both vertically and horizontally, will influence how your styles are implemented.
Class priority in Mosaic
At the top, there are the element class and its element subclasses, moving from left to right. They give detailed styles to your elements, but they don’t have as much power as the other classes.
Right in the middle, you’ll see your utility classes. You can expand your classes by adding more sections based on the number of utility classes you’ve used for the element you’re working on. The utility class provides more detailed styles, allowing you to adjust the element classes and element subclasses without being stuck, as they can still be completely customizable later on.
Utility classes are great for making sure different elements have a consistent look by adding extra style settings. You can add as many detailed utility classes and utility subclasses as you want, which creates a natural order of precedence from left to right.
Over on the bottom, you’ll see the custom classes. They’re the big shots of your styling hierarchy, they have the ultimate power and can change any style set by element, element sub, utility, and utility subclasses. So, when you use a custom class, you’re basically declaring, “This is the exact look I want for this element!”
Organize your classes
Trying to figure out how to keep all your classes organized in one place? Mosaic’s got you covered. It does most of the work for you. And if you want to further personalize and customize things, it’s really easy to do so.
First things first, choose the element you want to focus on. After that, there are a few options for opening your Class manager. See the style panel with all the classes listed at the top? You can click the plus button right there to start managing your “Element” or “Utility” classes directly. Or, if you prefer, you can also find them through the toolbar’s settings.
When you’re in the Class manager, you have access to some cool settings that allow you to customize your classes. It’s where you can organize them and make adjustments to ensure that everything appears perfect on your website.
Naming Conventions
Having clear and descriptive class names is super important for keeping your project neat and easy to follow. When you or your teammates see the class name, it should instantly tell you what the class is all about. This doesn’t just help you stay organized, but it also makes it simpler for others working on the project to understand how the website is set up and what it does.
So, how do you decide on the names for your classes? Here are a few questions that can help:
- What’s the role of this class in the project?
- What is the primary goal of this class?
- How can I ensure that the responsibility of this class is clearly defined?
Make sure to give each class a meaningful and descriptive name. Begin with a general category and then narrow it down. For example, if you’re working with text, you’ll automatically have an element class called ‘Text’. Keep the names concise and only use acronyms that are known by your team and are suitable.
Just a reminder that when naming a semantic class, focus on its function rather than its style. However, when it comes to a utility class, make sure its name reflects the styles it’s applying. This naming approach should be used for both your element classes and element subclasses (semantic classes) as well as utility and utility subclasses in Mosaic.
Having a well-organized naming system really helps when you’re trying to find classes in the Class manager. It just makes everything so much easier for everyone involved.
The Most Effective Ways to Use Them
We’ve covered the basics, but seeing them in action makes all the difference. So next, we’ll dig into element subclasses, utility classes, and custom classes, and show you how they really work through examples.
How to Use Element Subclasses
Just a reminder that element subclasses act as the children of the element class. They take on inherited styles and then bring their own special touch. It’s important for each element subclass to have a clear purpose for inheriting from the element class, so your design stays consistent and well-structured. Element subclasses play a key role in keeping your styles organized hierarchically.
Here’s a tip: try not to get too specific. It might be tempting, but it’s better to keep things simple by adding variations within each one.
Having a badly designed element subclass system can cause issues with scaling and organizing your website. It’s important to have a clear purpose for an element subclass to inherit from the element class. If not, you might want to think about using a custom class with all the necessary styles instead.
Example
Let’s check out a real-life example of using a button element. In Mosaic, all buttons have a default ‘Button’ element class. We can further define it by creating element subclasses that take on styles from the element class and add their own unique design. This helps keep your styles organized and easy to handle. Here’s the process of how to achieve this:
Go ahead and click on the button element on the Canvas. Make sure the element class is selected, then click the plus button on the right side of the class list. Then select the element tab, add a name, let’s call it ‘Primary’, and hit enter.
Now, have some fun customizing your subclass. Feel free to switch up the styles for the ‘Primary’ element subclass in any way you want. With this element subclass, you can give a consistent look to any of your buttons. Just click on your button element and select the ‘Primary’ element subclass from the Class manager or the element’s dropdown.
Need a different look? Make a new element subclass for secondary buttons following the same process. This way, you can personalize it and have a variety of button styles to choose from.
Consider adding size options to each element subclass. For example, you could create S, M, and L element subclasses for ‘Primary’ and ‘Secondary’ buttons. This will give you a variety of button sizes to use for different purposes.
Feel free to create additional variations at any level that you find useful for your project. Element subclasses give you the flexibility to expand your design system to fit your specific requirements.
How to Use Utility Classes and Utility Subclasses
Utility classes are super useful for setting up general styles throughout your whole project. Just keep them straightforward and purposeful, with styles that work globally instead of being tied to specific elements.
These classes work well in various situations and are suitable almost everywhere. You can use different utility classes together on one element to make the most of their different style settings.
Example
Now, we’ll take our previous example to the next level with the magic of utility classes. We’ll kick things off with our buttons and throw in some images to demonstrate the endless possibilities of utility classes.
Let’s select our button element on the Canvas. Once again, click on the plus button located on the right side of the class list. Then choose the ‘Utility’ tab from the two options. And lastly, give your class a name that reflects the style you wish to apply. For example, you can name it ‘Border radius’.
You can set your Radius settings to 20px.
Apply the ‘Border radius’ utility class to any element you wish to have rounded corners, like images.
You have the option to create additional utility classes for styles like shadows or borders. This will simplify the process of applying these styles to any element in your design. Then you can apply these classes to your elements in the same way you added ‘Border radius’. You can also add more variations to your utility classes as utility subclasses. For example, think about creating different border-radius options depending on their size, this would give you even more flexibility.
How to Use Custom Classes
If you want to style a particular element, custom classes are the way to go. With custom classes, you can focus on just that one element, preventing any unintended changes across the entire site. In Mosaic, your custom class will automatically show up in the class list, which is selected by default for easy editing.
Custom classes can be great for dealing with unexpected client requests that don’t quite fit into the regular class system. They make it easy to make style changes fast and efficiently, so you can meet specific design needs without any trouble.
Example
And finally, let’s now look at how to use custom classes with our button example. They’re really useful for managing special design needs and adjusting the look of individual elements.
Click on the button element on the canvas. When you click on your button, a custom class will appear in the class list and get selected automatically. You don’t have to give it a name since it’s specific to that particular element.
Once you’ve made sure that the custom class is selected in the class list, go ahead and add your own special touch to make this button stand out and look different from the rest.
Conclusion
Hope you found this blog post about semantic and utility classes in Mosaic to be both informative and engaging. We covered the class system provided by Mosaic, discussed useful naming conventions, and went through some practical examples.
The truth is that having a class system in place is way better than not having one at all. Customizing each semantic class and utility class to fit your design needs will make managing your website so much easier and save you loads of time in the long run.
If you stick to the suggestions we discussed, you’ll be able to maintain a clean design and steer clear of adding the same styles repeatedly. Mosaic provides a great mix of semantic class structure and flexible utility class styling that will help streamline your design work.
So, make sure to make the most of what Mosaic provides, and see your websites thrive. Once you got the hang of classes, color theory in web design is what transforms consistency into experience, turning palettes into stronger connections with visitors.
