In Kirki, a Class serves as a blueprint for creating objects, defining their structure, and initial style attributes. 

On the other hand, a Subclass is a child class that inherits the attributes of its parent class while also having the ability to possess its own unique characteristics.

Classes and Subclasses

In Kirki, using Classes and Subclasses helps you manage and reuse styles efficiently across your website. 

Whenever you customize the style of an element, Kirki automatically creates a class to hold those style rules, eliminating the need to define them from scratch manually.

Create a Class

A Class is a reusable style group applied to one or more elements. To create a class:

• Select an element on the page.
  
• Make your styling changes (e.g., color, padding, typography) from the Right Panel.
  
• Kirki will automatically assign a class to that element based on your changes.

You can also rename the class to something meaningful for easier identification and reuse.

Create a Subclass

A Subclass builds upon an existing class with additional or overridden styles. It’s ideal for cases where you want to slightly tweak a base design without affecting all instances of the main class.

To create a subclass:

1. Select an element from the page.

2. Open the Classes dropdown in the Right Panel to access the Inheritance menu.

3. In the Subclass field, enter a name for your subclass and click Add.

This layered styling approach gives you granular control while maintaining consistency across your site.

Once a subclass is added, the count on the Classes dropdown increases to match.

Edit a Class or Subclass

To edit a class in Kirki:

1. Select an element on the page.

2. Open the Classes dropdown in the Right Panel to access the Inheritance menu.

3. Click on any class name to select it. A checkmark will appear beside the active class.

4. Use the Right Panel options to apply changes. As you customize the element, the updates will be automatically saved to this active class.

These changes will instantly apply across all elements using the same class, ensuring consistency throughout your design.

Duplicate Style Settings Using Classes

Kirki’s class system allows you to efficiently duplicate and manage styles across multiple elements. Instead of manually recreating styles, you can simply apply existing classes or subclasses to new elements.

How It Works

To make another element adopt the same style, just apply the same class or subclass used in the original element. However, keep in mind that subclasses must be applied after their parent class – this ensures proper inheritance and styling accuracy.

Example Scenario

Let’s walk through a practical example:

1. You add a Heading element to the page and begin customizing its style without creating a class manually.
   
   • Kirki automatically generates a class to store those style changes (e.g., heading_1).
     
2. You add a second Heading and want it to look the same.
   
   • Go to the Classes section and apply the class used in the first heading.
     
   • Now, both headings share the same style. Any updates to one will reflect in the other.
     
3. You want the second Heading to look slightly different (e.g., different color, font weight, opacity, etc).
   
   • Create a Subclass for the second heading (e.g., heading_1_faded).
     
   • This subclass will override specific styles without affecting the original class or the first heading.
     
4. You add a third Heading and want it to match the second one (with both the base and modified styles).
   
   • First, apply the base class (heading_1).
     
   • Then, apply the subclass (heading_1_faded).
     
   • The third heading now shares both the foundational and modified styles.

Manage Classes and Subclasses

You can easily rename, duplicate, or detach a class.

Rename

1. Select an element from the page.

2. Open the Classes dropdown in the Right Panel to access the Inheritance menu.

3. Click on the ellipsis (…) icon next to a Class and select Rename.

4. Type in the new name (make sure it’s something relevant) and hit enter to save.

This lets you keep your styling system clean, consistent, and easy to manage.

Duplicate

1. Select an element from the page.

2. Open the Classes dropdown in the Right Panel to access the Inheritance menu.

3. Click on the ellipsis (…) icon next to a Class and select Duplicate.

Detach

1. Select an element from the page.

2. Open the Classes dropdown in the Right Panel to access the Inheritance menu.

3. Click on the ellipsis (…) icon next to a Class and select Detach.

Once detached, the element will lose its shared styling and stop syncing with other elements using that class. You can then create a new class for it, just like creating a subclass, or simply restyle the element to automatically generate a new class.

CSS Preview

You can view a class’s CSS Preview in two ways:

1. Select an element from the page.

2. Open the Classes dropdown in the Right Panel to access the Inheritance menu.

3. Click on the ellipsis (…) icon next to a Class and select CSS Preview.

Alternatively, you can also:

1. On the Inheritance menu, click on a class to select it. A checkmark will appear beside the active class.

2. Then, click the ellipsis (…) icon at the top of the Inheritance menu and select CSS Preview.

Element States

Beside the Classes dropdown, you’ll also find the Element States dropdown. It lets you style different states of an element, such as hover, focus, active, and more, helping you create more interactive and responsive experiences.

Learn more about Element States.