Skip to main content
Skelementor Utility Framework - 200+ CSS classes for Elementor v4

​
What is the Utility Framework?

The Skelementor Utility Framework is a comprehensive collection of 200+ CSS utility classes designed specifically for Elementor v4’s Atomic Elements. It provides everything you need to build modern, responsive designs without writing custom CSS.

Quick Import

Import the complete framework in minutes.

​
Framework Categories

Typography

9 font sizes, 6 font weights, line heights, text alignment, and more.

Layout

Display, positioning, flexbox, overflow, and aspect ratio utilities.

Spacing

Margin, padding, and gap utilities with consistent 4px scale.

Sizing

Width, height, max-width, and min-height utilities.

Colors

Text, background, and border colors with semantic naming.

Borders

Border width, style, radius, and color utilities.

Effects

Opacity utilities for creating overlays and transparency effects.

Positioning

Position types and z-index utilities with automatic positioning.

Flexbox

Complete flexbox utilities for modern layouts.

Components

Pre-built button, card, and container components.

​
Design System Principles

​
Consistent Scale

All spacing utilities follow a consistent 4px scale:
14pxFine adjustments
28pxSmall spacing
312pxMedium spacing
416pxStandard spacing
624pxLarge spacing
832pxExtra large spacing
1248pxSection spacing

​
Semantic Naming

Classes use intuitive, semantic names that describe their purpose: 
/* Clear and descriptive */
.text-2xl {
  font-size: 24px;
}
.bg-blue {
  background-color: #3b82f6;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}

​
Mobile-First Approach

All utilities are designed to work seamlessly across devices: 
<!-- Responsive by default -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1-2">Content</div>
  <div class="w-full md:w-1-2">Content</div>
</div>

​
Quick Reference

​
Most Used Classes

Typography

    .text-2xl /* 24px font size */
    .font-700 /* Bold weight */
    .text-center /* Center alignment */
    .leading-relaxed /* 24px line height */

Layout

    .flex /* Flexbox display */
    .items-center /* Center alignment */
    .justify-between /* Space between */
    .gap-4 /* 16px gap */

Spacing

    .p-4 /* 16px padding */
    .m-4 /* 16px margin */
    .px-6 /* 24px horizontal padding */
    .py-2 /* 8px vertical padding */

Colors

    .text-gray /* Gray text */
    .bg-white /* White background */
    .border-gray /* Gray border */
    .text-blue /* Blue text */

​
Component Examples

Button Component

<button class="btn btn-blue">Primary Button</button>
<button class="btn btn-green btn-lg">Large Button</button>
<button class="btn btn-red btn-sm">Small Button</button>

Card Component

<div class="card p-6 rounded-lg bg-white">
  <h2 class="text-xl font-600 mb-4">Card Title</h2>
  <p class="text-gray">Card content goes here.</p>
</div>

Container Component

<div class="cont">
  <div class="flex gap-6 flex-wrap">
    <div class="w-1-3">Column 1</div>
    <div class="w-1-3">Column 2</div>
    <div class="w-1-3">Column 3</div>
  </div>
</div>

​
Browser Support

The utility framework is built with modern CSS features and supports:
  • Chrome: 88+
  • Firefox: 78+
  • Safari: 14+
  • Edge: 88+
Elementor Compatibility: All utilities are designed to work seamlessly with Elementor v4’s Global Classes system and Atomic Elements.

​
Performance

Optimized CSS

  • Minimal CSS footprint - No unused styles - Efficient selectors - Compressed output

Elementor Integration

  • Native Global Classes - No custom CSS injection - Automatic optimization - Cache-friendly

​
Customization

​
Extending the Framework

You can easily extend the framework with your own utilities: 
/* Add custom utilities */
.text-custom {
  font-size: 28px;
}
.bg-brand {
  background-color: #your-brand-color;
}
.spacing-xl {
  margin: 64px;
}

​
Modifying Existing Classes

To modify existing classes:
1

Delete Existing Class

Remove the class from Elementor’s Global Classes panel.
2

Create Modified Version

Write your modified CSS with the same class name.
3

Re-import

Import the updated CSS through Skelementor.

​
Best Practices

​
Class Combination

Combine multiple utilities for complex designs: 
<!-- Complex card with multiple utilities -->
<div class="card p-6 rounded-lg bg-white shadow-lg border border-gray-light">
  <h2 class="text-2xl font-700 text-center mb-4">Title</h2>
  <p class="text-gray leading-relaxed">Content</p>
  <button class="btn btn-blue mt-4">Action</button>
</div>

​
Consistent Spacing

Use the spacing scale consistently: 
<!-- Good: Consistent spacing scale -->
<div class="p-4 mb-6">
  <h2 class="mb-4">Title</h2>
  <p class="mb-2">Paragraph 1</p>
  <p class="mb-2">Paragraph 2</p>
</div>

<!-- Avoid: Inconsistent spacing -->
<div class="p-3 mb-7">
  <h2 class="mb-5">Title</h2>
  <p class="mb-1">Paragraph 1</p>
  <p class="mb-3">Paragraph 2</p>
</div>

​
Semantic HTML

Always use semantic HTML with utility classes: 
<!-- Good: Semantic HTML with utilities -->
<header class="bg-white p-6 border-b border-gray-light">
  <h1 class="text-3xl font-700">Site Title</h1>
</header>

<!-- Avoid: Generic divs -->
<div class="bg-white p-6 border-b border-gray-light">
  <div class="text-3xl font-700">Site Title</div>
</div>

​
Next Steps

Typography Guide

Learn about font sizes, weights, and text utilities.

Layout Guide

Master display, positioning, and flexbox utilities.

Spacing Guide

Understand the spacing system and scale.

Component Guide

Explore pre-built components and patterns.