# Skelementor

> CSS Utility Importer for Elementor v4 - Import utility classes directly into Elementor's Global Classes and Variables systems.

## Docs

- [Border Radius](https://skelementorcss.com/borders/radius.md): Border radius utilities for rounded corners.
- [Border Style](https://skelementorcss.com/borders/style.md): The bundled border styles: solid, dashed, and none.
- [Border Width](https://skelementorcss.com/borders/width.md): The bundled border-width scale from `border-0` through `border-20`.
- [Changelog](https://skelementorcss.com/changelog.md): What’s new in SkelementorCSS.
- [Background Colors](https://skelementorcss.com/colors/background-colors.md): Background utilities for white, black, and gray surfaces, plus six semantic tokens with optional l-5…d-5 ramps matching the Colors palette.
- [Border Colors](https://skelementorcss.com/colors/border-colors.md): Border-color utilities for structural grays and six semantic tokens—primary, secondary, neutral, success, warning, error—with optional l-5…d-5 ramps.
- [Text Colors](https://skelementorcss.com/colors/text-colors.md): Text utilities for structural grays plus six semantic tokens—primary, secondary, neutral, success, warning, error—with optional l-5…d-5 ramps.
- [Buttons](https://skelementorcss.com/components/button.md): Bundled button presets: semantic color classes plus separate size classes from button-xs through button-xl.
- [Borders](https://skelementorcss.com/concepts/borders.md): Border width, style, radius, and color utilities for defining element boundaries.
- [Colors](https://skelementorcss.com/concepts/colors.md): Text, background, and border colors with semantic naming.
- [Components](https://skelementorcss.com/concepts/components.md): Bundled preset button classes for fast, consistent actions.
- [Effects](https://skelementorcss.com/concepts/effects.md): Opacity and standalone outer/inset shadow presets for tone, depth, and surface hierarchy.
- [Filters](https://skelementorcss.com/concepts/filters.md): Bundled filter utilities for blur, brightness, contrast, saturation, and color shifts.
- [Fluid scaling](https://skelementorcss.com/concepts/fluid-scaling.md): How the bundled fluid families scale smoothly and where fixed utilities still make more sense.
- [Layout](https://skelementorcss.com/concepts/layout.md): Display, overflow, object-fit, aspect-ratio, positioning, and z-index utilities.
- [Breakpoints](https://skelementorcss.com/concepts/responsive-utilities.md): The shipped `--on-*` suffix system for structural classes at each breakpoint.
- [Sizing](https://skelementorcss.com/concepts/sizing.md): Width, height, and matching min/max sizing helpers for fixed, fractional, and keyword-based layouts.
- [Spacing](https://skelementorcss.com/concepts/spacing.md): Margin and padding utilities built around the bundled spacing scale.
- [Typography](https://skelementorcss.com/concepts/typography.md): Responsive type scale, leading, weights, alignment, tracking, and text styling.
- [Variables](https://skelementorcss.com/concepts/variables.md): How Elementor Variables act as shared design tokens and how they work alongside Skelementor utilities.
- [Box Shadow](https://skelementorcss.com/effects/box-shadow.md): Standalone outer and inset shadow presets for elevation, recessed depth, and semantic emphasis.
- [Opacity](https://skelementorcss.com/effects/opacity.md): Use the bundled opacity scale for overlays, states, and layered interfaces.
- [Blur](https://skelementorcss.com/filters/blur.md): Use the bundled blur utilities to soften media and supporting layers.
- [Brightness](https://skelementorcss.com/filters/brightness.md): Use the bundled brightness utilities to dim or lift media without replacing the source asset.
- [Color Effects](https://skelementorcss.com/filters/color-effects.md): Use bundled grayscale, invert, sepia, and filter reset utilities for quick tonal treatments.
- [Contrast](https://skelementorcss.com/filters/contrast.md): Use the bundled contrast utilities to tighten or soften tonal separation in imagery.
- [Hue Rotate](https://skelementorcss.com/filters/hue-rotate.md): Use the bundled hue rotation utilities to shift imagery into a new color family.
- [Saturate](https://skelementorcss.com/filters/saturate.md): Use the bundled saturation utilities to reduce or amplify color intensity.
- [Align Content](https://skelementorcss.com/flexbox/align-content.md): Use the shipped `content-*` utilities to distribute wrapped flex lines on the cross axis.
- [Align Items](https://skelementorcss.com/flexbox/align-items.md): Use the shipped `items-*` utilities to align every flex child along the cross axis.
- [Align Self](https://skelementorcss.com/flexbox/align-self.md): Use the shipped `self-*` utilities to override alignment for one flex item.
- [Flex Direction](https://skelementorcss.com/flexbox/direction.md): Control flex direction with row, column, and reverse direction utilities.
- [Flex](https://skelementorcss.com/flexbox/flex.md): Start flex layouts with `.flex` and `.inline-flex` container utilities and their responsive variants.
- [Flex Basis](https://skelementorcss.com/flexbox/flex-basis.md): Set the initial main-axis size of flex items with bundled `basis-*` utilities before grow and shrink run.
- [Flex Grow](https://skelementorcss.com/flexbox/flex-grow.md): Use the bundled `.flex-grow` utility to let selected items absorb remaining space.
- [Flex Shrink](https://skelementorcss.com/flexbox/flex-shrink.md): Use the bundled `.flex-shrink` utility when selected items should contract in limited space.
- [Gap](https://skelementorcss.com/flexbox/gap.md): Control flex spacing with the bundled `gap-*`, `gap-x-*`, and `gap-y-*` utilities.
- [Justify Content](https://skelementorcss.com/flexbox/justify-content.md): Use the shipped `justify-*` utilities to control main-axis distribution in flex layouts.
- [Order](https://skelementorcss.com/flexbox/order.md): Use the shipped order helpers to move selected flex items to the start or end of the line.
- [Flex Wrap](https://skelementorcss.com/flexbox/wrap.md): Control whether flex items stay on one line or wrap onto new rows.
- [FAQ](https://skelementorcss.com/getting-started/faq.md): Frequently asked questions about Skelementor
- [Installation](https://skelementorcss.com/getting-started/installation.md): Installation and environment checklist for the Skelementor plugin.
- [Importing Classes & Variables](https://skelementorcss.com/getting-started/quickstart.md): Detailed import guide for bringing Skelementor classes and variables into Elementor v4.
- [Introduction](https://skelementorcss.com/index.md): SkelementorCSS is a comprehensive utility CSS framework for Elementor v4—composable classes, design tokens, and imports that land in Elementor’s native systems.
- [Aspect Ratio](https://skelementorcss.com/layout/aspect-ratio.md): Keep media frames consistent with the bundled aspect-ratio utilities.
- [Display](https://skelementorcss.com/layout/display.md): Control how elements participate in layout with the bundled display utilities.
- [Object Fit](https://skelementorcss.com/layout/object-fit.md): Control how images and video media fit inside fixed frames.
- [Overflow](https://skelementorcss.com/layout/overflow.md): Control clipping and scrolling with the bundled overflow utilities.
- [Positioning](https://skelementorcss.com/layout/positioning.md): Control positioning modes with the bundled `static`, `relative`, `absolute`, `fixed`, and `sticky` utilities.
- [Z-Index](https://skelementorcss.com/layout/z-index.md): Control stacking order with the bundled z-index scale.
- [Prerequisite](https://skelementorcss.com/plugin/prerequisite.md): Environment and readiness checklist before installing the Skelementor plugin.
- [Quickstart](https://skelementorcss.com/quickstart.md): Install Skelementor, import the bundled framework, learn how utilities are organized, and apply classes in Elementor.
- [Height](https://skelementorcss.com/sizing/height.md): Control height with size, fraction, and keyword height utilities.
- [Max Height](https://skelementorcss.com/sizing/max-height.md): Control maximum height with size, fraction, and keyword max-height utilities.
- [Max Width](https://skelementorcss.com/sizing/max-width.md): Control maximum width with size, fraction, and keyword max-width utilities.
- [Min Height](https://skelementorcss.com/sizing/min-height.md): Control minimum height with size, fraction, and keyword min-height utilities.
- [Min Width](https://skelementorcss.com/sizing/min-width.md): Control minimum width with size, fraction, and keyword min-width utilities.
- [Width](https://skelementorcss.com/sizing/width.md): Control width with size, fraction, and keyword width utilities.
- [Margin](https://skelementorcss.com/spacing/margin.md): Control external spacing with the shipped Skelementor margin utilities.
- [Padding](https://skelementorcss.com/spacing/padding.md): Control internal spacing with the bundled Skelementor padding utilities.
- [Font Size](https://skelementorcss.com/typography/font-size.md): The bundled responsive text scale from `.text-2xs` through `.text-9xl`.
- [Font Weight](https://skelementorcss.com/typography/font-weight.md): Dial in typographic emphasis using `.font-*` utilities from ultra-thin to ultra-black.
- [Letter Spacing](https://skelementorcss.com/typography/letter-spacing.md): Control tracking with `.tracking-*` utilities that tighten or loosen character spacing.
- [Line Height](https://skelementorcss.com/typography/line-height.md): Fixed pixel leading utilities that ship as `.leading-*` in the bundle.
- [Text Alignment](https://skelementorcss.com/typography/text-alignment.md): Apply semantic alignment utilities that respect document direction and layout context.
- [Text Style](https://skelementorcss.com/typography/text-style.md): Use transform and decoration utilities to add emphasis without writing custom CSS.

## OpenAPI Specs

- [openapi](https://skelementorcss.com/api-reference/openapi.json)

## Optional

- [Community](https://www.facebook.com/share/g/1DuiKvQvtq/)