Watch on YouTube
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
Typography
Size, weight, leading, alignment, tracking, and text treatments aligned to one scale.
Layout
Display, positioning, overflow, object fit, aspect ratio, and z-index utilities.
Spacing
Margin, padding, and gap built on a shared spacing rhythm.
Sizing
Width, height, and max-width helpers for common breakpoints and fractions.
Colors
Semantic text, background, and border colors tied to bundled tokens.
Effects
Opacity and box-shadow helpers for hierarchy, depth, and emphasis.
Filters
Blur, contrast, saturation, hue, and color-effect adjustments for media and art.
Borders
Border width, style, radius, and color utilities for framing and separation.
Components
Bundled component presets starting with the shipped button families.
Breakpoints
The
--on-* suffix system for responsive structural utilities.Fluid scaling
How
clamp()-based scaling works, why it matters, and which families ship fluid scaling.Variables
CSS custom properties, bundled tokens such as
var(--border-*), and Elementor Variables.Start here
Quickstart
Install the plugin, import the Skelementor Preset, learn how categories fit together, and apply your first classes in Elementor.