KatanaKit CSS
A lightweight, modular SCSS mini-framework. Design tokens, utility classes and layout mixins — zero runtime overhead.
Why KatanaKit CSS?
KatanaKit CSS is a pure SCSS framework inspired by the utility-first approach of Tailwind CSS, but without a build pipeline you don't control. Everything is generated at compile time from !default design-token maps.
- Design tokens — fonts, spacing, radius, shadows, z-layers, durations and easings as SCSS maps, emitted as CSS custom properties.
- Color system — 6 palettes × 7 shades + special colors, with utility classes, hover variants and an automatic dark theme.
- Layout mixins — breakpoints (7 tiers, mobile-first), a full CSS Grid toolkit and flexbox helpers.
- Utility classes — spacing, sizing, flex, effects, typography and layout generated from maps.
@apply-style composition — a tiny registry system so you can compose utilities inside your components.
Quick install
bash
npm install katanakit-jsscss
// Full stylesheet (reset + tokens + utilities)
@use "katanakit-js/scss/main";
// Or compose your own from modules
@use "katanakit-js/scss/functions" as f;
@use "katanakit-js/scss/variables" as v;
@use "katanakit-js/scss/mixins" as m;Explore the framework
| Section | Pages |
|---|---|
| Getting Started | Install and first styles |
| Foundations | Design Tokens · Colors · Breakpoints · Dark Mode · @apply |
| Mixins | Grid · Flexbox |
| Utilities | Spacing · Display · Typography · Effects · Grid Classes and 20 more |
| Reference | Functions · API Reference · Architecture |