decius.css

A CSS framework for digital content creation (DCC) tools, synths, and pro desktop interfaces. Dark, dense, and token-driven — the vocabulary your power users already speak (Blender, DaVinci Resolve, Vital), distributed as plain CSS, a zero-dependency JS runtime, an icon font, and self-hosted type. One download, no dependencies.

decius is built for affineui — a zero-dependency C++ HTML/CSS renderer for native apps and games — and runs in any modern browser too.

• 📖 Docs & live demos: https://benjcooley.github.io/decius-css/
• 📦 npm: decius-css
• 🪪 License: MIT (framework + icons) · SIL OFL 1.1 (bundled webfonts)

Status: v0.4.0 "Mus" — early, but complete enough to build real tools with.

---

Why decius

Zero runtime	One stylesheet with the fonts and icon font baked in. No compile step, no design-system tax.
Tokenized to the wall	Every color, size, radius, shadow and motion value is a CSS custom property. Re-theme by overriding a handful of variables — at runtime, no rebuild.
Built for pros	Combo number fields, knobs, bipolar sliders, dockable panels, tree/table/list, curve & node-graph editors, menus, popovers, toasts, even skeuomorphic hardware.
Behavior, no framework	decius.js — a tiny vanilla runtime with a Bootstrap-style data API — drives modals, menus, popovers, tabs, toasts, and the drag controls. No React required.
Scoped	Everything lives under .dcs, so the framework never leaks into the rest of your page.
225 icons as a font	A <i class="di di-cube"> glyph that inherits currentColor and font-size.

Install

From a CDN (zero build)

<!-- everything: self-hosted fonts + icon font + framework -->
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/decius-css@0.4/dist/css/decius.bundle.min.css">

From npm

npm install decius-css

// plain CSS artifacts
import 'decius-css/css/decius.bundle.min.css';

// …or compile from the Sass source and theme it yourself
@use 'decius-css/scss/decius';

Or download the .zip (css + js + fonts) from the docs site.

Then wrap your UI

<link rel="stylesheet" href="…/decius.bundle.min.css">
<script src="…/decius.min.js"></script>      <!-- optional: component behavior -->

<div class="dcs" data-dcs-density="comfortable">
  <button class="dcs-btn dcs-btn--primary">
    <i class="di di-render"></i>
    Render
  </button>
</div>

JavaScript

Stateful components (modals, menus, popovers, tabs, toasts, splitter resize, and the drag controls — sliders, faders, knobs, combo fields) are driven by decius.js, a zero-dependency vanilla script with a Bootstrap-style data API. It auto-initializes on DOMContentLoaded.

Scope: decius.js covers per-component behavior. A full drag-to-dock layout manager (rearranging panes by dragging tabs into center/edge drop-zones) is application-level — it ships as a React reference component in the docs site, and on affineui the host provides docking natively. The framework gives you the CSS (.dcs-dock, .dcs-dockpane, .dcs-splitter, .dcs-menubar) and the menu/tab/splitter behaviors out of the box.

<!-- data API -->
<button data-dcs-toggle="modal" data-dcs-target="#m">Open</button>
<div data-dcs-slider data-min="0" data-max="1" data-value="0.6"></div>

// programmatic API
decius.toast({ title: 'Saved', variant: 'ok' });
decius.modal.open('#confirm');
decius.init(container);   // wire up dynamically-added markup

It's also an ES module: import decius from 'decius-css/js'.

Theming

decius themes at runtime through CSS custom properties and data-dcs-* attributes on any container — the attribute reshapes everything inside it:

<div class="dcs"
     data-dcs-density="compact"     <!-- compact · comfortable · spacious -->
     data-dcs-radius="round"        <!-- sharp · (default) · round       -->
     data-dcs-accent="violet"       <!-- blue · cyan · orange · violet · green -->
     data-dcs-dark="darker"         <!-- darker · (default) · lighter     -->
     data-dcs-style="3d">           <!-- flat (default) · 3d synth bevels -->
  …
</div>

Or override the tokens directly:

.dcs { --dcs-accent: #ff6b9d; --dcs-r-3: 8px; }

What ships

Everything is built into dist/:

File	What
dist/css/decius.css / .min.css	The framework (dark, scoped to .dcs).
dist/css/decius-web.css / .min.css	Light web/docs theme (--dw-*) for marketing pages & docs.
dist/css/decius-icons.css	@font-face + .di-* classes for the icon font.
dist/css/decius-fonts.css	@font-face for self-hosted IBM Plex Sans + JetBrains Mono.
dist/css/decius.bundle.css / .min.css	One drop-in file = fonts + icons + framework.
dist/js/decius.js / .min.js / .esm.js	Vanilla component runtime (IIFE global + ES module).
dist/fonts/decius-icons.woff2	The 225-glyph icon web font.
dist/fonts/*.woff2	Self-hosted text webfonts (latin + latin-ext).
dist/decius-css.zip	Everything (css + js + fonts) in one archive.

Three layers

decius is deliberately split into three independent layers — keep them separate:

1. CSS (scss/ → dist/css) — the framework itself. The source of truth; everything is styled here, scoped to .dcs.
2. Vanilla runtime (js/ → dist/js/decius.js) — zero-dependency decius.js: data-attribute behaviors (modals, menus, popovers, tabs, toasts, collapse, drag controls, splitter resize). No framework required.
3. React components (react/) — a richer reference layer (incl. the full drag-to-dock DockLayout) that wraps the same CSS. App-level concerns that don't belong in the tiny runtime; not published yet. On affineui, the host provides this natively.

Repository layout

scss/            Sass source (Bootstrap-style partials → dist/css)
  core/          the framework, split by section
  web/           the light docs/web theme
icons/
  svg/           per-icon SOURCE svgs (the icon font is built from these)
  icons.json     icon catalog manifest
js/src/          vanilla component runtime (decius.js) source — LAYER 2
react/           React component layer (Icon, DockLayout, …) — LAYER 3, not published
fonts/           vendored self-hosted text webfonts + OFL licenses
examples/        standalone, framework-only usage examples (kitchen-sink.html)
scripts/         build pipeline (css, icon font, fonts, js, bundle, zip)
  outline_icons.py   stroke→fill outliner (Shapely) used by the icon-font build
site/            the documentation site (Vite) — docs content; imports react/ + dist/
dist/            built artifacts (committed, CDN-served)
design/          original design deliverable (provenance)

Building locally

Requires Node ≥ 18 and Python 3 with shapely + svgelements (for outlining the stroke icons into the icon font).

npm install
pip install shapely svgelements

npm run build        # → dist/  (fonts, icon font, css, bundle)
npm run lint         # stylelint the SCSS
npm test             # build css + smoke-test the artifacts
npm run dev          # run the docs site locally (needs one `npm run build` first)
npm run build:site   # build framework + docs site → _site/

Browser support

Modern evergreen browsers and affineui. decius leans on CSS custom properties, flexbox, and grid; there is no legacy IE support.

Credits

• Design system & docs site by Claude Design.
• Bundled type: IBM Plex Sans (© IBM) and JetBrains Mono (© JetBrains) under the SIL OFL 1.1.

License

MIT for the framework and icons. Bundled webfonts are under the SIL Open Font License 1.1.