> ## Documentation Index
> Fetch the complete documentation index at: https://atomickit.copyelement.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Class Creator: Build and Manage CSS Utility Classes

> Use AtomicKit's Class Creator to build Elementor global classes with property selectors, breakpoint scopes, design token references, and live CSS preview.

The Class Creator gives you a visual interface for building custom global CSS classes that work alongside AtomicKit's built-in utilities. You select CSS properties from dropdowns, scope them to Desktop, Tablet, or Mobile breakpoints, reference your design tokens from the sidebar, and preview the compiled CSS before saving. Everything saves directly to Elementor's global class registry — no manual file editing required.

## Creating a Class

<Steps>
  <Step title="Open the Class Creator">
    In your WordPress admin, go to **Elementor → AtomicKit** and select the **Class Creator** tab.
  </Step>

  <Step title="Enter a class name">
    Type a name for your new class in the **Class Name** field. Use lowercase letters and hyphens — for example, `card-shadow` or `flex-center`. Avoid spaces, underscores, and uppercase characters for best compatibility with Elementor.
  </Step>

  <Step title="Select a property category">
    Use the category dropdown to choose the type of CSS you want to add. Available categories are:

    | Category    | Examples                                                    |
    | ----------- | ----------------------------------------------------------- |
    | Layout      | `display`, `position`, `overflow`                           |
    | Spacing     | `margin`, `padding`                                         |
    | Sizing      | `width`, `height`, `max-width`                              |
    | Flexbox     | `flex-direction`, `justify-content`, `align-items`, `gap`   |
    | Grid        | `grid-template-columns`, `grid-gap`, `grid-area`            |
    | Typography  | `font-size`, `font-weight`, `line-height`, `letter-spacing` |
    | Backgrounds | `background-color`, `background-image`, `background-size`   |
    | Borders     | `border`, `border-radius`, `outline`                        |
    | Custom CSS  | Write any arbitrary CSS property-value pair                 |
  </Step>

  <Step title="Set property values">
    Enter a value for each property. To reference a design token instead of a hard-coded value, drag a variable from the **Design Tokens** sidebar into the value field — or click the token to insert the `var(--token-name)` reference automatically.
  </Step>

  <Step title="Add responsive overrides">
    Switch between the **Desktop**, **Tablet**, and **Mobile** breakpoint tabs at the top of the form. Properties set on a breakpoint tab apply only at that screen size. You can add, change, or omit any property per breakpoint independently.
  </Step>

  <Step title="Review the live CSS preview">
    The **Live CSS Preview** panel compiles your selections in real time, showing the exact CSS that will be saved. Review it to confirm property names, values, and `@media` blocks look correct before proceeding.
  </Step>

  <Step title="Save to Elementor">
    Click **Save Class**. The class is registered in Elementor's global class registry and immediately available to apply to any element in the Elementor editor.
  </Step>
</Steps>

<Tip>
  Use hyphenated class names such as `text-muted` or `container-wide` rather than camelCase or underscore-separated names. Elementor processes class names as standard HTML class attributes, and hyphens are the conventional separator in CSS utility naming.
</Tip>

## Design Tokens Sidebar

The Design Tokens sidebar lists every CSS variable you have created in the [Variables Manager](/plugin/variables-manager). You can use these tokens as values inside any property field in the Class Creator.

* **Drag and drop** a token from the sidebar into a value input to insert the `var(--token-name)` reference.
* **Click** a token while a value input is focused to insert the reference at the cursor position.

Referencing tokens instead of hard-coded values means that updating a variable in the Variables Manager automatically updates every class that uses it — no need to edit classes individually.

## Breakpoint Scopes

AtomicKit maps breakpoint tabs to Elementor's built-in responsive breakpoints.

| Tab     | Scope                                                              |
| ------- | ------------------------------------------------------------------ |
| Desktop | Styles applied at all screen sizes (the base layer)                |
| Tablet  | Styles applied inside Elementor's tablet breakpoint `@media` block |
| Mobile  | Styles applied inside Elementor's mobile breakpoint `@media` block |

Set your base styles under **Desktop** first, then switch to **Tablet** and **Mobile** to add or override only the properties that need to change at smaller sizes. Properties left empty on a breakpoint tab inherit from the larger breakpoint.

## Managing Existing Classes

Open the **Class Manager** view within the Class Creator section to see all registered global classes and take management actions.

### Reordering Classes

Drag the handle icon (☰) on any class row up or down to change its position in the list. The order saves instantly — no confirmation required. Class order affects the CSS cascade when multiple classes are applied to the same element.

### Renaming a Class

Click **Rename** on any class row and enter a new display label. AtomicKit preserves the underlying CSS class selector when you rename, so existing Elementor elements that use the class continue to work without any changes.

<Note>
  The display label in Elementor's editor updates to reflect the new name, but the CSS class selector used in your HTML remains unchanged. Your published pages are unaffected by renames.
</Note>

### Duplicating a Class

Click **Duplicate** to clone a class. The duplicate copies all property rules including responsive breakpoint styles. Duplicating is useful when you need a variation of an existing class (for example, `btn-primary` → `btn-secondary`) and want to start from the same property set.

### Deleting Classes

* **Single delete:** Click the **Delete** icon on a class row to remove that class from Elementor.
* **Bulk delete:** Select multiple classes using their checkboxes and click **Delete Selected**.

<Warning>
  Deleting a class removes it from Elementor's registry. Any elements on your site that had that class applied will lose it silently — Elementor does not warn you about active usage before deletion. Create a [Snapshot](/plugin/snapshot-history) before bulk deletions.
</Warning>

## Related

* [Variables Manager](/plugin/variables-manager) — create the design tokens you reference in class values
* [Snapshot History](/plugin/snapshot-history) — save a checkpoint before making large changes to your class set