Today let us learn how to add a class to your components and its perks! Haven't you always thought that it would be great if there was some magic trick to get the same styles and designs across your project in a single click? That's why we put forward Classes.
What is a Class?
CodeDesign classes are built on the concept of HTML classes for those of you who are familiar with it. Classes help you organize, design, and style the components. The best part is, that once you have created a class, you could reuse them whole across your project.
If you’re curious to know how classes work under the hood, we recommend reading this document on Classes.
How to Add Class to a Component
Select the component onto which you have to add a class.
Settings for the component will slide out on the right side of your screen.
Under the title Design, you can find a space that says 'Add Classname'
Name the class you want to create. (for e.g.: if you intend to use it only for the style settings, you can name it 'the stylist'😉)
Now press Enter and done! You have added a class.
How to Add Styles to a Class
Click on the component you are about to add the style.
Click on the class you created that will usually be visible in your design settings. (If not found, don't panic! Just try typing the name in the class column and it will pop up!)
Scroll down to the Style settings to add the style you want to add. For example, we’ll try setting the background color.
Click on Style Settings and choose one color that's suitable for the background.
Voila! Now you have added a style attribute to your class!
How to Reuse the Style across Components using Classes.
Click on the component on which you want to reuse the class styles
When the settings bar slides out, go to the design part.
Type the class name to which you have added the styles previously.
Tap Enter! Done and dusted!
Now every style you attributed to the class before will be added to the selected component!
How to Remove the Class from a Component
Sometimes after creating something whole, you might feel an urge to remove the style of a certain component and add a new one! Then how do you remove the class you attributed to it before? Just tap a button, it's that simple!
Select the component from which you have to remove a class.
Go to the design settings on your right side
Click on the × mark near the class you want to remove.
And it's gone like the wind! Easy!
Bonus: Interested in learning more about classes in HTML/CSS? Check out this page from W3Schools.