Skip to main content
Watch on YouTube

​
SkelementorCSS

SkelementorCSS is the CSS side of Skelementor: a full utility-first 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 your CSS into Elementor’s native Global Classes and Variables systems. That means utilities and tokens live where Elementor expects them—not as a fragile layer of ad hoc frontend CSS.
Elementor 4.0+ ships the Atomic Editor as the stable experience; new Elementor installs enable Atomic Elements by default. Use atomic elements so classes apply cleanly at the element level, and enable Variables when you want imported design tokens alongside utilities.

​
What you can do with it

  • Move faster in the editor — Apply flex, gap-4, text-2xl, btn, 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.
  • Grow from the bundle or your own CSS — Start from the shipped utility file, then import custom classes and variables using standard CSS syntax.
  • 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 bundled framework includes ~1000 utilities spanning the areas you use most often in production layouts.

​
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 drop-shadow 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 bundled framework, learn how categories fit together, and apply your first classes in Elementor.