stylebase

An extremely barebones CSS framework(?) with utility classes, layout classes, and design tokens for content sites and web apps.

Installation

NPM (recommended):

npm i @taurean/stylebase

Direct download: Download stylebase.min.css in dist/.

Usage

Import globally once in your project as one of the earliest CSS files. This ensures design tokens and utility classes are available throughout your project.

@import '@taurean/stylebase';

Important: Only import once to avoid duplicate styles and ensure proper cascade order.

What's Included

• Color system - OKLCH-based color palette with 11 shades per hue
• Fluid typography - Responsive font sizes using clamp()
• Fluid spacing - Responsive spacing scale using clamp()
• CSS Grid layout - 12-column grid with responsive gutters
• Layout utilities - Waterfall spacing, root container, grid helpers
• Sensible defaults - Base styles for HTML elements

Built from best practices and resources including Evil Martians' Harmony color palette, Cube CSS methodology, and Utopia fluid scales.

contributing to stylebase + publishing changes

once changes are merged into main, run one of the release scripts (npm run release:patch, npm run release:minor, or npm run release:major) to minify CSS, update package.json version, and publish changes to NPM

• use npm run build to update the minified CSS in dist/, useful for testing output before publishing
• use npm run build:preview to update a non-minified css file in dist/
• use npm run dev for live reload via browsersync, to test the example HTML files while making style changes. (files in examples/ do not themselves have CSS files. The html files assume to be impacted by global CSS properties and utility classes built into stylebase)
• using release scripts assumes that the remote url for the main releases is labeled gh