Installation

µCSS is a single CSS file — no JavaScript, no build step. Pick the method that fits your workflow.

CDN #

The fastest way to get started. Add a <link> tag to your HTML:

<link rel="stylesheet" href="https://unpkg.com/@digicreon/mucss/dist/mu.fuchsia.css">

With Subresource Integrity (SRI):

<link rel="stylesheet"
      href="https://unpkg.com/@digicreon/mucss@1.4.6/dist/mu.fuchsia.css"
      integrity="sha384-rl/ly0N+z8l9V2HF6xRMd/BFnQANb3d3ejvpnpwB2FrtBcg+lMRnQvo2ivIwlFsj"
      crossorigin="anonymous">

Replace mu.fuchsia.css with any theme file — e.g. mu.blue.css, mu.amber.css, mu.jade.css. Each theme file has its own SRI hash.

The default file mu.css uses the Azure theme.

npm #

Install the package:

npm install @digicreon/mucss

Then import the theme you want in your HTML or bundler entry point:

<link rel="stylesheet" href="node_modules/@digicreon/mucss/dist/mu.fuchsia.css">

Or with a CSS import (if your bundler supports it):

@import "@digicreon/mucss/dist/mu.fuchsia.css";

Direct download #

Download the CSS file directly from the GitHub repository and include it in your project:

<link rel="stylesheet" href="mu.fuchsia.css">

Available themes #

µCSS ships with 21 theme files. Each is a standalone CSS file:

Theme	File	SRI hash (SHA-384)
Default (Azure)	`mu.css`	`sha384-uojKNR6j8R65TQRwvrrzeB3YEuQB7Em7BmmpYz4zvVLW8yIpj0O13674IjrexPlX`
Red	`mu.red.css`	`sha384-t61MLE/4RctctubzoydV8aZLLpcHphwNBoAoTx8PmLgPS/6uhXpvSbCwk0cfuoYQ`
Pumpkin	`mu.pumpkin.css`	`sha384-F+5D3itqFtT12J7nAxfz8MACfbRA+namlWusgD+HaixtnGMtg8e1LkR+OGxSRj2+`
Orange	`mu.orange.css`	`sha384-ni9rEcXvxSBxwQ6mzYktz0aL4cPi5kaspJlTZPdEwXqm3/6cl3TsmQkPLQxzozUi`
Amber	`mu.amber.css`	`sha384-la4vwJ8BbmcWK1t4bhFAsdV6raaalzoT+Eh+3HhTrZuCcTCg61gyXYL79/9O5n1h`
Yellow	`mu.yellow.css`	`sha384-5FbGlmACLInL2cTc/verlNunmaQ2kt+gzOkiLeb/mLDWMIiwr4USvhA17mcC6/0u`
Lime	`mu.lime.css`	`sha384-bWcwRlUIfJ5VrFNUUbpchU4JfGcq5mWtDygQkeAs2IS1psCLiJYphiEN5oeGS9Qo`
Green	`mu.green.css`	`sha384-HZP9K3wb9X+cqrjuIRCC+kZ0FhoBp3zk7ayTZI/D8QDgLEydy2GE6QdHhKl1rEuY`
Jade	`mu.jade.css`	`sha384-EPeHNp3/0CJJbEdolkA7AtQdHmww2So8wqpnD21rzA9VqA1rv2B0CfZdwEcZMuZb`
Cyan	`mu.cyan.css`	`sha384-BmZ60DtmNztMq9gMwR7716p3oYG/gB/afvFsAerQ48olZg0CVwUne1RpXjlmYfHl`
Azure	`mu.azure.css`	`sha384-uojKNR6j8R65TQRwvrrzeB3YEuQB7Em7BmmpYz4zvVLW8yIpj0O13674IjrexPlX`
Blue	`mu.blue.css`	`sha384-cXMR2QKdCT4k5NuaGDtBEScvRoN9lBzsvlLDzZXq3VFMqtTE+RR7dauPp8u2/AAO`
Indigo	`mu.indigo.css`	`sha384-KKxDLLcYXfKiQyqJw3rwzqDj3xD1MKPpq4Jkc3vyAZWUAl4aVNMzfpnNGbqPfglm`
Violet	`mu.violet.css`	`sha384-rV+mTRFc2v9JMO0uLLZcxJV0uTRan7VWOmI3N9YC5+OpwIhmcwlvyl/bx2DGzthZ`
Purple	`mu.purple.css`	`sha384-cWKBwIJxGnkC2VAvIOyOj2YSS3zIWCePH8S/imsVQ2WGgWhGnS9/eadyUUXPnNNc`
Fuchsia	`mu.fuchsia.css`	`sha384-rl/ly0N+z8l9V2HF6xRMd/BFnQANb3d3ejvpnpwB2FrtBcg+lMRnQvo2ivIwlFsj`
Pink	`mu.pink.css`	`sha384-HZqnM/a1Ek3hxKIvjMIXP+2Yd3usIma4vqECD71xzjHCy0bTdFiHU1Y30nfKX3Xa`
Sand	`mu.sand.css`	`sha384-esuROXXcyqwRLglvNp+SijyItCr3RB3LFtHcte7vT1OodwVA1R3jYb8OqvMZShoM`
Grey	`mu.grey.css`	`sha384-3FfeDaJ8/mQSU7Wai3XqNILjP4KS0utDhgTN0qGeJ+3sBAQjfzDvMzs2ZY/V9lYM`
Zinc	`mu.zinc.css`	`sha384-jxgEwc6uCMC8v84Pad3cYh7AOcH+837x89BZwVINyyRF31SCkhI/KAdP0MXlO7Um`
Slate	`mu.slate.css`	`sha384-3o2BE02iRQSL19+c6smr3RZfP/G2pcaSLDQGAIY6xER2I4Pth45oRJRZ0xjKy/FO`

Preview all themes on the Themes page.

Starter template #

A minimal HTML page using µCSS:

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My page</title>
    <link rel="stylesheet" href="https://unpkg.com/@digicreon/mucss/dist/mu.fuchsia.css">
</head>
<body>
    <main class="container">
        <h1>Hello, µCSS!</h1>
        <p>This page is styled with µCSS. No classes needed for basic elements.</p>
        <button>A styled button</button>
    </main>
</body>
</html>

That's it — semantic HTML elements are styled automatically. Add color classes, dark mode, or custom variables when you need more control.