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/[email protected]/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.