Skip to main content

​
Overview

Fluid scaling means sizes change smoothly as the viewport changes. In the Skelementor bundle, many utilities resolve to clamp() expressions so sizes stay proportional across screen widths without you adding extra class layers for “mobile vs desktop” on those properties.

​
How clamp() works

clamp(min, preferred, max) picks a live value between a floor and a ceiling:
  1. min — the smallest the browser may use.
  2. preferred — usually a calc() that blends rem with viewport units (vw), so the value inches up or down as the viewport grows or shrinks.
  3. max — the largest the browser may use.
The computed result is always clamped inside [min, max], so you get smooth scaling with hard limits at both ends. That is the usual pattern behind fluid typography and fluid spacing in the bundled CSS.

​
Why fluid scaling matters

  • Readable proportions — type and spacing do not stay stuck at one pixel size; they track the viewport so small screens do not feel oversized and large screens do not feel pinched.
  • One name, responsive behavior — you keep using the same utility (for example text-lg or p-4) instead of juggling separate fixed values per breakpoint for those families.
  • Aligned with the framework — fluid behavior is built into the listed families below; you do not need a parallel naming scheme for “responsive” versions of those utilities.
The shipped utilities are defined in the bundled skelementor-utilities.css from the plugin package; treat that file as the exact source if you need to inspect a rule.

​
Families that use fluid scaling

These class families ship with fluid / clamp()-style values in the bundle (names mirror how you use them in markup):
FamilyWhat it controlsWhere to read more
text-*Font sizeFont size
m-*, mx-*, my-*, mt-*, mb-*, ml-*, mr-*MarginMargin
p-*, px-*, py-*, pt-*, pb-*PaddingPadding
gap-*, gap-x-*, gap-y-*Flex (and grid) gapGap
max-w-*Max widthMax width
border-* (width)Border width (via variables such as var(--border-*))Border width

​
What is not fluid here

leading-* uses fixed pixel line-height in the bundle, not clamp() — see Line height. Many other helpers (font weights, colors, most layout keywords, component presets, and more) are also intentionally fixed. When you need a structural change at a width threshold (for example flex-col → flex-row), use --on-* suffixes on the supported utilities — Breakpoints.

​
Custom utilities

You can author fluid scaling in your own CSS that Skelementor imports: clamp(), min(), max(), and calc() are valid in custom utilities when you need a one-off curve or spacing ramp. See Custom CSS for supported value formats and the import workflow. 
/* Example: fluid section padding */
.section-fluid-y {
  padding-top: clamp(1rem, 0.5rem + 2vw, 3rem);
  padding-bottom: clamp(1rem, 0.5rem + 2vw, 3rem);
}

Font size

Bundled text-* scale and clamp() definitions

Margin

m-* and directional margin utilities

Padding

p-* and directional padding utilities

Gap

gap-*, gap-x-*, and gap-y-*

Max width

max-w-* caps

Border width

border-* widths and var(--border-*)

Breakpoints

--on-* suffixes for structural utilities

Custom CSS

Writing and importing utilities with fluid scaling