Section

Body copy

Neutral line

Link

Success

Error

Warning

Font size, weight, and layout Background colors

```html theme={null}

``` This is the base pattern for the button system: choose the preset that matches the action, then layer in size only when you need it. ### Choosing a semantic color Use a semantic token to communicate intent. For example, `button-success` works well for positive confirmations and completion actions. ```html theme={null}

``` | Semantic token | Color class | | -------------- | ------------------ | | `primary` | `button-primary` | | `secondary` | `button-secondary` | | `neutral` | `button-neutral` | | `success` | `button-success` | | `warning` | `button-warning` | | `error` | `button-error` | ### Changing size Add a size class next to the preset when the button should feel more prominent or more compact in the layout. ```html theme={null}

``` Size classes only make sense when they are paired with a semantic preset. | Suffix | Class | | ------ | ----------- | | `xs` | `button-xs` | | `sm` | `button-sm` | | `md` | `button-md` | | `lg` | `button-lg` | | `xl` | `button-xl` | ### Combining with utilities Preset classes define the button itself, and utilities handle the surrounding composition. This works well when a button needs spacing or typography adjustments inside a larger layout. ```html theme={null}

``` Use utilities around the button or alongside the preset when you need layout, spacing, or text-level refinement without replacing the preset system. ## Notes * Every button starts with a semantic preset such as `button-primary` or `button-success`. * Size classes only make sense next to a color preset (`button-primary button-md`). * `secondary` is a light fill (`#aaebfd`); use `text-black` or `text-gray-dark` on the label if contrast is weak. * You can still add spacing, layout, or typography utilities alongside the preset classes. # Borders Source: https://skelementorcss.com/concepts/borders Border width, style, radius, and color utilities for defining element boundaries.

## Overview Border utilities cover width, style, radius, and color in one system, including side-specific border widths and directional corner rounding. Bundled border-width scale from `border-0` through `border-20` Border style utilities: solid, dashed, and none Border radius utilities for rounded corners Bundled color utilities for soft, neutral, and accent borders ## Common Patterns * Use `border-gray-light` for soft section and card separation. * Use `border-gray` or `border-black` when structure needs more contrast. * Use `border-primary` for the main bundled accent border. * Use side-specific widths and directional rounding for tabs, panels, and emphasized edges. * Keep width, style, color, and radius explicit in markup for clarity. ## Related Utilities Color utilities for border colors Padding utilities for internal border spacing # Colors Source: https://skelementorcss.com/concepts/colors Text, background, and border colors with semantic naming.

## Overview Color utilities cover text, background, and border tokens built on the same semantic palette. ## Base shades | Name | Base hex | | --------- | --------- | | Primary | `#0740f9` | | Secondary | `#aaebfd` | | Neutral | `#6b7280` | | Success | `#3DC13C` | | Warning | `#F4BB1B` | | Error | `#F13737` | ## Color Palette Click a swatch to copy. Columns match **l-5** … **base** … **d-5**. The utility references split **structural** white/black/gray classes from the six **semantic** tokens (with optional `-l-*` / `-d-*` steps): [Text colors](/colors/text-colors), [Background colors](/colors/background-colors), [Border colors](/colors/border-colors). Semantic text color utilities Background color utilities for sections and surfaces Border color utilities that pair with the border system ## Accessibility Ensure text and interface colors preserve readable contrast. The palette is designed for sensible defaults, but context still matters. ## Related Utilities Text utilities that work with colors Border utilities with color support # Components Source: https://skelementorcss.com/concepts/components Bundled preset button classes for fast, consistent actions. ## Overview Components are reusable interface patterns built on top of the lower-level utility classes. Instead of assembling every state from scratch, you reach for a component pattern when you want a familiar piece of UI to behave consistently across a site. Common component categories include buttons for actions, badges for short status labels, and links for navigation or secondary calls to action. Utilities still matter here because they handle the layout, spacing, and typography around each component. At the moment, the bundled component documentation focuses on the preset button classes that ship with the plugin. Badges and links are still typically composed with the utility system rather than documented as separate shipped presets. Pre-styled action buttons with semantic colors and separate size classes ## What Ships * **Colors:** `.button-primary`, `.button-secondary`, `.button-neutral`, `.button-success`, `.button-warning`, `.button-error` * **Sizes (combine with a color class):** `.button-xs`, `.button-sm`, `.button-md`, `.button-lg`, `.button-xl` Use utility classes on top when you need layout, spacing, or typography adjustments around the preset. ## Related Utilities Color utilities that pair cleanly with button presets Margin and padding helpers around calls to action # Effects Source: https://skelementorcss.com/concepts/effects Opacity and standalone outer/inset shadow presets for tone, depth, and surface hierarchy.

## Overview Effects utilities cover opacity and box shadow for tone and depth. The shipped opacity scale for muted, layered, and disabled states Outer and inset shadow utilities for elevated and recessed surfaces ## What Lives In Effects * bundled opacity utilities * shipped outer box-shadow utilities * shipped inset box-shadow utilities ## Common Use Cases * **Surface layering:** tone down panels without changing the color token * **Disabled previews:** show non-primary states in mockups * **Depth cues:** build subtle contrast between stacked blocks * **Recessed controls:** create wells, trays, and pressed input-like surfaces * **Content hierarchy:** soften secondary text or supporting panels ## Accessibility **Accessibility Note:** Ensure sufficient contrast when using opacity. Text with low opacity may not meet accessibility standards. #### Opacity Guidelines * **Text:** Avoid opacity below 75% for readable text * **Interactive elements:** Use opacity to indicate disabled states * **Overlays:** Use opacity to create depth without hiding content completely * **Focus states:** Ensure focus indicators remain visible with opacity Use the separate Filters section when you need blur, contrast, hue shifts, or color-effect utilities on media. # Filters Source: https://skelementorcss.com/concepts/filters Bundled filter utilities for blur, brightness, contrast, saturation, and color shifts.

## Overview Filters utilities adjust blur, brightness, contrast, saturation, hue, and color effects. ## Filter Guides Soften media and decorative layers with the bundled blur scale. Dim or lift imagery without replacing the source asset. Tighten or soften tonal separation with the shipped contrast helpers. Increase or reduce color intensity with the bundled saturation scale. Shift imagery into a new color family with the bundled hue helpers. Use grayscale, invert, sepia, and filter reset helpers. ## Shipped Filter Families * `filter-none` * `blur-sm`, `blur`, `blur-md`, `blur-lg`, `blur-xl` * `brightness-75`, `brightness-90`, `brightness-100`, `brightness-110`, `brightness-125` * `contrast-75`, `contrast-90`, `contrast-100`, `contrast-110`, `contrast-125` * `saturate-0`, `saturate-50`, `saturate-100`, `saturate-150`, `saturate-200` * `hue-rotate-15`, `hue-rotate-30`, `hue-rotate-60`, `hue-rotate-90`, `hue-rotate-180` * `grayscale`, `grayscale-50`, `invert`, `invert-50`, `sepia`, `sepia-50` ## Related Guides Opacity and box-shadow guidance that pairs well with filters Use outer and inset box-shadow utilities for rectangular surfaces # Fluid scaling Source: https://skelementorcss.com/concepts/fluid-scaling How the bundled fluid families scale smoothly and where fixed utilities still make more sense. ## Overview Fluid scaling means a value changes smoothly as the viewport changes instead of jumping only at a few breakpoints. In Skelementor, selected utility families use that approach so one class can stay proportional across more screen sizes. ## Why it helps * A heading can feel oversized until the next breakpoint suddenly shrinks it. * Spacing can feel cramped or too loose between thresholds. * Repeated breakpoint overrides are often needed just to keep a scale feeling balanced. ## How fluid scaling works Bundled fluid families are typically powered by `clamp(min, preferred, max)`. ```css Fluid value example lines theme={null} .hero-title { font-size: clamp(2rem, calc(1.5rem + 2vw), 4rem); } ``` ## Why some families are fluid These families benefit from fluid scaling because they control proportional measurements that usually need to breathe with the viewport: | Family | Why fluid here | Read more | | ------------------ | --------------------------------------------------------- | ---------------------------------- | | **`text-*`** | Reading scale should adapt gradually. | [Font size](/typography/font-size) | | **`m-*`** family | Outer spacing should stay proportional. | [Margin](/spacing/margin) | | **`p-*`** family | Inner spacing benefits from the same gradual rhythm. | [Padding](/spacing/padding) | | **`gap-*`** family | Space between items often needs to scale with the layout. | [Gap](/flexbox/gap) | ## Why some families stay fixed * **Colors** and **font weights** are semantic choices, not proportional measurements. * **Display**, **positioning**, and similar helpers are structural states. * **`maximum-width-*`** and border width utilities stay fixed in this bundle. * **Component presets** should stay predictable. * **`leading-*`** stays fixed so line-height remains stable with the text system. ## Related Bundled `text-*` classes with fluid `clamp()` ranges Fixed `leading-*` utilities and why they stay stable # Layout Source: https://skelementorcss.com/concepts/layout Display, overflow, object-fit, aspect-ratio, positioning, and z-index utilities.

## Overview Layout utilities control how blocks display, clip, position, layer, and frame media. Block, inline-block, flex, inline-flex, and hidden helpers Clip or scroll overflowing content with the bundled overflow helpers Static, relative, absolute, fixed, and sticky layout placement Tailwind-style object-fit utilities for images and video in fixed frames Square, video, and auto aspect utilities Layering helpers for stacked interfaces and overlays ## What Ships Here * Display: `.block`, `.inline-block`, `.flex`, `.inline-flex`, `.hidden` * Overflow: `.overflow-hidden`, `.overflow-auto`, `.overflow-visible` * Positioning: `.static`, `.relative`, `.absolute`, `.fixed`, `.sticky` * Object fit: `.object-contain`, `.object-cover`, `.object-fill`, `.object-none`, `.object-scale-down` * Aspect ratio: `.aspect-square`, `.aspect-video`, `.aspect-auto` * Z-index: `.z-0` through `.z-100` in steps of 10 ## Related Utilities Margin and padding for layout spacing Width and height utilities for layout # Breakpoints Source: https://skelementorcss.com/concepts/responsive-utilities The shipped `--on-*` suffix system for structural classes at each breakpoint.

## 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](/concepts/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. ```html theme={null}

``` ## 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` ## 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. # Sizing Source: https://skelementorcss.com/concepts/sizing Width, height, and matching min/max sizing helpers for fixed, fractional, and keyword-based layouts.

## Overview Sizing utilities cover width, height, and matching min/max constraints with the same suffix families. Container, fraction, full, auto, and screen width utilities Container, fraction, full, auto, and screen height utilities Matching width-cap utilities Matching width-floor utilities Matching height-cap utilities Matching height-floor utilities ## Core Families * Width: `width-`, `width-`, and keyword helpers like `width-full`, `width-auto`, and `width-screen` * Min width: `minimum-width-`, `minimum-width-`, and keyword floor helpers like `minimum-width-full`, `minimum-width-auto`, and `minimum-width-screen` * Max width: `maximum-width-`, `maximum-width-`, and keyword cap helpers like `maximum-width-full`, `maximum-width-auto`, and `maximum-width-screen` * Height: `height-`, `height-`, and keyword helpers like `height-full`, `height-auto`, and `height-screen` * Min height: `minimum-height-`, `minimum-height-`, and keyword floor helpers like `minimum-height-full`, `minimum-height-auto`, and `minimum-height-screen` * Max height: `maximum-height-`, `maximum-height-`, and keyword cap helpers like `maximum-height-full`, `maximum-height-auto`, and `maximum-height-screen` ## Related Utilities Display utilities for sizing Margin and padding utilities # Spacing Source: https://skelementorcss.com/concepts/spacing Margin and padding utilities built around the bundled spacing scale.

## Overview Skelementor bundles one spacing scale for margin (outside the box), padding (inside the box), and gap (between flex items). Pick the same numeric suffix across utilities to keep rhythm predictable. | Family | Value scale | | ----------- | ----------------------------------------------------------------------------------------------------- | | `margin-*` | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, `auto` | | `padding-*` | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12` | | `gap-*` | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, plus gap-only `10`, `14`, `16`, `18`, `20`, `22`, `24` | **`margin-*`:** `margin`, `margin-horizontal`, `margin-vertical`, `margin-top`, `margin-bottom`, `margin-left`, `margin-right` (for example `margin-horizontal-4`). **`padding-*`:** `padding`, `padding-horizontal`, `padding-vertical`, `padding-top`, `padding-bottom` (for example `padding-horizontal-6`). **`gap-*`:** `gap`, `gap-x`, or `gap-y` (for example `gap-4`, `gap-x-8`). Margin `auto` works on all margin families, including `margin-top-auto` and `margin-bottom-auto`. External spacing with positive, auto, and axis helpers Internal spacing with all-side and directional helpers ## Common Spacing Patterns Use the spacing families consistently in cards, forms, and sections so outer spacing, inner padding, and content rhythm all come from the same bundled scale. ## Best Practices Always use the predefined spacing scale (px, 1, 2, 3, 4, 6, 8, 12) for consistency. This ensures predictable layouts and easier maintenance. Use consistent spacing between related elements for better visual flow. Use smaller gaps within groups and larger gaps between groups. Reach for `0`, `px`, and `auto` when you need explicit control beyond the main bundled scale. ## Spacing Hierarchy 1. **Micro spacing (1-2):** Fine adjustments, icon spacing 2. **Small spacing (3-4):** Element internal spacing, form fields 3. **Medium spacing (6):** Section internal spacing, card padding 4. **Large spacing (8-12):** Section spacing, major layout divisions ## Related Utilities Flexbox and display utilities for layout Width and height utilities for spacing # Typography Source: https://skelementorcss.com/concepts/typography Responsive type scale, leading, weights, alignment, tracking, and text styling.

## Overview Typography utilities cover size, weight, leading, alignment, tracking, and text treatments in one naming system. The bundled `text-*` scale from `.text-2xs` through `.text-9xl` Nine font-weight utilities from thin through black Fixed pixel `.leading-*` utilities for readable rhythm Logical alignment helpers for LTR and RTL content Tracking helpers from tightest to ultra-wide Transform, decoration, and italic helpers Text color utilities for hierarchy, emphasis, and contrast ## What Ships * Font size: `.text-2xs` through `.text-9xl` * Font weight: `.font-thin` through `.font-black` * Leading: `.leading-tight`, `.leading-snug`, `.leading-normal`, `.leading-relaxed`, `.leading-loose` * Alignment: `.text-start`, `.text-center`, `.text-end` * Tracking: `.tracking-tightest` through `.tracking-ultra-wide` * Text styling: `.uppercase`, `.lowercase`, `.underline`, `.no-underline`, `.italic` # Variables Source: https://skelementorcss.com/concepts/variables How Elementor Variables act as shared design tokens and how they work alongside Skelementor utilities. ## Overview In Elementor, Variables are shared design values you can reuse across a site instead of repeating the same raw value everywhere. They work like design tokens for colors, typography, and sizes. ## Why variables help * They keep repeated values consistent across pages and components. * They make global updates easier when a brand value changes. * They keep custom CSS cleaner because shared values come from tokens instead of scattered literals. * They help Elementor styling decisions and Skelementor utilities stay aligned. ## In Elementor ### 1. Open the variable picker The Elementor variable icon inside a control.

The Elementor variable icon inside a control.

Click the **variable icon** in a supported control to open Elementor's variables popup window. ### 2. Use the variables popup window The Elementor variables popup window listing available variables.

This popup is the variable list Elementor shows for that field. It lets you: * search available variables * pick an existing variable for the current control * create a new variable with the `+` button * open the **Variables Manager** from the settings cog Skelementor-imported variables show up here too, so this is where the imported token set becomes usable inside the editor. ### 3. Manage variables centrally The Elementor Variables Manager panel.

The **Variables Manager** is Elementor's central panel for managing variables. Based on Elementor's current docs, this is where you can: * search variables * create new color, font, or size variables * edit existing variable values * delete variables you no longer need * save changes and update variable-driven styling across the site ## With Skelementor * **Utilities** apply layout and styling behavior. * **Variables** provide the reusable values behind those decisions. * Together, they keep classes expressive while centralizing the values that matter. Use a **variable** when the value itself should be reusable across many places. Use a **class** when you want to apply a styling pattern or behavior to an element. ## Related `var(--border-*)` and the border scale Semantic palette and utility naming # Box Shadow Source: https://skelementorcss.com/effects/box-shadow Standalone outer and inset shadow presets for elevation, recessed depth, and semantic emphasis. ## Overview Box shadow utilities give surfaces visible depth. Use outer shadows when an element should feel lifted above the canvas, and inset shadows when a surface should feel pressed inward or recessed. In the current plugin, each shadow utility is a full `box-shadow` preset. Elementor applies shadow values as one complete property payload, so shadow size classes and shadow color classes do **not** merge together. * Size classes work on their own. * Color classes work on their own. * Colored outer shadow classes use the `shadow-md` geometry. * Colored inset shadow classes use the `inset-shadow-md` geometry. | Pattern | Supported classes | What it controls | | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | | `shadow-` | `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-panel` | Standalone neutral outer shadow presets | | `shadow-` | `shadow-primary`, `shadow-secondary`, `shadow-neutral`, `shadow-success`, `shadow-warning`, `shadow-error` | Standalone colored outer shadow presets using the `shadow-md` size | | `inset-shadow-` | `inset-shadow-sm`, `inset-shadow-md`, `inset-shadow-lg`, `inset-shadow-xl` | Standalone neutral inset shadow presets | | `inset-shadow-` | `inset-shadow-primary`, `inset-shadow-secondary`, `inset-shadow-neutral`, `inset-shadow-success`, `inset-shadow-warning`, `inset-shadow-error` | Standalone colored inset shadow presets using the `inset-shadow-md` size | ## Examples ### Outer shadow sizing Use the outer shadow scale when cards, promos, drawers, or floating actions need clearer separation from the page. ```html theme={null}

Quiet utility card

Default content panel

Featured surface

``` ### Coloring outer shadows Use the colored outer presets when the shadow itself should reinforce a semantic state. These classes are complete shadow presets built on the default `shadow-md` geometry, not color-only add-ons. ```html theme={null}

``` ### Inset shadow sizing Use inset shadows when an area should feel carved into the interface, like search wells, trays, and pressed controls. ```html theme={null}

Soft inset field

Default inset well

Deep inset panel

``` ### Coloring inset shadows Inset shadow colors are useful when a recessed surface should still communicate focus, state, or meaning. These classes are complete inset presets built on the default `inset-shadow-md` geometry, not overlays on top of a neutral inset size. ```html theme={null}

Current search field

Quiet filter tray

Validation message well

``` ## Usage Notes * Use outer shadows for lifted surfaces such as cards, action clusters, banners, and overlays. * Use inset shadows for recessed controls, trays, wells, and pressed states. * Choose a single shadow preset per element. Do not stack a shadow size class with a shadow color class in the current plugin. * Treat colored shadow presets as the semantic version of `shadow-md` or `inset-shadow-md`, not as add-on color layers. * Keep colored shadows intentional. They work best on key actions, status-driven UI, and a small number of highlighted surfaces. * Pair shadows with radius and background utilities so the depth feels tied to a real surface. ## Best Practices * Prefer the smaller shadow sizes for dense content and reserve `shadow-lg`, `shadow-xl`, and `shadow-panel` for isolated emphasis. * Use semantic shadow colors to reinforce a meaning that already exists in the UI, not to decorate every surface. * Inset shadows work best when the background already suggests a contained surface such as `bg-white` or `bg-gray-light`. * Check strong shadow colors in both light and dark contexts so they still read as depth instead of glow. ## Related Utilities Pair shadow and opacity for layered states Pair shadow presets with border radius and border styles # Opacity Source: https://skelementorcss.com/effects/opacity Use the bundled opacity scale for overlays, states, and layered interfaces. ## Overview The bundle ships every 5% step from **`opacity-0`** through **`opacity-100`** for overlays, disabled states, and layered interfaces. | Class | Value | CSS | | -------------- | ----- | ---------------- | | `.opacity-0` | 0% | `opacity: 0;` | | `.opacity-5` | 5% | `opacity: 0.05;` | | `.opacity-10` | 10% | `opacity: 0.1;` | | `.opacity-15` | 15% | `opacity: 0.15;` | | `.opacity-20` | 20% | `opacity: 0.2;` | | `.opacity-25` | 25% | `opacity: 0.25;` | | `.opacity-30` | 30% | `opacity: 0.3;` | | `.opacity-35` | 35% | `opacity: 0.35;` | | `.opacity-40` | 40% | `opacity: 0.4;` | | `.opacity-45` | 45% | `opacity: 0.45;` | | `.opacity-50` | 50% | `opacity: 0.5;` | | `.opacity-55` | 55% | `opacity: 0.55;` | | `.opacity-60` | 60% | `opacity: 0.6;` | | `.opacity-65` | 65% | `opacity: 0.65;` | | `.opacity-70` | 70% | `opacity: 0.7;` | | `.opacity-75` | 75% | `opacity: 0.75;` | | `.opacity-80` | 80% | `opacity: 0.8;` | | `.opacity-85` | 85% | `opacity: 0.85;` | | `.opacity-90` | 90% | `opacity: 0.9;` | | `.opacity-95` | 95% | `opacity: 0.95;` | | `.opacity-100` | 100% | `opacity: 1;` | ## Example ## Best Practices Ensure text remains readable when opacity reduces contrast. Decorative overlays can go low; body text usually should not. `opacity-10` through `opacity-50` work well for dimming media or stacking panels. `opacity-60` through `opacity-95` can suggest disabled or loading states while keeping content visible. Too many translucent layers can make interfaces feel muddy and hard to read. Overlays usually combine opacity with `.relative`, `.absolute`, or `.fixed`. ## Related Utilities Overview of the currently shipped effects surface Color utilities that work with opacity # Blur Source: https://skelementorcss.com/filters/blur Use the bundled blur utilities to soften media and supporting layers. ## Overview Blur utilities are now bundled and mapped through the current framework source. They are most useful for decorative media, background plates, and softened support layers. | Class | Filter (CSS) | Usage | | -------------- | --------------------- | -------------------------------------- | | `.filter-none` | `filter: none;` | Reset inherited blur or other filters | | `.blur-sm` | `filter: blur(4px);` | Light softening | | `.blur` | `filter: blur(8px);` | Default decorative blur | | `.blur-md` | `filter: blur(12px);` | Medium background plates | | `.blur-lg` | `filter: blur(16px);` | Strong blur for depth | | `.blur-xl` | `filter: blur(24px);` | Heavy blur for hero or frosted effects | ## Example ### Markup ```html theme={null} Softened background media

``` ## Best Practices * Use blur on decorative media, not on body text. * Start with `blur-sm` or `blur` before moving into the heavier levels. * Pair blur with opacity and overlays for more controlled hero treatments. * Use `filter-none` to intentionally reset inherited filter chains. ## Related Utilities Pair blur with brightness adjustments on media Add or remove intensity after softening imagery # Brightness Source: https://skelementorcss.com/filters/brightness Use the bundled brightness utilities to dim or lift media without replacing the source asset. ## Overview Brightness utilities are bundled and work well for hero media, image overlays, and quick tonal corrections when the source asset should stay unchanged. | Class | Filter (CSS) | Usage | | ----------------- | --------------------------- | ------------------------------------------- | | `.brightness-75` | `filter: brightness(0.75);` | Noticeably dimmed media | | `.brightness-90` | `filter: brightness(0.9);` | Slight dim for backgrounds behind text | | `.brightness-100` | `filter: brightness(1);` | Neutral / no change (matches preview scale) | | `.brightness-110` | `filter: brightness(1.1);` | Light lift | | `.brightness-125` | `filter: brightness(1.25);` | Stronger lift; use sparingly | ## Example ### Markup ```html theme={null}

``` ## Best Practices * Reduce brightness for background media behind text. * Increase brightness sparingly to avoid washed-out visuals. * Pair brightness with contrast carefully so images stay readable. * Prefer opacity alone when you only need a simple dimming effect. ## Related Utilities Tune contrast alongside brightness Adjust color intensity after brightness changes # Color Effects Source: https://skelementorcss.com/filters/color-effects Use bundled grayscale, invert, sepia, and filter reset utilities for quick tonal treatments. ## Overview Color effect utilities apply grayscale, invert, or sepia through the `filter` property, plus **`filter-none`** to reset inherited filters. They are ideal for inactive states, editorial tone, and quick dramatic treatments. | Class | Filter (CSS) | Usage | | --------------- | ------------------------- | -------------------------------------- | | `.filter-none` | `filter: none;` | Clear inherited filters on the element | | `.grayscale` | `filter: grayscale(1);` | Full grayscale | | `.grayscale-50` | `filter: grayscale(0.5);` | Partial desaturation | | `.invert` | `filter: invert(1);` | Full color inversion | | `.invert-50` | `filter: invert(0.5);` | Partial inversion | | `.sepia` | `filter: sepia(1);` | Full sepia tone | | `.sepia-50` | `filter: sepia(0.5);` | Light sepia warmth | ## Example ### Markup ```html theme={null} Toned media

``` ## Best Practices * Use `filter-none` to reset a filter chain when a nested asset should stay untouched. * Use grayscale helpers for muted previews or inactive image states. * Use invert helpers cautiously on artwork and icons so contrast remains readable. * Use sepia on editorial or archival treatments where warmth is intentional. ## Related Utilities Reintroduce or reduce intensity around grayscale and sepia treatments Shift color families instead of flattening them # Contrast Source: https://skelementorcss.com/filters/contrast Use the bundled contrast utilities to tighten or soften tonal separation in imagery. ## Overview Contrast utilities are bundled and work best on images, badges, and visual surfaces that need sharper or softer tonal separation. | Class | Filter (CSS) | Usage | | --------------- | ------------------------- | ------------------------------------------- | | `.contrast-75` | `filter: contrast(0.75);` | Softer separation | | `.contrast-90` | `filter: contrast(0.9);` | Slightly muted contrast | | `.contrast-100` | `filter: contrast(1);` | Neutral / no change (matches preview scale) | | `.contrast-110` | `filter: contrast(1.1);` | Slightly punchier imagery | | `.contrast-125` | `filter: contrast(1.25);` | Stronger tonal separation | ## Example ### Markup ```html theme={null}

``` ## Best Practices * Use small contrast adjustments first before reaching for stronger values. * Test both light and dark contexts because contrast changes feel different in each. * Avoid over-processing UI imagery that already has strong tonal separation. * Combine with brightness intentionally when refining hero or card media. ## Related Utilities Balance contrast with brightness changes Change color families after tonal corrections # Hue Rotate Source: https://skelementorcss.com/filters/hue-rotate Use the bundled hue rotation utilities to shift imagery into a new color family. ## Overview Hue rotation utilities shift the hue of imagery by a fixed angle. They are useful for subtle brand tinting, stylized states, or creative treatments when the source asset should stay in place. | Class | Filter (CSS) | Usage | | ----------------- | ----------------------------- | -------------------------------------- | | `.hue-rotate-15` | `filter: hue-rotate(15deg);` | Gentle drift | | `.hue-rotate-30` | `filter: hue-rotate(30deg);` | Moderate shift | | `.hue-rotate-60` | `filter: hue-rotate(60deg);` | Strong color family change | | `.hue-rotate-90` | `filter: hue-rotate(90deg);` | Quarter-turn hue | | `.hue-rotate-180` | `filter: hue-rotate(180deg);` | Complementary / dramatic stylized look | ## Example ### Markup ```html theme={null}

``` ## Best Practices * Use the small rotation helpers first when you only need a gentle color drift. * Reserve `hue-rotate-180` for stylized states or dramatic transformations. * Stack hue rotation with saturation or contrast carefully so the image still feels intentional. ## Related Utilities Adjust color intensity before or after rotating hue Tighten tonal separation alongside the hue shift # Saturate Source: https://skelementorcss.com/filters/saturate Use the bundled saturation utilities to reduce or amplify color intensity. ## Overview Saturation utilities are bundled so you can mute or intensify color in imagery without swapping assets. They pair cleanly with contrast, brightness, and other filter helpers. | Class | Filter (CSS) | Usage | | --------------- | ------------------------ | ----------------------------------------------- | | `.saturate-0` | `filter: saturate(0);` | Fully desaturated (grayscale intensity channel) | | `.saturate-50` | `filter: saturate(0.5);` | Half saturation | | `.saturate-100` | `filter: saturate(1);` | Neutral / no change (matches preview scale) | | `.saturate-150` | `filter: saturate(1.5);` | Boosted color | | `.saturate-200` | `filter: saturate(2);` | Strong saturation; use sparingly | ## Example ### Markup ```html theme={null} More saturated media

``` ## Best Practices * Use `saturate-0` or `saturate-50` for muted backgrounds and editorial treatments. * Use `saturate-150` or `saturate-200` sparingly on accent imagery. * Pair saturation with contrast or brightness when the image needs both tonal and color adjustments. ## Related Utilities Balance intensity with overall lightness Shift the hue family after adjusting saturation # Align Content Source: https://skelementorcss.com/flexbox/align-content Use the shipped `content-*` utilities to distribute wrapped flex lines on the cross axis. ## Overview Align content utilities control how wrapped flex lines are distributed along the cross axis. They only take effect when the container has multiple lines, so always pair them with `.flex-wrap`. | Class | CSS | | ------------------ | ------------------------------- | | `.content-start` | `align-content: flex-start;` | | `.content-center` | `align-content: center;` | | `.content-end` | `align-content: flex-end;` | | `.content-between` | `align-content: space-between;` | | `.content-around` | `align-content: space-around;` | | `.content-evenly` | `align-content: space-evenly;` | Responsive `content-*--on-*` variants are also shipped. `align-content` only becomes visible when the container has multiple flex lines, so pair it with `.flex-wrap`. ## Start `.content-start` packs all wrapped lines toward the top of the container. ```html theme={null}

``` ## Center `.content-center` groups all wrapped lines in the vertical center of the container. ```html theme={null}

``` ## End `.content-end` packs all wrapped lines toward the bottom of the container. ```html theme={null}

``` ## Between `.content-between` places the first row at the top and the last row at the bottom, with equal space between the rest. ```html theme={null}

``` ## Around `.content-around` distributes equal space around each row of items. ```html theme={null}

``` ## Evenly `.content-evenly` distributes perfectly equal space between all rows and the container edges. ```html theme={null}

``` ## Related Utilities Enable multiple rows before aligning them Control item alignment inside each row # Align Items Source: https://skelementorcss.com/flexbox/align-items Use the shipped `items-*` utilities to align every flex child along the cross axis. ## Overview Align items utilities control where every child sits along the cross axis of the flex container. Use them to vertically align items in a row or horizontally align items in a column. | Class | CSS | | ---------------- | -------------------------- | | `.items-start` | `align-items: flex-start;` | | `.items-center` | `align-items: center;` | | `.items-end` | `align-items: flex-end;` | | `.items-stretch` | `align-items: stretch;` | Responsive `items-*--on-*` variants are also shipped. ## Start `.items-start` aligns all children to the start of the cross axis. Items with different heights will share a common top edge. ```html theme={null}

Short

Taller card

Short

``` ## Center `.items-center` vertically centers all children within the container. This is the most common alignment for headers, navigation bars, and balanced rows. ```html theme={null}

Short

Taller card

Short

``` ## End `.items-end` aligns all children to the end of the cross axis. Items share a common bottom edge. ```html theme={null}

Short

Taller card

Short

``` ## Stretch `.items-stretch` makes every child fill the full cross-axis height of the container. This is the default flex behavior and is useful when cards or columns should match heights. ```html theme={null}

``` ## Best Practices * Use `items-center` for balanced rails, headers, and button rows. * Use `items-stretch` when every child should fill the shared cross-axis height. * Reach for `self-*` only when one child needs to break away from the group rule. ## Related Utilities Override one item without changing the whole row Pair cross-axis and main-axis alignment together # Align Self Source: https://skelementorcss.com/flexbox/align-self Use the shipped `self-*` utilities to override alignment for one flex item. ## Overview Align self utilities let you override the container's `items-*` rule for a single child. Use them when one item needs a different vertical position than the rest of the row. | Class | CSS | | -------------- | ------------------------- | | `.self-start` | `align-self: flex-start;` | | `.self-center` | `align-self: center;` | | `.self-end` | `align-self: flex-end;` | Responsive `self-*--on-*` variants are also shipped. ## Self Start `.self-start` pulls one item to the top of the cross axis while the rest of the row stays stretched or follows the container rule. ```html theme={null}

``` ## Self Center `.self-center` vertically centers one item within the row while siblings follow the container alignment. ```html theme={null}

``` ## Self End `.self-end` pushes one item to the bottom of the cross axis. This is useful for anchoring a specific element to the baseline of the container. ```html theme={null}

``` ## Best Practices * Keep `self-*` for targeted exceptions instead of setting the whole line differently. * Use it on one item that needs a different visual anchor within the row. * Keep the base container rule predictable with `items-*`, then layer `self-*` only where needed. ## Related Utilities Set the shared cross-axis rule for the container Reorder items when alignment alone is not enough # Flex Direction Source: https://skelementorcss.com/flexbox/direction Control flex direction with row, column, and reverse direction utilities. ## Overview Direction utilities control the main axis of a flex container. Add `.flex` first, then apply one of the direction helpers to the same parent. | Class | CSS | | ------------------- | --------------------------------- | | `.flex-row` | `flex-direction: row;` | | `.flex-col` | `flex-direction: column;` | | `.flex-row-reverse` | `flex-direction: row-reverse;` | | `.flex-col-reverse` | `flex-direction: column-reverse;` | ## Row `.flex-row` lays items out horizontally from left to right. This is the default direction for flex containers and is useful for navigation bars, button groups, and inline card rows. ```html theme={null}

``` ## Row Reverse `.flex-row-reverse` reverses the horizontal direction so items flow from right to left. The DOM order stays the same but visual order flips. Use this when you need mirrored layouts without changing markup. ```html theme={null}

``` ## Column `.flex-col` stacks items vertically from top to bottom. This is the go-to direction for form fields, stacked card bodies, and sidebar navigation. ```html theme={null}

``` ## Column Reverse `.flex-col-reverse` stacks items from bottom to top. This is helpful for chat-style UIs or timeline patterns where the newest item should appear at the bottom of the markup but visually sit at the top. ```html theme={null}

``` ## Responsive Structure Use the responsive suffix system for structural shifts at specific breakpoints: ## Best Practices * Add `.flex` first, then apply direction helpers to the same parent. * Use `.flex-col` for stacked groups such as forms, settings panels, and button clusters. * Use reverse helpers sparingly when visual order must change but markup stays fixed. ## Related Utilities Start with the base flex container utility Let directional rows wrap naturally when needed # Flex Source: https://skelementorcss.com/flexbox/flex Start flex layouts with `.flex` and `.inline-flex` container utilities and their responsive variants. ## Overview **`.flex`** and **`.inline-flex`** start a flex formatting context. Use **`.flex`** for full-width toolbars, sections, and grids; use **`.inline-flex`** when the container should sit **in inline flow** (chips, badges in copy, compact controls next to text). Add one of these on the parent before direction, wrap, gap, justify, or alignment helpers. | Class | CSS | Use | | -------------- | ----------------------- | ----------------------------------------------------------- | | `.flex` | `display: flex;` | Block-level flex container (default choice for layouts) | | `.inline-flex` | `display: inline-flex;` | Inline flex container (flows with text and sibling inlines) | ## Horizontal Layout Adding `.flex` to a container lays its children out in a horizontal row by default. ```html theme={null}

Logo

Docs

Download

``` ## Vertical Layout Pair `.flex` with `.flex-col` to stack children vertically. This is useful for form groups, card bodies, and sidebar navigation. ```html theme={null}

Heading

Body

Button

``` ## Inline flex **`.inline-flex`** behaves like **`.flex`** for children (row by default, works with **`flex-col`**, **`gap-*`**, alignment utilities) but the **box** itself is **inline**, so it can sit beside text or other inline content without forcing a new block row. ```html theme={null}

Status: Live on all environments.

``` ## Responsive Variants The framework ships structural breakpoint variants for both display modes: **`.flex--on-*`** * `.flex--on-xs` * `.flex--on-s` * `.flex--on-m` * `.flex--on-l` * `.flex--on-xl` * `.flex--on-xxl` **`.inline-flex--on-*`** * `.inline-flex--on-xs` * `.inline-flex--on-s` * `.inline-flex--on-m` * `.inline-flex--on-l` * `.inline-flex--on-xl` * `.inline-flex--on-xxl` ## Best Practices * Add **`.flex`** or **`.inline-flex`** at the **container** level, not on the children. * Keep spacing with **`gap-*`** on the parent instead of margins on each child. * Switch to responsive **`--on-*`** helpers when the layout should only become flex (or inline-flex) at certain breakpoints. * Prefer **`.inline-flex`** over **`.flex`** when the flex container must share a line with text or stay as wide as its content in inline layout. ## Related Utilities Block, inline-block, hidden, and other display modes Initial main-axis size for flex items # Flex Basis Source: https://skelementorcss.com/flexbox/flex-basis Set the initial main-axis size of flex items with bundled `basis-*` utilities before grow and shrink run. ## Overview `flex-basis` is the size a flex item **starts from** on the main axis before **`flex-grow`** and **`flex-shrink`** adjust it. Use **`basis-*`** classes on **children** inside a **`.flex`** or **`.inline-flex`** parent when you want explicit starting widths (or heights in a column) instead of relying only on content or width utilities. ### Keywords and reset | Class | CSS | Usage | | ------------- | ------------------- | ----------------------------------------------------------------------- | | `.basis-auto` | `flex-basis: auto;` | Use the item’s width/height (or content) as the starting size | | `.basis-full` | `flex-basis: 100%;` | Start from the full main-axis size of the container | | `.basis-0` | `flex-basis: 0px;` | Start from zero so **`flex-grow`** distributes space from a clean split | | `.basis-px` | `flex-basis: 1px;` | Hairline flex lanes, dividers, or fixed slivers | ### Fractional basis These mirror the fractional **width** scale ([Width](/sizing/width)) but apply as **`flex-basis`** on flex items. | Class | Value | CSS | Usage | | ------------ | ------- | ---------------------- | -------------------- | | `.basis-1-2` | 50% | `flex-basis: 50%;` | Two-column splits | | `.basis-1-3` | 33.333% | `flex-basis: 33.333%;` | Three-up layouts | | `.basis-2-3` | 66.666% | `flex-basis: 66.666%;` | Wide primary column | | `.basis-1-4` | 25% | `flex-basis: 25%;` | Narrow rails | | `.basis-3-4` | 75% | `flex-basis: 75%;` | Content-heavy panels | ### Fractional basis preview ```html theme={null}

50%

One third

Two thirds

Quarter

Three quarters

``` ## Example ```html theme={null}

Main

``` ```html theme={null}

Grows from zero

Sizes to content

``` ## Responsive variants Each **`basis-*`** utility ships with structural breakpoint suffixes: * `.basis-auto--on-xs` … `.basis-full--on-xxl` * `.basis-0--on-*`, `.basis-px--on-*` * `.basis-1-2--on-*` through `.basis-3-4--on-*` See [Breakpoints](/concepts/responsive-utilities) for the **`--on-*`** map. ## Best Practices * Add **`.flex`** (or **`.inline-flex`**) on the **parent** first; **`basis-*`** applies to **items**, not the container. * Pair **`.basis-0`** with **`.flex-grow`** when you want equal columns that ignore intrinsic content width. * Prefer **`basis-*`** when the value should participate in the **flex** algorithm; use **`width-*`** when you need **width** regardless of flex context. * Combine **`basis-*`** with **`flex-shrink`** when some lanes should collapse before others in tight viewports. ## Related Utilities Block and inline flex containers Absorb leftover space along the main axis # Flex Grow Source: https://skelementorcss.com/flexbox/flex-grow Use the bundled `.flex-grow` utility to let selected items absorb remaining space. ## Overview `.flex-grow` lets an item absorb leftover space in the flex container. Apply it to the item that should expand while its siblings stay at their natural or fixed widths. | Class | CSS | | ------------ | --------------- | | `.flex-grow` | `flex-grow: 1;` | ## Single Grow Item When only one item has `.flex-grow`, it absorbs all remaining space. This pattern works well for sidebar-plus-content layouts. ```html theme={null}

Content grows to fill the row.

``` ## Multiple Grow Items When two or more items share `.flex-grow`, they split the leftover space equally. This creates even-width columns without explicit width classes. ```html theme={null}

Main

Aside

``` ## Best Practices * Add `.flex-grow` only to the item that should absorb the leftover space. * Pair it with fixed-width siblings when you want a stable rail + fluid content pattern. * Combine with `.flex-shrink` decisions when dense layouts need controlled compression. ## Related Utilities Set starting main-axis size before grow runs Control how items contract in tight spaces # Flex Shrink Source: https://skelementorcss.com/flexbox/flex-shrink Use the bundled `.flex-shrink` utility when selected items should contract in limited space. ## Overview `.flex-shrink` controls whether an item compresses when there isn't enough space in the container. Use it to designate which items should give up width first. | Class | CSS | | -------------- | ----------------- | | `.flex-shrink` | `flex-shrink: 1;` | ## Selective Shrink Apply `.flex-shrink` to the item that should compress first while its siblings stay at their intended widths. Items without `flex-shrink` will resist compression. ```html theme={null}

Primary card

Pinned card

``` ## Rail with Shared Shrink When all items in a rail share `.flex-shrink`, they compress equally. This keeps the layout balanced when the container is narrow. ```html theme={null}

Card A

Card B

Card C

``` ## Best Practices * Use `.flex-shrink` when an item may safely compress before the container overflows. * Keep critical controls or labels on non-shrinking siblings when width must stay stable. * Combine with `.overflow-auto` on rails when compression alone is not enough. ## Related Utilities Initial size before shrink factors apply Let items expand when extra space exists # Gap Source: https://skelementorcss.com/flexbox/gap Control flex spacing with the bundled `gap-*`, `gap-x-*`, and `gap-y-*` utilities. ## Overview Gap adds space between flex items in the same container, so you do not need margins on every child to separate a row or wrapped grid. It only applies when the parent is a flex container (`display: flex`). Use `gap-*` when row and column spacing match, and `gap-x-*` / `gap-y-*` when they should differ; the table maps each suffix to rem/px. For fluid `clamp()` and breakpoints, see [Fluid scaling](/concepts/fluid-scaling). | Pattern | Value | | ---------- | ---------------- | | `gap-*-0` | `0` / `0px` | | `gap-*-px` | `1px` | | `gap-*-1` | `0.25rem / 4px` | | `gap-*-2` | `0.5rem / 8px` | | `gap-*-3` | `0.75rem / 12px` | | `gap-*-4` | `1rem / 16px` | | `gap-*-6` | `1.5rem / 24px` | | `gap-*-8` | `2rem / 32px` | | `gap-*-12` | `3rem / 48px` | | `gap-*-14` | `3.5rem / 56px` | In real classes, `*` is empty for both axes (`gap-4`), `x` for column gap only (`gap-x-8`), or `y` for row gap only (`gap-y-3`). ## Uniform Gap `gap-*` applies the same spacing on both axes. This is the most common pattern for button groups, navigation rows, and simple card layouts. ```html theme={null}

Item 1

Item 2

Item 3

``` ## Axis-Specific Gap Use `gap-x-*` and `gap-y-*` when horizontal and vertical spacing need different values. This is useful for wrapped tag lists or grid-like card layouts where row spacing should be tighter than column spacing. ```html theme={null}

Design Systems Layout Docs

``` ## Large Gap Larger gap values like `gap-14` create generous breathing room between items. Use these for feature grids and hero sections where visual separation matters. ```html theme={null}

Feature 1

Feature 2

Feature 3

``` ## Gap vs Margin ### When to Use Gap * Spacing between flex items * Tag lists and button groups * Card rows and wrapped content * Navigation items ### When to Use Margin * Space outside an element * Section separation * Alignment helpers like `margin-horizontal-auto` * Negative spacing techniques ## Best Practices * Use `gap-*` instead of margin for spacing between flex children. * Use the same gap value across related components to keep rhythm consistent. * Use `gap-x-*` and `gap-y-*` when wrapped rows need different horizontal and vertical spacing. * Keep gap decisions in the container so child components stay reusable. * Pair gap with `.flex-wrap` when rows may need to break naturally. ## Related Utilities Control external spacing with margin utilities Control internal spacing with padding utilities # Justify Content Source: https://skelementorcss.com/flexbox/justify-content Use the shipped `justify-*` utilities to control main-axis distribution in flex layouts. ## Overview Justify utilities control how flex items are distributed along the main axis. Use them to push items to the start, center, end, or spread them across the available space. | Class | CSS | | ------------------ | --------------------------------- | | `.justify-start` | `justify-content: flex-start;` | | `.justify-center` | `justify-content: center;` | | `.justify-end` | `justify-content: flex-end;` | | `.justify-between` | `justify-content: space-between;` | | `.justify-around` | `justify-content: space-around;` | | `.justify-evenly` | `justify-content: space-evenly;` | Responsive `justify-*--on-*` variants are also bundled. ## Start `.justify-start` packs items toward the start of the main axis. This is the default behavior for flex containers. ```html theme={null}

``` ## Center `.justify-center` groups items in the center of the container. This is commonly used for centered hero content, modal actions, and single-row centered navigation. ```html theme={null}

``` ## End `.justify-end` packs items toward the end of the main axis. Use this for right-aligned button groups and trailing actions. ```html theme={null}

``` ## Between `.justify-between` places the first item at the start and the last item at the end, with equal space between the rest. This is the go-to for header layouts with a logo on one side and navigation on the other. The live demo above shows that pattern; the snippet below uses three blocks so it matches the minimal style used in the other sections. ```html theme={null}

``` ## Around `.justify-around` distributes equal space around each item. The outer edges get half the space of the gaps between items. ```html theme={null}

``` ## Evenly `.justify-evenly` distributes perfectly equal space between all items and the container edges. Every gap is the same size. ```html theme={null}

``` ## Best Practices * Use justify helpers when the space should be distributed across the main axis. * Pair with `items-*` when both axes need deliberate control. * Keep `.gap-*` in the container when you still want fixed spacing between siblings. ## Related Utilities Control the cross-axis for the full line Keep consistent spacing while changing distribution # Order Source: https://skelementorcss.com/flexbox/order Use the shipped order helpers to move selected flex items to the start or end of the line. ## Overview Order utilities let you move individual flex items to the start or end of the visual line without changing DOM order. This is useful for responsive layouts where key content needs to appear first on smaller screens. | Class | CSS | | -------------- | ---------------- | | `.order-first` | `order: -99999;` | | `.order-last` | `order: 99999;` | Responsive variants are also shipped as `order-first--on-*` and `order-last--on-*`. ## Order First `.order-first` pulls an item to the very beginning of the flex line, regardless of its position in the HTML source. ```html theme={null}

``` ## Order Last `.order-last` pushes an item to the very end of the flex line. Combine with responsive variants to move items only at specific breakpoints. ```html theme={null}

``` ## Best Practices * Prefer semantic markup order first, then use order helpers for targeted visual adjustments. * Use responsive order variants when the change only matters at one breakpoint. * Keep reordered items obvious in complex layouts so they are still easy to reason about. ## Related Utilities Reordering often pairs with wrapped layouts Control distribution after the order changes # Flex Wrap Source: https://skelementorcss.com/flexbox/wrap Control whether flex items stay on one line or wrap onto new rows. ## Overview Wrap utilities decide whether flex items stay in a single row or flow onto additional lines. They are especially useful for card collections, tag lists, and horizontally scrollable rails. | Class | CSS | Behavior | | -------------------- | -------------------------- | -------------------------- | | `.flex-nowrap` | `flex-wrap: nowrap;` | Keep items on one line | | `.flex-wrap` | `flex-wrap: wrap;` | Let items move to new rows | | `.flex-wrap-reverse` | `flex-wrap: wrap-reverse;` | Reverse row stacking | ## No Wrap `.flex-nowrap` keeps all items on a single line. Items that overflow the container will scroll horizontally. This is ideal for carousels, horizontal rails, and compact navigation. ```html theme={null}

``` ## Wrap `.flex-wrap` lets items flow onto new rows when they run out of horizontal space. This is the most common wrap behavior for card grids, tag lists, and any dense row that should gracefully break. ```html theme={null}

``` ## Wrap Reverse `.flex-wrap-reverse` wraps items but reverses the stacking order of rows. New rows appear above instead of below. This is helpful when you want bottom-anchored content to push upward. ```html theme={null}

``` ## Best Practices * Use `.flex-wrap` for dense UI rows that should gracefully move onto another line. * Use `.flex-nowrap` for carousels, rails, and compact navigation. * Pair wrap behavior with `gap-*` so spacing stays consistent across rows. * Use the responsive suffix system when wrapping should only change at specific breakpoints, such as `flex-wrap--on-m`. ## Related Utilities Start with the base flex container utility Control row and column flow # FAQ Source: https://skelementorcss.com/getting-started/faq Frequently asked questions about Skelementor ## General Questions **No.** Re-importing the same classes will cause errors. Each class can only be imported **once**. If you need to update a class: 1. Delete it from Elementor's Global Classes panel 2. Re-import the updated CSS Skelementor does **not** patch Elementor core files. Deactivating the plugin does not remove imported Elementor classes or variables automatically; those remain in Elementor until you delete them. **Works with both** Elementor Free and Pro, as long as you have v4+ with the Atomic Editor enabled (on by default for new Elementor installs). ## Import Questions Elementor supports up to **1000 global classes** natively. The built-in **Skelementor Preset** imports **976** classes for Elementor’s default desktop, tablet, and mobile breakpoints, so it stays inside that limit. The shipped plugin workflow starts with the built-in preset. If you are debugging a reduced custom sample, smaller batches can still help isolate failures faster. **Try these solutions:** * Import in smaller batches * Check for CSS syntax errors (missing units, semicolons) * Ensure you're not re-importing existing classes * See our [troubleshooting guide](/getting-started/common-errors) ## Performance Questions **No.** Global classes are native Elementor features. Skelementor only helps import them, and it doesn't add frontend overhead. **No.** Skelementor uses Elementor's built-in Global Classes system, so there's no performance impact. ## Compatibility Questions **Elementor v4.** The **Atomic Editor** (Atomic Elements, Classes, Variables) is stable in 4.x and ships with the normal Elementor plugin. New Elementor installations enable Atomic features by default. If you upgraded from an older setup or turned Atomic off, enable **Atomic Editor** under **Elementor → Editor → Settings** in WordPress admin. **WordPress 6.9 or higher** is required. 6.9+ **PHP 7.4 or higher** is required. PHP 8.0+ is recommended for better performance. 7.4+ ## Usage Questions **Yes, on atomic elements.** You can use utility classes on: * Headings (h1-h6) * Paragraphs * Div Blocks * Buttons * Links * Images * Containers Select an atomic element in the Elementor editor. Go to the **Advanced** tab in the element settings. Add classes to the **CSS Classes** field. See instant results in the editor preview. **Yes!** You can combine multiple classes for complex designs, such as pairing flex layout, spacing, borders, and button presets on the same Elementor block. ## Customization Questions **Yes.** To modify an existing class: 1. Delete it from Elementor's Global Classes panel 2. Create your modified version 3. Re-import through Skelementor Use the bundled `skelementor-utilities.css` file as the reference artifact for the shipped framework. The stable built-in import path in the plugin is the **Skelementor Preset**. **Most common CSS properties** are supported including: * Typography (font-size, font-weight, etc.) * Spacing (margin, padding, gap) * Layout (display, flexbox, positioning) * Colors (color, background-color, border-color) * Borders (width, style, radius) * Sizing (width, height, max-width) ## Troubleshooting Questions **Check these:** * Ensure Elementor **v4** with Atomic Editor enabled * Verify classes were imported successfully * Clear Elementor cache: **Elementor → Tools → Regenerate CSS** * Check that you're using atomic elements **Try these solutions:** * Import in smaller batches (20-30 classes) * Check CSS syntax for errors * Ensure you're not re-importing existing classes * Use the nuclear reset method (delete all classes, re-import) That can be **completely normal**. On Elementor **4.1**, global classes are stored as `e_global_class` posts, while the kit tracks labels, order, and class-to-post mappings in: * `_elementor_global_classes_labels` * `_elementor_global_classes_labels_preview` * `_elementor_global_classes_order` * `_elementor_global_classes_order_preview` * `_elementor_global_classes_post_ids` Skelementor uses internal IDs with the `sk-class-*` prefix, while the visible label in Elementor stays clean, such as `text-2xs`. ## Related Guides Troubleshooting specific errors Get help from the Skelementor support team # Installation Source: https://skelementorcss.com/getting-started/installation Installation and environment checklist for the Skelementor plugin.

Skelementor Installation - Complete installation guide

## System Requirements ### Minimum Requirements | Requirement | Minimum | Notes | | ------------- | -------------------- | ---------------------------------------------- | | **WordPress** | 6.9+ | Multisite supported | | **PHP** | 7.4+ | 128MB memory recommended | | **Elementor** | 4.0+ (Atomic Editor) | Atomic features on by default for new installs | | **MySQL** | 5.6+ | MariaDB 10.1+ also supported | ### Recommended Requirements * **WordPress:** **6.9+** (latest **6.9.x** recommended) * **PHP:** 8.0 or higher * **Memory:** 256MB or higher * **Elementor:** Current **4.x** with Atomic Editor enabled (default for new Elementor installations) * **Variables:** Enabled if you plan to import design tokens ## Installation Methods Choose the option that fits your deployment workflow. ### Method 1: WordPress Admin Upload Download the [Skelementor plugin package](https://d3o9gc3hm4a6ya.cloudfront.net/css-utility-importer.zip) (.zip). In WordPress admin, go to **Plugins -> Add New** and click **Upload Plugin**. Select the ZIP file and click **Install Now**. Activate the plugin after WordPress finishes installing it. ### Method 2: FTP Upload Extract the plugin archive on your local machine. Use your preferred FTP or SFTP client to connect to the WordPress host. Upload the extracted `skelementor-v4` directory to `/wp-content/plugins/`. Open **Plugins** in WordPress admin and activate Skelementor. ### Method 3: WP-CLI If you manage the site with WP-CLI, install from the hosted ZIP or a local copy: ```bash theme={null} wp plugin install https://d3o9gc3hm4a6ya.cloudfront.net/css-utility-importer.zip --activate wp plugin install /path/to/css-utility-importer.zip --activate ``` ## Pre-Installation Checklist Before installing Skelementor, verify these points: Confirm the site is on **WordPress 6.9+** (latest **6.9.x** recommended) via **Dashboard → Updates** or **Tools → Site Health**. Use **Elementor v4** from the standard plugin release. The **Atomic Editor** is stable; new Elementor installs enable Atomic features by default. Upgraded or legacy sites may need **Atomic Editor** enabled under **Elementor → Editor → Settings**. Confirm **Elementor v4** is active in **Elementor → System Info**. In **Elementor → Editor → Settings**, ensure **Atomic Editor** is on (or use Elementor’s prompt in the editor). Turn on Variables if your import workflow includes reusable design tokens. Confirm PHP version, available memory, and file permissions are sufficient for plugin installation and larger imports. ## Post-Installation Setup ### 1. Verify Installation Check **Plugins** in WordPress admin and make sure Skelementor is active. Find the Skelementor admin screen and confirm the CSS import interface loads. Verify Elementor still loads normally and the Atomic Editor is available. ### 2. Import the Starter Framework Open the Skelementor admin screen after activation. Click **Import Skelementor Preset** to load the built-in default-breakpoints package. Confirm the imported classes appear in Elementor's class management UI. The Skelementor Preset imports **976 classes** for Elementor’s default desktop, tablet, and mobile breakpoints. It stays within Elementor’s native **1000 global class** limit, so no core-file patching is required. ### 3. Test in Elementor Edit a page or post with Elementor. Add a Heading, Text, or Div Block to the canvas. Assign a simple class like `text-2xl` or `flex` to verify the import worked. Make sure the styling appears correctly in the editor preview. ## Troubleshooting Installation Common causes include low PHP memory, permission issues, or a damaged upload package. Re-upload the ZIP and review server logs if activation fails again. If Skelementor warns about Elementor, update to **Elementor v4** and confirm **Atomic Editor** is enabled before retrying. Review PHP memory limits, filesystem permissions, and any web server error logs if imports or activation trigger 500 errors. ### Getting Help Troubleshoot import failures and class conflicts. See what information to gather before contacting Skelementor support. Review the most common setup and usage questions. Report bugs or request features on GitHub. ## Next Steps **Installation complete:** Continue with the [quickstart guide](/quickstart) to run your first import. Import your first utility classes. Review the utility surface area before importing larger class sets. # Importing Classes & Variables Source: https://skelementorcss.com/getting-started/quickstart Detailed import guide for bringing the Skelementor Preset into Elementor v4.

Skelementor Quickstart - Get up and running in 3 simple steps

## Import In 3 Steps This is the longer import workflow for teams that want more setup detail before bringing classes and variables into Elementor. ### Step 1: Install the Plugin Download the [Skelementor plugin package](https://d3o9gc3hm4a6ya.cloudfront.net/css-utility-importer.zip) (.zip). In WordPress admin, go to **Plugins -> Add New -> Upload Plugin** and select the ZIP file. Activate the plugin after installation completes. Make sure your environment has WordPress **6.9+**, PHP 7.4+, and Elementor **v4** with the Atomic Editor enabled.

If you plan to import design tokens, enable Elementor Variables too.

### Step 2: Import Your First CSS Start with the built-in **Skelementor Preset** so you can verify the shipped workflow first. Open the Skelementor import screen from the WordPress dashboard. Click **Import Skelementor Preset**. Wait for the confirmation state, then check the imported classes inside Elementor. The Skelementor Preset imports **976 classes** for Elementor’s default desktop, tablet, and mobile breakpoints, and stays within Elementor’s native **1000-class** limit. The bundled `skelementor-utilities.css` file remains useful as a reference artifact when you want to inspect the shipped class definitions or understand how the framework is generated. ### Step 3: Use Classes in Elementor After import, utility classes are ready to use on Elementor v4 atomic elements. Edit any page or post with Elementor. Add a Heading, Text, Div Block, Button, or another supported v4 element. Add utility classes in Elementor's class field for that element. Confirm the imported styles render as expected in the editor preview. ## What Happens Next? Browse the complete framework and decide what to keep or customize. Learn which bundled families scale smoothly without extra breakpoint layers. Use `--on-*` suffixes when the change is structural instead of proportional. ## Common Issues **Important:** Avoid importing the same classes repeatedly without cleaning up or replacing the earlier set. ### Classes Not Working? * Check that Elementor **v4** and the Atomic Editor are enabled. * Verify the import completed successfully in the Skelementor admin screen. * Clear Elementor cache through **Elementor -> Tools -> Regenerate CSS**. ### Import Errors? * Reduce batch size to isolate the failing classes. * Check for missing semicolons, unsupported values, or reserved class names. * Confirm you are not importing duplicates that already exist. ### Need Help? * Start with the [troubleshooting guide](/getting-started/common-errors) * Browse the [FAQ](/getting-started/faq) * Review the [support page](/getting-started/support) **Success:** Once your first import works, continue with [Framework categories on the Quickstart page](/quickstart#framework-categories) to see what else is available. # Introduction Source: https://skelementorcss.com/index SkelementorCSS is a CSS utility framework for Elementor—importable classes and design tokens that land in Elementor’s native systems.