Overview
The bundled framework ships responsive suffix variants for structural utilities. Instead of prefix syntax, Skelementor appends a breakpoint suffix to the class name.
That is discrete responsive behavior at thresholds. It differs from fluid scaling (for example clamp() on font sizes), which changes continuously with the viewport—see Fluid scaling.
Breakpoint Map
| Suffix | Media query | Usage |
|---|
--on-xxl | min-width: 2400px | Widescreen and above |
--on-xl | max-width: 1366px | Laptop and below |
--on-l | max-width: 1200px | Tablet landscape and below |
--on-m | max-width: 1024px | Tablet and below |
--on-s | max-width: 880px | Mobile landscape and below |
--on-xs | max-width: 767px | Mobile only |
Example
Use the interactive demo to see how breakpoint thresholds relate to the --on-* suffix system.
<div class="elementor-element flex flex-col flex-row--on-m gap-4">
<div class="w-1-2 p-4 bg-primary text-white rounded">
A
</div>
<div class="w-1-2 p-4 bg-gray-light rounded">
B
</div>
</div>
Supported Families
- Display:
.hidden, .block, .inline-block, .flex, .inline-flex
- Overflow:
.overflow-hidden, .overflow-auto, .overflow-visible
- Object fit:
.object-contain, .object-cover, .object-fill, .object-none, .object-scale-down
- Aspect ratio:
.aspect-square, .aspect-video, .aspect-auto
- Positioning:
.static, .relative, .absolute, .fixed, .sticky
- Z-index:
.z-0, .z-10, .z-20, .z-30, .z-40, .z-50, .z-60, .z-70, .z-80, .z-90, .z-100
- Flex direction:
.flex-row, .flex-col, reverse variants
- Flex wrap:
.flex-wrap, .flex-nowrap, .flex-wrap-reverse
- Alignment:
.justify-*, .items-*, .self-*, .content-*
- Flex basis:
.basis-auto, .basis-full, .basis-0, .basis-px, .basis-1-2, .basis-1-3, .basis-2-3, .basis-1-4, .basis-3-4
- Order:
.order-first, .order-last
Example Patterns
<div class="elementor-element flex flex-row flex-col--on-m gap-6">
<div class="w-1-2 p-6 bg-white rounded-lg">
Primary column
</div>
<div class="w-1-2 p-6 bg-gray-light rounded-lg">
Secondary column
</div>
</div>
<nav class="flex items-center justify-between justify-center--on-xs gap-4">
<span class="text-lg font-semibold">
Brand
</span>
<div class="flex gap-4 hidden--on-xs">
<a class="text-gray" href="#">
Docs
</a>
<a class="text-gray" href="#">
Support
</a>
</div>
</nav>
Best Practices
- Use suffixes only for structural shifts, not for every class on the page.
- Keep the base class readable first, then add the responsive override.
- Prefer a small number of breakpoint changes over stacking many suffixes on one element.
- Pair responsive suffixes with the standard spacing and sizing utilities that remain stable across breakpoints.
