An adaptable CSS
utility library.

Imagine how awesome it would be if you could quickly personalize your own utility library for every project you do? Well, you don't have to imagine anymore.

npm install sulphuris

Introduction

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…

It sits deliberately between two worlds: the human-readable class names of old Primer / Bootstrap (.pt-16 is padding-top: 16px), and the config-driven adaptability of Tailwind — but without authoring your styles inside class="…" soup, and without a bespoke DSL. Sulphuris is plain SCSS and plain CSS. Utilities read like the CSS they produce; if you know CSS, you already know Sulphuris.

Read the full guides in the documentation.

Getting Started

Install the package:

npm install sulphuris

Pull the whole utility set into your main SCSS file with a single line:

@use "sulphuris";

Every config variable is declared with !default, so you tune the generated output by forwarding the config with your values before the @use line:

@forward "sulphuris/core/config" with (
  $colors: (
    foreground: #1a1a1d,
    background: #fff,
    primary: #824f2d,
  ),
  $sizes: (0, 4, 8, 16, 24, 32, 48, 64),
  $breakpoints: (
    'xl': 1440px,
    'lg': 1024px,
    'md': 768px,
    'sm': 480px,
  )
);

@use "sulphuris";

Rebuild, and the whole utility set adapts — your spacing scale, your colours, your breakpoints. You only list the variables you want to change; everything you omit keeps its default. See Getting Started and Configuration for the full list.

Capabilities

One config map drives all of it. Here is what Sulphuris generates for you.

Spacing & sizing

Margins, padding, width, height and position in pixels — .p-16, .mt-32, .px--8 — plus percentage and viewport sizes, all with per-orientation variants.

Flexbox & display

Full flexbox toolkit (.d-flex, .justify-space-between, .align-center) and every display value, each with responsive variants.

Nested 12-column grid

A gutter-aware grid that nests cleanly — .col-6, .col-lg-4, .col-offset-lg-1, and max-width columns.

Colours & palettes

Named colours become --color-* custom properties, and each palette auto-generates a 100–900 tint/shade scale: .bg-blue-500, .text-primary.

Typography

A responsive type scale driven from the config — headings, paragraph sizes and utilities like .h3 without needing the matching tag.

Dark mode & tokens

Colour modes swap the --color-* tokens via a [data-color-scheme] selector — toggle the theme in the header to see it.

Gap & native grid

Modern spacing and layout — .gap-16, .gap-x-8, and native CSS grid via .d-grid + .grid-cols-3, alongside the classic flex grid.

Logical & RTL spacing

Writing-direction-aware spacing and positioning — .m-inline-16, .p-block-8, .inset-inline-0 — one flag away with $logical-properties: true, alongside the always-on .aspect-16x9 ratios and .inset-0 shorthand.

Fluid scale & effects

A fluid() clamp() helper for type and spacing that scales with the viewport, plus ready-made .shadow-md, .transition, .cursor-pointer, .opacity-50, .truncate and .rounded-full classes.

Capabilities in action

Nested grids, generated palettes, the column system, the type scale and buttons — every block below is Sulphuris utilities.

gray-900

gray-800

gray-700

gray-600

gray-500

gray-400

gray-300

gray-200

gray-100

yellow-900

yellow-800

yellow-700

yellow-600

yellow-500

yellow-400

yellow-300

yellow-200

yellow-100

orange-900

orange-800

orange-700

orange-600

orange-500

orange-400

orange-300

orange-200

orange-100

red-900

red-800

red-700

red-600

red-500

red-400

red-300

red-200

red-100

violet-900

violet-800

violet-700

violet-600

violet-500

violet-400

violet-300

violet-200

violet-100

purple-900

purple-800

purple-700

purple-600

purple-500

purple-400

purple-300

purple-200

purple-100

indigo-900

indigo-800

indigo-700

indigo-600

indigo-500

indigo-400

indigo-300

indigo-200

indigo-100

blue-900

blue-800

blue-700

blue-600

blue-500

blue-400

blue-300

blue-200

blue-100

teal-900

teal-800

teal-700

teal-600

teal-500

teal-400

teal-300

teal-200

teal-100

green-900

green-800

green-700

green-600

green-500

green-400

green-300

green-200

green-100

lime-900

lime-800

lime-700

lime-600

lime-500

lime-400

lime-300

lime-200

lime-100

class MyClass {
          public static myValue: string;
          constructor(init: string) {
            this.myValue = init;
          }
        }
        import fs = require("fs");
        module MyModule {
          export interface MyInterface extends Other {
            myProperty: any;
          }
        }
        declare magicNumber number;
        myArray.forEach(() => { }); // fat arrow syntax

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum facilisis finibus. Morbi ac dapibus nibh. Quisque libero ipsum, pulvinar sit amet rhoncus quis, fermentum et lectus. Ut ac ipsum eget dolor bibendum elementum ut non sapien. In tincidunt lacus sit amet ex volutpat placerat. Vestibulum ullamcorper mi erat, vel facilisis elit convallis vitae. Sed vitae accumsan ligula, vel vehicula neque. In id tristique nisl, sed ultricies justo. Pellentesque lacinia justo urna, eget blandit urna interdum in. Vivamus sit amet molestie libero.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading 3

Caption

Supertitle

Heading 4

Heading 5

Heading 6

Ready to make it yours?

Get started · Read the docs · GitHub · npm

Sulphuris — An adaptable CSS utility library MIT licensed. 🜍

An adaptable CSS utility library.