Getting Started

Quick start

Minium CSS styles semantic HTML elements by default, and adds layout primitives and common components. The library requires no JavaScript runtime, Sass pipeline, or configuration step.

Use from CDN

Load the minified stylesheet from jsDelivr without installing anything:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@troennes/minium@0.1.0/dist/minium.min.css">

Install with npm

npm install @troennes/minium

In a bundled application, import the core stylesheet from your application's entry point:

import "@troennes/minium";

To use the minified build explicitly, import its package subpath:

import "@troennes/minium/min";

If your tools cannot import CSS from a package, copy the complete node_modules/@troennes/minium/dist/ directory into your project's public assets.

Build from source

Choose this option if you want to modify Minium's source CSS before using it. Building requires Node.js 22 or later.

  1. Download the latest source ZIP from GitHub.
  2. Extract the ZIP and open a terminal in the extracted minium-main directory.
  3. Install the build dependencies and build Minium: 
    npm install
npm run build
  4. Copy the complete dist/ directory into your project's public assets.

Load the stylesheet

If you copied a dist/ directory from the npm package or a source build, link the core stylesheet from your page. Keep the included fonts/ directory beside the stylesheet so its relative font URLs continue to work. Load your project's CSS after Minium so project rules can override the library cleanly.

<link rel="stylesheet" href="/styles/minium.min.css">
<link rel="stylesheet" href="/styles/project.css">

Start with semantic HTML

Minium CSS styles common document structure, forms, tables, buttons, links, and typographic elements by default. Add classes only when you need layout, a component, or a modifier.

Red lead notes

Minium is the historic name for red lead, an orange-red lead oxide pigment.

Next steps