🜍 Sulphuris

Sulphuris is an adaptable, self-generating CSS utility library. You describe your design system once — sizes, breakpoints, colours, typography — in a single SCSS config map, and Sulphuris generates the utility classes for you: .p-16, .d-flex, .text-primary, .col-6, .rounded-8, and so on.

It sits deliberately between two worlds:

Old Primer / Bootstrap — human-readable class names that map to CSS properties (.pt-16 is padding-top: 1rem — 16px at the default root), so your markup stays legible and portable.
Tailwind — but without authoring your styles inside class="…" soup, and without a bespoke DSL. Sulphuris is plain SCSS and plain CSS. The classes are generated from a config, not hand-written one by one.

Note

Sulphuris does not invent a new language. Utilities read like the CSS they produce. If you know CSS, you already know Sulphuris.

Philosophy

Config-driven generation. Almost every class comes out of src/core/_config.scss. Change a value there (or override it from your project), rebuild, and the whole utility set adapts.
Pixel names, rem values. .pt-32 is padding-top: 2rem — the same 32px at the default root, but it scales with the reader's browser font-size instead of ignoring it. The number in the class name is a design token, not a unit.
Restrained !important. Utilities avoid !important wherever the cascade allows, so they stay overridable.
Responsive by default. Most utilities also emit breakpoint variants (.d-md-none, .p-lg-24) derived from your $breakpoints map — including an optional XXL breakpoint.

What it is not

Not a component framework. There are a couple of primitives (.btn, .container, a grid), but Sulphuris is mostly low-level utilities and resets.
Not an atomic-CSS DSL. There is no class="[padding-top:16px]" arbitrary-value syntax.
Not a state-variant system. There is no hover:, focus: or group-hover: prefix.
Not zero-config magic. You get the most out of it by overriding the config for your project.

Install

npm install sulphuris

Then, in your main SCSS file:

@use "sulphuris";

Ready? Head to Getting Started to wire it up and override the config, or jump straight to a category in the sidebar.