The Ultimate Features
Fluid Typography & Spacing Engine
clamp() driven by container query units (cqi) to create perfectly fluid layouts. As the container resizes, everything scales continuously.// 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});
}↔ Resize window to see fluid scaling in action
Flawless Breakpoint Classes
md:grid-cols-3. The Zeus compilation engine guarantees perfect CSS Specificity and Cascade logic without bloat.grid grid-cols-1 md:grid-cols-3Responsive gridd-none lg:d-blockDesktop only elementflex-column md:flex-rowStack on mobile, row on desktopw-full lg:w-1/2Full width to half widthgrid-cols-*, gap-*, col-span-*flex, flex-row/column, justify-*, align-*, flex-wrapw-*, h-*, w-1/2, min-w-*, max-w-*static/relative/absolute/fixed/sticky, inset-*, top-*, bottom-*opacity-*, overflow-*, object-*, order-*, flex-grow/shrink-*box-*, icon-*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.
Comprehensive Base Utilities
w-fullFull widthh-screenFull viewport heightabsoluteAbsolute positionlayer-modalModal-level z-indexborder-radius-roundedFully roundedoverflow-hiddenClip contentflex-grow-1Flex growd-inline-blockInline block boxgap-xlExtra-large gaptruncateEllipsis overflowaspect-16-916:9 ratioopacity-5050% opacityw-1/250% width fractionmin-w-0Flex-child overflow fixobject-coverObject-fit: coverorder-firstReorder to frontAdvanced CSS Grid & Flexbox
grid-thirds, grid-cards, grid-sidebar and grid-split, and a full suite of flexbox utilities for align, justify, direction, and wrap.grid-thirdsgrid-cardsgrid-sidebargrid-splitjustify-betweenjustify-centeralign-centerToken-Driven OKLCH Color Engine
bg-primary-50, bg-secondary-10, and more.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-10Elevations & Smooth Shadows
shadow-xsshadow-smshadow-mdshadow-lgshadow-xlshadow-2xlshadow-glowshadow-innershadow-primaryshadow-secondaryshadow-successshadow-warningshadow-dangershadow-infoshadow-cardshadow-dropdownshadow-modalshadow-outlinehover:shadow-lgfocus:shadow-outlineHardware-Accelerated Animations
animate-fade-inFade Inanimate-slide-upSlide Upanimate-slide-downSlide Downanimate-pulsePulseanimate-rotateRotateanimate-bounceBounce/* 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; }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-scaleSmart UI Components
z-card
Default elevated card.
z-card--outlined
Border, no shadow.
z-card--flat
No shadow, no lift.
Must be a valid email.
Aspect Ratios & Native @property
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.aspect-1-1Squareaspect-16-9Videoaspect-21-9Cinemaaspect-3-4PortraitZeus 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;
}Total Configuration & Customization
zeus.config.scss. Change colors, enable class prefixes, configure breakpoints — with zero hassle.$zeus-use-prefix: true; $zeus-class-prefix: "z-";
@include zeus-theme("ocean", (
primary: #0077b6,
secondary: #00b4d8,
body: #caf0f8,
text: #023e8a,
));$zeus-enable-shadow-classes: false; $zeus-enable-grid-system: true;
$zeus-breakpoints: ( "xs": 0, "lg": 1440px );
$zeus-space: ( "lg": (floor: 16, ceil: 24) );
// Zero deps. Zero runtime. // 100% static CSS output.
Responsive Custom Vars
zeus.customize.scss. No media queries to write. No engine files to touch. One map, infinite control.Mobile portrait (uses base sm value) — the CSS variable updates automatically via @media (min-width)
// zeus.customize.scss
$zeus-custom-vars: (
"header-height": (
sm: 60px,
md: 64px,
ml: 72px,
),
"sidebar-width": (
xs: 0px,
lg: 240px,
),
) !default;: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; } }height: var(--header-height) — always reads the correct value for the current viewport.