v1.0.0-rc.1 · Release Candidate

A framework where tokens do the work, not tools

EXSA is built on three core ideas: a 10-layer cascade where your CSS always wins, Guarded Classless™ styling that steps aside when you add a class, and Fluid Scale + Density Profiles where one attribute changes every component's density. One <link> — plus an optional theme and an optional skin. Zero friction.

Quick Start Browse Components See How It Works

index.html

<!-- One required link (built-in theme) + one optional theme. That's the whole build step. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Saif-Almarri/exsa@1.0.0-rc.1/dist/exsa.css">
<!-- Optional: theme — exsa.css ships built-in defaults -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Saif-Almarri/exsa@1.0.0-rc.1/dist/themes/breeze.css">
<!-- Optional: skin — the material axis (glass, clay, neo, …) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Saif-Almarri/exsa@1.0.0-rc.1/dist/skins/glass.css">

<body class="exsa">
  <nav>...</nav>
  <main>...</main>
</body>

32.4KBCore Size

68Components

20Themes

10Skins

112Icons

0Build Steps

Three Pillars

Three ideas. Plus smart design choices.

Three core ideas make the framework possible — and four design choices make it pleasant to live with: runtime theming, accessibility in the reset, tree-shakeable by default, and a zero-build promise that's permanent, not temporary.

10-Layer Cascade

CSS @layer enforces priority: tokens → themes → skins → fluid → reset → utilities → elements → components → layouts → overrides. Your CSS is unlayered — it always wins. Specificity becomes irrelevant.

Guarded Classless™

Add class="exsa" to <body> and <nav>, <table>, <form>, <button>, <blockquote>, <dialog> style themselves. Add any class to those elements — EXSA steps aside. Zero specificity. No !important.

Fluid Scale + Density

Spacing, type, and radius scale smoothly with the viewport — no breakpoints. Add data-profile="compact" or "spacious" to <html> and every component shifts density. One attribute. One optional file.

Pillar #1

10 layers. Each with one job.

Themes sit directly above tokens — and your CSS is unlayered, so it always wins. No !important anywhere.

∞

Your CSS

Unlayered — always wins. This entire page is unstyled by EXSA components except where it opts in.

your-styles.css — style attribute

Overrides

The u-* escape hatch — deliberate overrides that always beat components and layouts.

.u-text-center — .u-w-full — .u-gap — .u-radius-full

Layouts

Drop-in page shells: general, dashboard, store — plus fullpage & onepage starter templates.

general.css — dashboard.css — store.css — templates/

Components

68 plug-and-play components. One CSS file each. BEM naming prevents collisions.

accordion — modal — toast — tabs — card — table — dropdown

Elements

Guarded Classless — semantic HTML works out of the box; add a class and EXSA steps aside.

<section> gets cards — <section class="my-app"> doesn't

Utilities

89 layout & typography utilities plus responsive variants. No prefix.

.flex — .grid — .container — .gap-md — .grid-auto-fit

Reset

Box model, focus rings, scrollbars, RTL, reduced motion, forced-colors, skip links.

box-sizing — :focus-visible — [dir=rtl] — prefers-reduced-motion

Fluid

Optional clamp() scaling for spacing, type, and radius — plus density profiles.

exsa.fluid.css — data-profile="compact|spacious"

Skins

The material axis — one ~25-line token file redraws every surface: flat, glass, neo, clay, skeuomorphic, glossy, brutalist, metallic, glow, neon.

skins/glass.css — skins/brutalist.css — 8 more

Themes

One file per theme — ~20 color-token overrides in @layer exsa.themes. Swap one <link>.

breeze — night — volt — sepia — mono — 15 more

Tokens

92 design tokens — colors, surfaces, spacing, typography, shadows, breakpoints, factors, z-index.

--color-link — --surface-bg — --border-radius — --surface-shadow-md

Pillar #2

Guarded Classless™ — 20–40% less HTML. Classes only when you need them.

20–40%

Less HTML (typical)

Most CSS approaches force a tradeoff: either you memorize a wall of utility classes, or you annotate every element just to make it stylable. EXSA skips both. Semantic HTML — <nav>, <table>, <aside> — is stylable the moment you write it, no class required. On pages built from meaningful markup, that typically means 20–40% less HTML to write and review, since you're not annotating structure that already exists. You add classes only when you need more than the baseline — the rest of the time, the framework gets out of the way.

Pillar #2 · In Practice

Guarded Classless — and real components when you want more.

Every component below is running on the shipped EXSA styles — the same <link> tags from the hero.

Buttons

Card

Glass-ready

Components restyle on theme swap automatically.

Badges & Status

New Stable

Forms Token-driven

Progress

Components loaded72%

Token coverage38%

Avatar

SA EX UI

Alert

Token-driven

Alerts recolor on theme swap too.

Tabs

One CSS file per component. Link only what you need.

37 behaviors in dist/js/ — they initialize themselves on load.

Pillar #3

One attribute changes every component's density.

This demo is live — click the button and watch all three cards (and every EXSA component on this page) rescale through --space-factor, --radius-factor, --font-factor, and --motion-factor.

Compact

0.8× spacedenser dashboards

Comfortable

1× spacethe default

Spacious

1.3× spacelanding airiness

Requires the optional exsa.fluid.css — linked on this page. Structural layout changes still use responsive utilities.

Component Philosophy

The same card. Two very different philosophies.

EXSA uses semantic component classes — you name what it is. Change one token and every card recolors.

EXSA — 4 classes

<div class="card">
  <div class="card__body">
    <h3 class="card__title">Hello</h3>
    <p class="card__text">Content.</p>
  </div>
</div>

Swap theme or skin → one file each. Done.

Tailwind — 12+ classes

<div class="bg-white rounded-lg
 shadow-md p-6 max-w-sm
 border border-gray-200">
  <h3 class="text-lg font-semibold
 text-gray-900 mb-2">Hello</h3>
  <p class="text-sm
 text-gray-600">Content.</p>
</div>

By Design

Accessibility isn't a plugin. It's layer 4.

The reset ships with Windows High Contrast Mode, reduced motion, contrast preferences, skip links, and visible focus rings — before any component loads.

Get Started

One required link. That's it.

One <link> from the CDN — the core ships a built-in default theme. Add a second link only for your own palette. No build step, no config, and semantic HTML is styled the moment you write it. Works with plain PHP and any PHP framework: Laravel, Symfony, CodeIgniter, WordPress.

index.php

<?php // Your entire app. No composer.json. No package.json. No vite.config.js. ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="exsa/dist/exsa.css">
  <!-- Optional: theme — exsa.css ships built-in defaults -->
  <link rel="stylesheet" href="exsa/dist/themes/breeze.css">
</head>
<body class="exsa">

  <nav> <a href="/">Home</a> <a href="/about">About</a> </nav>

  <main>
    <h1>Welcome</h1>
    <form>
      <label>Name</label>
      <input name="name" required>
      <button type="submit">Save</button>
    </form>
  </main>

</body>
</html>

Ready to let tokens do the work?

Browse 68 components, grab the cheatsheet, or build a custom bundle with the Generator — no build step, no config, just the CSS you need.

Component Showcase Cheatsheet Generator