> ## Documentation Index > Fetch the complete documentation index at: https://skelementorcss.com/llms.txt > Use this file to discover all available pages before exploring further. # Quickstart > Install Skelementor, import the Skelementor Preset, learn how utilities are organized, and apply classes in Elementor.
Skelementor Quickstart - Get up and running in 3 simple steps Skelementor Quickstart - Get up and running in 3 simple steps
## Get Started in 3 Steps Use this page when you want the fastest route from installing Skelementor to working classes inside Elementor. Need the longer walkthrough? Open the full import guide. ### Step 1: Install the Plugin Download, upload, and activate the Skelementor ZIP in WordPress. Use the full [installation guide](/getting-started/installation) if you need the detailed requirements, upload methods, or troubleshooting steps.
**Requirements:** WordPress **6.9+**, PHP 7.4+, and Elementor **v4** with the Atomic Editor enabled.
### Step 2: Import Your First CSS Use the built-in **Skelementor Preset** for the standard first import. It adds **976 classes** for Elementor’s default desktop, tablet, and mobile breakpoints while staying within Elementor’s native **1000-class** limit. ### Step 3: Use Classes in Elementor Open any page with Elementor, add an atomic element, and assign imported utility classes in the class field to confirm the styles render correctly.
Skelementor Utility Framework - Skelementor Preset and utility categories for Elementor v4 Skelementor Utility Framework - Skelementor Preset and utility categories for Elementor v4
## One Framework Skelementor ships one stable built-in import path for day-one setup: the **Skelementor Preset**. It adds **976 classes** for Elementor’s default desktop, tablet, and mobile breakpoints. The bundled `skelementor-utilities.css` file remains the source artifact for reference, inspection, and regeneration workflows. Where a class family uses responsive `clamp()` values (for example **`text-*`**), that behavior is built in and does not need a separate naming layer. **`leading-*`** uses fixed pixel `line-height` in the bundle, not `clamp()`. ## Framework Categories Responsive `text-*` scale, fixed pixel `leading-*`, weights, tracking, alignment, and text styling. Display, overflow, object-fit, aspect-ratio, positioning, z-index, and responsive structural suffixes. Margin, padding, and gap utilities built around the bundled spacing tokens. Fractional widths, screen-height helpers, and responsive max-width utilities. Text, background, and border color helpers aligned with the bundled tokens. Border widths, styles, radius utilities, and the shipped border color set. Full opacity scale for layering, disabled states, and visual depth. Blur, brightness, contrast, saturation, and color-shift utilities. Direction, wrap, alignment, order, grow/shrink, gap, and responsive structural variants. Preset button classes and the broader component patterns they support. The shipped `--on-*` suffix system for structural classes at each breakpoint. How `clamp()`-based scaling works across bundled typography and spacing families. CSS custom properties, bundled tokens, and how variables fit into imports. ## Related Guides Full installation methods, requirements, and setup checks. Detailed class and variable import walkthrough.