Stisla 3

We dropped Bootstrap

Stisla started on Bootstrap, and when the rewrite began the plan was to move to the next Bootstrap. So we ported the components onto it to see how it would feel. The thing we kept running into was the variable and color system. Bootstrap spans two worlds at once. Some values live in Sass and resolve at build time, others live in custom properties and resolve in the browser. Following a single color from its Sass source all the way to the variable a component reads is more involved than it looks.

By the time the components were done, theming still never came down to turning a single knob, because the two systems stayed mixed. None of this is a knock on Bootstrap. It is a complete design system, and that is the point of it. We just wanted something different, so we rebuilt the foundation.

We landed on Tailwind because it already solves the hard part. Tailwind v4 ships a considered scale for color, spacing, and type, a @theme block where those tokens live as plain custom properties, and a build that resolves everything at once instead of splitting values across Sass and the browser. It gives us one place to put a value and one way to read it, which is exactly what Bootstrap made hard. We build the component layer on top. Why Stisla covers the reasoning in full.

One theme, read everywhere

Around thirty semantic tokens name the system’s color, type, radius, and spacing. Every component draws from that set and nothing else, so there is one place to change and nothing drifts out of agreement. Change the primary color below and watch every component repaint at once. Flip the theme from the top bar and they follow that too.

The tokens are plain custom properties on the root. That is the whole trick. There is no palette to regenerate and no build to wait on. Set a token and the components that read it update.

Knobs you turn at runtime

On top of the shared tokens, each component exposes its own variables, like --button-radius and --button-tone, and every one falls back to a token. Set a variable and only that instance changes, while everything else stays on the theme.

In the Bootstrap version, reshaping a button meant editing Sass and waiting on a build. Now you set a variable, in the browser. Drag these and the button follows right away.

A knob is also a boundary. A component takes only the knobs it was built for, so you can retint a button or round its corners and it stays a button. When you find yourself reaching past what it offers, that is the signal to name a new modifier and define it once.

Built on Tailwind

Tailwind v4 is the scale engine underneath Stisla. Spacing, type, color, and the build that tree-shakes what you do not use all come from it. We adopt its @theme for tokens and its @layer system for everything on top.

Tailwind has two layers, @layer components and @layer utilities, and most projects use only the second. Tailwind’s own guidance is to extract a component class when you see repetition, but the extracting is left to you. Stisla commits to the component layer, so your team does not assemble it by hand on every screen.

Utilities still win

Committing to components does not take the escape hatch away. Our components sit in @layer components and any utilities you add sit in @layer utilities, which comes later in the cascade. Utilities win by layer precedence, so a one-off override at the call site just works, with no !important and nothing to merge.

No build step

The vanilla release ships precompiled CSS. A component displays with no Tailwind and no Sass present, which is what lets it work in plain HTML, Rails templates, Django pages, and Laravel views. Link the stylesheet and write the markup.

Because the tokens are custom properties on the root, you can still retheme this at runtime. Override --color-primary in a style block or from JavaScript and every component repaints, with no recompile.

A dashboard to start from

Stisla 3 ships with Meridian, a full e-commerce admin template built on the new components. It is seventeen pages of real screens, from orders and products to reports, ready to fork rather than assemble from scratch.

See the Meridian template.

Recolorable illustrations

Empty states need art, and art usually ignores your theme. Stisla 3 ships a set of recolorable empty-state illustrations that read your tokens, so they match your brand color instead of fighting it. Export any of them as SVG or PNG.

Browse the illustration gallery.

One spec, many frameworks

Underneath all of this, Stisla is a design specification. Every implementation follows the same contract over the same tokens. The vanilla implementation is complete and stable, and it is what exists today. React on a headless behavior layer is next, with Vue and Svelte on the roadmap.

Try it

That is Stisla 3. Install it in a new project, or read the docs to see how the tokens, knobs, and layers fit together.