V1.0.0 Architecture

The Ultimate Features

Zeus CSS is not just another utility framework. It is a highly optimized, token-driven, mathematically flawless styling engine designed for maximum scale and absolute precision.
10+Core Modules
375–1920Viewport Range (px)
0Runtime Overhead
Customization
Feature 01

Fluid Typography & Spacing Engine

Instead of snapping to hard breakpoints, Zeus uses native CSS clamp() driven by container query units (cqi) to create perfectly fluid layouts. As the container resizes, everything scales continuously.
fluid-core.scss
// Real compiled output for --text-h1 (min: 36px, max: 52px)
:root {
  --text-h1: clamp(2.25rem, round(calc(2rem + 1.1cqi), 0.1rem), 3.25rem);
}

// The shared engine that generates every fluid token:
@function zeus-cqi-fluid($low, $high, $c-floor, $c-ceil, $unit, $accuracy: 1, $step: 0.1) {
  $raw-slope: math.div($high - $low, $c-ceil - $c-floor);
  $slope-cqi: round-to($raw-slope * 100, $accuracy);
  $intercept: $low - (math.div($slope-cqi, 100) * $c-floor);
  $preferred: round(calc(#{round-to($intercept, $accuracy)}#{$unit} + #{$slope-cqi}cqi), #{$step}#{$unit});
  @return clamp(#{$low}#{$unit}, #{$preferred}, #{$high}#{$unit});
}
Small text scales
Medium scales with its container
Large heading fluid

↔ Resize window to see fluid scaling in action

Feature 02

Flawless Breakpoint Classes

Apply utility classes conditionally at specific breakpoints like md:grid-cols-3. The Zeus compilation engine guarantees perfect CSS Specificity and Cascade logic without bloat.
xs:
0px
sm:
576px
md:
768px
ml:
1024px
lg:
1280px
xl:
1920px
xxl:
2560px
Usage Examples
grid grid-cols-1 md:grid-cols-3Responsive grid
d-none lg:d-blockDesktop only element
flex-column md:flex-rowStack on mobile, row on desktop
w-full lg:w-1/2Full width to half width
✓ Available on
Gridgrid-cols-*, gap-*, col-span-*
Flexboxflex, flex-row/column, justify-*, align-*, flex-wrap
Sizingw-*, h-*, w-1/2, min-w-*, max-w-*
Positionstatic/relative/absolute/fixed/sticky, inset-*, top-*, bottom-*
Misc utilitiesopacity-*, overflow-*, object-*, order-*, flex-grow/shrink-*
Box / icon sizesbox-*, icon-*
✗ Not available on
Typographyalready fluid via clamp()
Spacing (padding/margin/gap)already fluid via clamp()
ColorsOKLCH tokens, same at every viewport
Shadows / Borders / Z-indexbase-level tokens, no viewport dependency
Components (buttons, cards, grid-thirds, etc.)bake in their own responsive behavior internally

Breakpoint prefixes only apply to structural utilities (grid, flexbox, sizing, position, misc, box/icon sizes) — these are the only classes wrapped in the compiler's @each $bp-name in $zeus-breakpoints loop. Typography, spacing, and colors scale continuously via clamp() in the Fluid Engine and never take a breakpoint prefix.

Feature 03

Comprehensive Base Utilities

Write HTML fast with dozens of intuitive utility classes for sizing, positioning, display, z-index, visibility, overflow, and border-radius — all generated from design tokens.
sizingw-fullFull width
sizingh-screenFull viewport height
positionabsoluteAbsolute position
positionlayer-modalModal-level z-index
shapeborder-radius-roundedFully rounded
displayoverflow-hiddenClip content
flexflex-grow-1Flex grow
displayd-inline-blockInline block box
spacinggap-xlExtra-large gap
texttruncateEllipsis overflow
shapeaspect-16-916:9 ratio
miscopacity-5050% opacity
sizingw-1/250% width fraction
sizingmin-w-0Flex-child overflow fix
miscobject-coverObject-fit: cover
flexorder-firstReorder to front
Feature 04

Advanced CSS Grid & Flexbox

A robust 12-column grid system with fluid gaps, pre-built layout patterns like grid-thirds, grid-cards, grid-sidebar and grid-split, and a full suite of flexbox utilities for align, justify, direction, and wrap.
col-span-*
col-span-4
col-span-4
col-span-4
col-span-8
col-span-4
col-span-12
grid-thirdsgrid-cardsgrid-sidebargrid-split
Flexbox Utilities
justify-between
justify-center
align-center
Feature 05

Token-Driven OKLCH Color Engine

Zeus utilizes modern wide-gamut OKLCH colors for perceptual uniformity. It auto-generates background opacity variants via CSS variables — bg-primary-50, bg-secondary-10, and more.
Primary
Secondary
Accent
OKLCHPerceptual Color Space

Unlike HSL or RGB, OKLCH ensures equal perceived lightness across hues — your blues and reds look equally bright at the same lightness value.

bg-primarybg-primary-50bg-primary-10bg-secondary-50bg-accent-10
Feature 06

Elevations & Smooth Shadows

A multi-layered elevation system built to provide realistic optical depth. Smooth shadows scale from shadow-xs up to shadow-2xl, plus semantic, inner, component, hover and focus variants.
Subtleshadow-xs
Cardshadow-sm
Hovershadow-md
Elevatedshadow-lg
Overlayshadow-xl
Maxshadow-2xl
Glowshadow-glow
Innershadow-inner
Semantic shadows
shadow-primaryshadow-secondaryshadow-successshadow-warningshadow-dangershadow-info
Component & interaction shadows
shadow-cardshadow-dropdownshadow-modalshadow-outlinehover:shadow-lgfocus:shadow-outline
Feature 07

Hardware-Accelerated Animations

Ready-to-use smooth animations optimized for 60fps rendering using GPU acceleration and transform properties. Delay utilities like delay-200 give you full sequencing control.
👁️
animate-fade-inFade In
⬆️
animate-slide-upSlide Up
⬇️
animate-slide-downSlide Down
💫
animate-pulsePulse
🔄
animate-rotateRotate
🏀
animate-bounceBounce
animations.scss
/* GPU-Accelerated Fade In */
@keyframes zeus-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: zeus-fade-in 0.3s ease-in-out 0s both;
}

/* Delay Sequence */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* Duration overrides */
.duration-500 { animation-duration: 500ms; }
Scroll-Driven Animations — Zero JavaScript

Native CSS animation-timeline: view() ties these animations directly to scroll position, with built-in prefers-reduced-motion guards (WCAG 2.3.3).

z-scroll-revealz-scroll-tiltz-scroll-scale
Feature 08

Smart UI Components

Structural components like Buttons, Cards, Inputs, and Forms — pre-styled with native hover, focus, and disabled states without requiring JavaScript logic.
Buttons
Card Variants

z-card

Default elevated card.

z-card--outlined

Border, no shadow.

z-card--flat

No shadow, no lift.

Form Fields

Must be a valid email.

Feature 09

Aspect Ratios & Native @property

Force dimensions gracefully with classes like aspect-16-9 or aspect-1-1. Plus, native CSS @property registration gives design tokens like spacing, radius, and color real types so the browser can animate and validate them.
1:1
aspect-1-1Square
16:9
aspect-16-9Video
21:9
aspect-21-9Cinema
3:4
aspect-3-4Portrait
Native @property Registration

Zeus registers every spacing, size, radius, border-line, and color token as a typed CSS custom property. Invalid values fall back to the initial value instead of silently breaking.

@property --space-lg {
  syntax: "<length>";
  inherits: true;
  initial-value: 16px;
}

.card {
  padding: var(--space-lg);
  transition: padding 0.3s ease;
}
Feature 10

Total Configuration & Customization

Every single feature can be toggled on/off in zeus.config.scss. Change colors, enable class prefixes, configure breakpoints — with zero hassle.
🔧
Prefix System
Avoid conflicts by enabling class prefixes globally (e.g. z-flex, z-padding-lg). Two flags in your config sheet.
$zeus-use-prefix: true;
$zeus-class-prefix: "z-";
🌈
Named Brand Themes
Define a named palette with zeus-theme() — it derives the full color set from your inputs, using the same math as the defaults, and swaps in behind a [data-theme] attribute.
@include zeus-theme("ocean", (
  primary: #0077b6,
  secondary: #00b4d8,
  body: #caf0f8,
  text: #023e8a,
));
📦
Modular Build
Disable entire modules like shadows, animations, or the grid system to reduce your final CSS bundle size to a minimum.
$zeus-enable-shadow-classes: false;
$zeus-enable-grid-system: true;
📐
Custom Breakpoints
Completely replace the breakpoint scale. Define your own names, pixel values, and strategy in one map.
$zeus-breakpoints: (
  "xs": 0,
  "lg": 1440px
);
🎨
Token Override
Override any design token — spacing scale, radius, typography, line-heights — without touching the source.
$zeus-space: (
  "lg": (floor: 16, ceil: 24)
);
Zero Runtime
Everything compiles at build time. No JavaScript, no CSS-in-JS, no runtime calculations. Just pure CSS output.
// Zero deps. Zero runtime.
// 100% static CSS output.
Feature 11 — $zeus-custom-vars

Responsive Custom Vars

Define any CSS custom property with a different value at each breakpoint — directly from zeus.customize.scss. No media queries to write. No engine files to touch. One map, infinite control.
Live — resize your window
--header-height
60px
at xsbreakpoint  · 0px viewport
xs0–575px
60px
sm576–767px
60px
md768–1023px
64px
ml1024–1279px
72px
lg1280–1919px
72px
xl1920–2559px
72px
xxl2560px+
72px

Mobile portrait (uses base sm value) — the CSS variable updates automatically via @media (min-width)

zeus.customize.scssINPUT
// zeus.customize.scss

$zeus-custom-vars: (
  "header-height": (
    sm:  60px,
    md:  64px,
    ml:  72px,
  ),
  "sidebar-width": (
    xs:  0px,
    lg:  240px,
  ),
) !default;
Zeus engine compiles →
output.cssOUTPUT
:root {
  --header-height: 60px; /* lowest bp (sm) acts as global base */
}
@media (min-width: 768px)  { :root { --header-height: 64px; } }
@media (min-width: 1024px) { :root { --header-height: 72px; } }
Use anywhere in your CSS
height: var(--header-height) — always reads the correct value for the current viewport.