Skip to main content
All CollectionsLayout & Design Workspace
Introduction to Classes in CodeDesign
Introduction to Classes in CodeDesign
Updated over a week ago

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.

This gif shows the steps needed to add a class to your project

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

  1. Select the component onto which you have to add a class.

    A button is chosen as the component onto which the class will be added.

  2. Settings for the component will slide out on the right side of your screen.

  3. Under the title Design, you can find a space that says 'Add Classname'

    The column to add a specific classname is highlighted.

  4. 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'😉)

    Naming the class as 'The Stylist'.

  5. Now press Enter and done! You have added a class.

How to Add Styles to a Class

  1. Click on the component you are about to add the style.

  2. 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!)

  3. Scroll down to the Style settings to add the style you want to add. For example, we’ll try setting the background color.

  4. 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.

  1. Click on the component on which you want to reuse the class styles

  2. When the settings bar slides out, go to the design part.

  3. Type the class name to which you have added the styles previously.

    Applying the first created class to another element, in this case, another button.

  4. Tap Enter! Done and dusted!

    Look of the elements, once the class is added to them.

  5. 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!

  1. Select the component from which you have to remove a class.

  2. Go to the design settings on your right side

  3. Click on the × mark near the class you want to remove.

    How to close a class is highlighted.

  4. And it's gone like the wind! Easy!

Bonus: Interested in learning more about classes in HTML/CSS? Check out this page from W3Schools.

Did this answer your question?