INSTALLATION · HTML AND CSS

Using HTML + CSS

Use the framework compiler directly—no JavaScript framework or bundler required. The CLI scans your HTML and writes a normal static CSS file.

✓

The generated file has no browser runtime. Upload it beside your HTML just like any other stylesheet.

Create a small npm project

Initialize package metadata and install the Coordiation compiler as a development dependency.

Terminal

npm init -y
npm install -D @coordiation/css

Create the source stylesheet

The input file owns the framework marker, custom theme tokens, utilities, variants, and ordinary project CSS.

src/coordiation.css

@coordiation;

@co-theme {
  --co-color-brand-500: oklch(62.3% 0.214 259.815);
}

Add build scripts

Watch while developing and minify for production. Scanning the project root is safe because dependency and output directories are ignored.

package.json

{
  "scripts": {
    "dev": "coordiation-css -i src/coordiation.css -o dist/coordiation.css --content . --watch",
    "build": "coordiation-css -i src/coordiation.css -o dist/coordiation.css --content . --minify"
  },
  "devDependencies": {
    "@coordiation/css": "0.1.0"
  }
}

Load the generated file

Reference the output CSS from your HTML. Keep dist/coordiation.css generated rather than editing it manually.

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./dist/coordiation.css" />
  </head>
  <body class="co-bg-white co-text-black">
    <main class="co-grid co-min-h-screen co-place-items-center">
      <h1 class="co-text-6xl co-font-bold">Built with Coordiation</h1>
    </main>
  </body>
</html>

Build or watch

Leave watch mode running during development. Run the production command before uploading the site.

Terminal

npm run dev

# production
npm run build

PRODUCTION CHECKLIST

Ship predictable CSS

Keep the scanner boundary and generated stylesheet explicit so people, CI, and AI agents produce the same result.

Open MDN CSS documentation →

Upload both the HTML files and the generated dist/coordiation.css.
Do not author changes directly inside the generated CSS output.
Use complete class names in HTML, JavaScript templates, and Markdown content.
Run the minified production build after adding or removing utilities.

Previous← Using SvelteKit NextUsing PHP →