v0.1.0 · SCSS-native · Zero-JS framework

A small, themeable CSS framework you compile only what you ship.

Krysalicss pairs Bulma-style class semantics with Picnic-style restraint and a first-class multi-theme system built on CSS custom properties. Every component is a self-contained SCSS plugin gated by a feature flag, so importing the framework adds nothing you did not opt into.

Start the tutorial Reference Why Krysalicss

< 15 KB gzipped SCSS @use only Light + dark out of the box No JS runtime

Install

# pnpm (recommended)
pnpm add @adnap/krysalicss

# npm
npm install @adnap/krysalicss

# yarn / bun / deno
yarn add @adnap/krysalicss
bun add @adnap/krysalicss
deno add npm:@adnap/krysalicss

// app.scss
@use '@adnap/krysalicss';

// or, configured (only what you ship)
@use '@adnap/krysalicss' with (
  $feature-list: (element-button, module-card, layout-flex, typography-base, typography-title)
);

What's in the box

Modular by default

Every component is a SCSS plugin with its own _variables.scss and _plugin.scss. Configure with a single @use ... with (); skip what you don't need; never ship dead CSS.

Multi-theme, runtime-switchable

Themes are CSS custom property layers. Light + dark ship by default. Add yours via the documented theme/_create.scss factory. Switch at runtime with a class: no rebuild.

Intrusive or scoped

Every selector is a configurable variable. Apply globally to bare HTML tags, or scope to a class prefix or web-component shadow root without forking the source.

Bring your own theme

The default entry includes both light and dark themes. To ship one without the other, or to compose with a custom theme, import the forwards-only entry and pull the themes you want:

// app.scss: bring your own theme
@use '@adnap/krysalicss';
@use '@adnap/krysalicss/theme/dark';

Live demo

Toggle the theme switcher above. Every component on this site: buttons, cards, the grid you're reading on: re-renders without a roundtrip. That's the framework. The whole framework.

Color combinations