Installation

Get Fluid Framework running in under a minute. No build step required.

Option 1: CDN (Quickest)

Add the built file to your HTML <head>, pinned to an exact version:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluid-theme/core@2.0.0/dist/fluid.min.css">

Optional files, each linked after the core one: dist/fluid-fonts.min.css (the Newsreader and Schibsted Grotesk faces), dist/fluid-toc.min.css (the table of contents) and dist/fluid-nav.min.css (the compact "+" menu, the icon bar and sticky links). Never use @latest on a real site: a major release changes the look.

Option 2: npm (how our sites do it)

npm install --save-exact @fluid-theme/core

Copy node_modules/@fluid-theme/core/dist/ into the site's public folder at build, and link the copied fluid.min.css. The exact pin means every update arrives as its own pull request, which the site's checks test before it merges

For automatic update pull requests, a site with @fluid-theme/core in package.json copies starters/workflows/dependabot.yml to .github/dependabot.yml. A static site that vendors the CSS (no npm dependency) copies starters/workflows/update-fluid-theme.yml to .github/workflows/update-fluid-theme.yml instead; that workflow skips package.json sites. One per site, never both (see starters/workflows/README.md).

In a JS bundler (Vite, Astro, Webpack, etc.) the package exports name the files:

import '@fluid-theme/core';                // dist/fluid.min.css
import '@fluid-theme/core/fonts';          // dist/fluid-fonts.min.css (optional)
import '@fluid-theme/core/themes/swiss';   // themes/swiss.css (optional child theme)
import '@fluid-theme/core/fonts-archivo';  // dist/fluid-fonts-archivo.min.css (optional)
import '@fluid-theme/core/themes/gallery'; // themes/gallery.css (optional child theme)
import '@fluid-theme/core/fonts-bodoni';   // dist/fluid-fonts-bodoni.min.css (optional)
import '@fluid-theme/core/toc';            // dist/fluid-toc.min.css (optional)
import '@fluid-theme/core/nav';            // dist/fluid-nav.min.css (optional)
import '@fluid-theme/core/zero';           // dist/fluid-zero.min.css (alternate tiny base)

Option 3: Download

Download from GitHub Releases or clone the repo:

git clone https://github.com/Agile-Media-Agency/the-fluid-theme.git

Then link to src/fluid.css directly from your project.

Minimal Template

A complete starter page with navigation, hero section, card, and button:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Fluid Site</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluid-theme/core@2.0.0/dist/fluid.min.css">
</head>
<body>

  <nav class="nav">
    <a class="nav__brand" href="/">My Site</a>
    <ul class="nav__menu" role="list">
      <li><a class="nav__link" href="/about">About</a></li>
      <li><a class="nav__link" href="/work">Work</a></li>
      <li><a class="nav__link" href="/contact">Contact</a></li>
    </ul>
  </nav>

  <main>
    <section class="hero">
      <h1>Welcome to Fluid</h1>
      <p>A modern CSS framework built on physics principles, not utility classes.</p>
      <button>Get Started</button>
    </section>

    <article class="card">
      <h2>Semantic HTML</h2>
      <p>Write meaningful markup. Let the design system handle the styling.</p>
      <button class="secondary">Learn More</button>
    </article>
  </main>

  <footer>
    <p>Built with Fluid Framework</p>
  </footer>

</body>
</html>

What's Included

• Semantic components & sections -- buttons, cards, modals, tooltips, tabs, accordions, nav, TOC, and more
• Content grid & layout system -- .content-grid (content, wide, full bleed), .container, .grid, .stack, .cluster
• ~20 :root knobs + child themes -- restyle any site via :root custom properties; ships themes/swiss.css and themes/gallery.css
• Light / Dark / Auto modes -- single light-dark() colour system with <html data-theme> override
• Zero JavaScript required for core styling and layout (optional toc.js and fit-text.js enhance progressively)

Browser Support

Fluid Framework uses modern CSS features including @layer, color-mix(), logical properties, and container queries. These browser versions provide full support.

Next Steps

• STATUS.md -- Current architecture, :root knobs, and opt-in modules
• Migrating from 1.x -- Keeping the 1.x look or adopting Base v2
• Automatic Updates -- Weekly update PR workflow for sites
• Getting Started -- First steps and configuration
• Component Reference -- Full component API and usage