> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Introduction
> SkelementorCSS is a CSS utility framework for Elementor—importable classes and design tokens that land in Elementor’s native systems.
[Watch on YouTube](https://youtu.be/KMA-bsBlQ-Y?si=klOgFOKQIhjyRQbr)
## SkelementorCSS
**SkelementorCSS** is the CSS side of Skelementor: a utility framework designed for **Elementor v4**. You work from a coherent catalog of small, single-purpose classes—typography, layout, spacing, color, borders, effects, flexbox, and ready-made component patterns—so layouts stay consistent and fast to iterate in the editor.
Instead of hand-writing one-off rules for every block, you **compose** utilities directly on atomic elements. Many families ship with **responsive behavior built into the class names** (for example fluid type and spacing), so you spend less time managing breakpoints manually.
## How it connects to Elementor
Skelementor is a WordPress plugin that imports classes and tokens into Elementor’s native **Global Classes** and **Variables** systems. That means utilities and tokens live where Elementor expects them, with no core-file patching required.
**Elementor v4** ships the **Atomic Editor** as the stable experience; new Elementor installs enable **Atomic Elements** by default. The built-in **Skelementor Preset** imports **976 classes** for Elementor’s default desktop, tablet, and mobile breakpoints.
## What you can do with it
* **Move faster in the editor** — Apply `flex`, `gap-4`, `text-2xl`, `button-primary`, `card`, and hundreds of other helpers without leaving Elementor’s UI.
* **Keep design decisions repeatable** — Shared scales for spacing, type, and color reduce one-off magic numbers.
* **Start from the shipped preset** — Import the Skelementor Preset first, then build from a known-good baseline inside Elementor’s native systems.
* **Stay organized at scale** — Split large sets into manageable imports and validate behavior before you commit to a full design system.
## What ships in the box
The built-in **Skelementor Preset** adds **976 classes** for Elementor’s default responsive breakpoints. The bundled source CSS remains available as a reference artifact when you want to inspect the framework.
## Concepts
Size, weight, leading, alignment, tracking, and text treatments aligned to one scale.
Display, positioning, overflow, object fit, aspect ratio, and z-index utilities.
Margin, padding, and gap built on a shared spacing rhythm.
Width, height, and max-width helpers for common breakpoints and fractions.
Semantic text, background, and border colors tied to bundled tokens.
Opacity and box-shadow helpers for hierarchy, depth, and emphasis.
Blur, contrast, saturation, hue, and color-effect adjustments for media and art.
Border width, style, radius, and color utilities for framing and separation.
Bundled component presets starting with the shipped button families.
The `--on-*` suffix system for responsive structural utilities.
How `clamp()`-based scaling works, why it matters, and which families ship fluid scaling.
CSS custom properties, bundled tokens such as `var(--border-*)`, and Elementor Variables.
## Start here
Install the plugin, import the Skelementor Preset, learn how categories fit together, and apply your first classes in Elementor.