Zuri.SASS

A minimal Sass library, inspired by Material 3.

Buttons, text fields, cards, theming, elevation and utilities — Zuri means beautiful in Swahili.

v1.0.0 MIT licensed ~24 KB minified Zero runtime
View components GitHub ↗

What's inside

Theming

Light & dark M3 color maps. Auto-generated .bg-* / .text-*.

Components

Buttons, FAB, cards, tables, header, forms, text fields.

Elevation

Six M3 shadow levels as classes and a @mixin elevation().

Shape

Seven-step corner-radius scale from xs to full.

State layers

M3-spec hover / focus / pressed overlay mixin.

Utilities

Spacing, flex, display, alignment helpers on a 9-step scale.

Responsive

respond-to / respond-below mixins with named breakpoints.

Customizable

Override variables before importing the Sass source.

Install

npm 
npm install zurisass
<link rel="stylesheet" href="node_modules/zurisass/dist/style.css" />
Sass source

Import the source if you want to override variables and inherit mixins.

$primary-color: #0a7;
$base-border-radius: 8px;

@import "zurisass/zuri/index";
From the repo 
git clone https://github.com/Njoxpy/ZuriSASS
cd ZuriSASS
npm install
npm run build:css    # → dist/style.css + dist/style.min.css

Usage

Drop class names on elements — no JavaScript required.

<button class="btn">Primary</button>
<button class="btn-secondary text-on-secondary">Secondary</button>

<div class="text-field text-field--outlined">
  <label class="text-field__label" for="email">Email</label>
  <input class="text-field__input" id="email" type="email" />
</div>

<div class="elevation-2 shape-md p-4">Raised surface</div>

<body class="dark-theme">...</body>

Components

TypographyM3 type scale ButtonsFilled, themed, FAB Text fieldsFilled · Outlined · Error CardsImage · Content · CTA TablesData tables ElevationSix shadow levels ShapeCorner radius scale UtilitiesSpacing · Flex · Text ThemingLight & dark

Roadmap

Planned for future releases: