Utility classes

css-is-awesome ships a namespaced utility layer — every class is prefixed .cia-* so it never collides with host app styles. Utilities are composed directly in markup for one-off layout, spacing, and colour adjustments. The mixin API is still the primary surface of the system; utilities are the escape hatch for rapid prototyping and small tweaks.

Naming convention

All utilities follow cia-<property>-<value> or cia-<property>-<axis>-<value>. The cia- prefix is mandatory — it keeps the utility layer from bleeding into host application styles, plugins, or third-party components that share the same page.

Reach for a utility when the rule is a one-off or you are sketching layout. Reach for a mixin when the styling is semantic, reused, or part of a component contract. Most production code should lean on mixins; utilities are there to keep the last 10% fast.

Spacing

Margin, padding, and gap utilities generate for every step of the spacing scale — numeric keys (1–9) plus t-shirt aliases (xs, sm, md, lg, xl, 2xl, 3xl, 4xl), plus 0, none, and 2xs.

The pattern is cia-<side>-<step>. Sides: m (margin), p (padding), or an axis variant (mx, my, px, py), or a single edge (mt, mr, mb, ml, pt, pr, pb, pl).

Scale reference

Padding in action

<div class="cia-p-4">...</div>
<div class="cia-px-6 cia-py-2">...</div>

Margin & gap

• cia-m-<step>, cia-mx-<step>, cia-my-<step>, cia-m{t,r,b,l}-<step> — margin on all sides / axis / single edge.
• cia-m-auto, cia-mx-auto, cia-my-auto, cia-m{t,r,b,l}-auto — auto-margin variants.
• cia-gap-<step>, cia-gap-x-<step>, cia-gap-y-<step> — flex/grid gap on both axes or one.

Flex & grid

Display, direction, alignment, wrap, grow/shrink, and common composition shortcuts. Pair with cia-gap-* for spacing between children.

Display

• cia-flex, cia-inline-flex
• cia-grid, cia-inline-grid

Flex direction & wrap

• cia-flex-row, cia-flex-row-reverse, cia-flex-col, cia-flex-col-reverse
• cia-flex-wrap, cia-flex-nowrap, cia-flex-wrap-reverse

Flex children

• cia-flex-1, cia-flex-auto, cia-flex-initial, cia-flex-none
• cia-flex-grow, cia-flex-grow-0, cia-flex-shrink, cia-flex-shrink-0

Alignment

• cia-items-{start,end,center,baseline,stretch} — align-items
• cia-justify-{start,end,center,between,around,evenly} — justify-content
• cia-self-{auto,start,end,center,stretch} — align-self

Composition shortcuts

• cia-flex-center — flex + items-center + justify-center.
• cia-flex-between — flex + items-center + justify-between.
• cia-stack — flex + column direction.

Live example

<div class="cia-flex cia-items-center cia-justify-between cia-gap-4 cia-p-4">
  ...
</div>

Grid columns & spans

• cia-grid-cols-{1,2,3,4,6,12} — equal-fraction column templates.
• cia-col-span-{1,2,3,4,6,12,full} — child column spans; full spans the whole row.

<div class="cia-grid cia-grid-cols-3 cia-gap-3">
  <div class="cia-col-span-2">...</div>
</div>

Text

Text utilities cover alignment, transform, decoration, size, weight, line height, and letter spacing. Sizes and weights read from CSS custom properties so they stay theme-aware.

Alignment & decoration

Size, weight, leading, tracking

• cia-text-<size> — font size. Keys: xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, plus numeric 1–10.
• cia-font-<weight> — weight. Keys: light, normal, medium, semibold, bold, black.
• cia-leading-<step> — line-height. Keys: none, tight, snug, normal, relaxed, loose, plus numeric 1–6.
• cia-tracking-<step> — letter-spacing. Keys: tighter, tight, normal, wide, wider, widest.

<p class="cia-text-2xl cia-font-bold">...</p>
<p class="cia-uppercase cia-tracking-widest">...</p>

Colour

Colour utilities read semantic tokens from theme.css, so swapping theme files reskins every utility at once.

Text colour

cia-text-<token> — tokens: primary, secondary, muted, inverse, link, plus status tokens success-text, warning-text, error-text, info-text.

Background colour

cia-bg-<token> — tokens include background-default, background-subtle, background-navbar; surfaces surface-default, surface-subtle, surface-muted, surface-emphasis; status success-subtle, warning-subtle, error-subtle, info-subtle; actions action-primary-default, action-secondary-default.

Border colour

cia-border-<token> — tokens: default, subtle, emphasis, focus.

<div class="cia-bg-success-subtle cia-text-success-text cia-p-4 cia-rounded-md">...</div>

Display

Responsive variants

Mobile-first breakpoint prefixes apply the rule at and above the named breakpoint. The pattern is cia-<bp>\:<utility> — in HTML you write it unescaped, e.g. cia-md:flex.

Responsive variants are generated for the display, flex, grid, text alignment, and spacing (m/p) families — the utilities most commonly reached for when a layout needs to change at a breakpoint. Everything else is left single-variant to keep the stylesheet small.

<!-- stacked on mobile, row from md up -->
<div class="cia-flex cia-flex-col cia-md:flex-row cia-gap-4">
  ...
</div>

Full index

The categories above cover the utilities you reach for day-to-day. Everything else that ships in the utility layer is listed here as a compact reference.

Position & inset

• cia-static, cia-relative, cia-absolute, cia-fixed, cia-sticky
• cia-inset-0, cia-top-0, cia-right-0, cia-bottom-0, cia-left-0

Sizing

• Width — cia-w-full, cia-w-screen, cia-w-auto, cia-w-fit, cia-w-min, cia-w-max
• Min/max width — cia-min-w-0, cia-min-w-full, cia-max-w-none, cia-max-w-full
• Height — cia-h-full, cia-h-screen, cia-h-auto, cia-h-fit
• Min height — cia-min-h-0, cia-min-h-screen, cia-min-h-full

Border, radius, shadow

• Border — cia-border, cia-border-0, cia-border-t, cia-border-r, cia-border-b, cia-border-l
• Radius — cia-rounded-<key> (keys from the theme radius scale, e.g. sm, md, lg, full)
• Shadow — cia-shadow-<key> (keys from the theme shadow scale, e.g. sm, md, lg)

Opacity, z-index, overflow

• Opacity — cia-opacity-<step> where step is 0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100.
• Z-index — cia-z-<layer> where layer is hide, base, dropdown, sticky, fixed, backdrop, modal, popover, tooltip, toast.
• Overflow — cia-overflow-{auto,hidden,visible,scroll}, plus axis variants cia-overflow-x-auto, cia-overflow-y-auto, cia-overflow-x-hidden, cia-overflow-y-hidden.

Cursor & interaction

• cia-cursor-pointer, cia-cursor-default, cia-cursor-not-allowed
• cia-pointer-events-none, cia-pointer-events-auto
• cia-select-none, cia-select-text, cia-select-all

Accessibility

• cia-sr-only — visually hide while keeping content for screen readers.
• cia-not-sr-only — reverse the above (useful for focus-visible reveals).

Animation & hover

• cia-anim-spin, cia-anim-pulse, cia-anim-shimmer — looping effects.
• cia-hover-lift, cia-hover-glow, cia-hover-press, cia-hover-fade — hover-triggered micro-interactions.