How to Get Started with Beer CSS Without a Build Step

Updated

Beer CSS is designed to work without any build step, configuration, or dependencies — you add a stylesheet link to your HTML and start using its semantic class names. This guide covers the exact setup, how to use components, and the common places people get stuck.

What "No Build Step" Actually Means

Beer CSS ships as plain CSS. There is no npm install required to use it, no bundler, no PostCSS pipeline, and no config file. You reference the stylesheet and write HTML. That is the whole setup.

This matters if you are:

  • Prototyping a page and do not want to scaffold a toolchain
  • Working in a CMS, static HTML file, or server-rendered template where you cannot run a bundler
  • Adding Material Design 3 styling to an existing page incrementally

If you already have a build pipeline, you can still use Beer CSS through it, but nothing about the framework requires one.

Step 1: Add the Stylesheet

Add a single <link> tag in your document <head>, pointing at the Beer CSS stylesheet. The framework is distributed as a CDN-hosted file, so you can reference it directly without downloading anything.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/beercss@3/dist/cdn/beer.min.css" rel="stylesheet">
  <title>My page</title>
</head>
<body>
  <!-- your content -->
</body>
</html>

Expected result: the page now has Beer CSS's base styles applied — typography, colors, spacing, and the Material Design 3 theme variables.

Common snag: if the stylesheet fails to load (wrong path, offline environment, blocked CDN), the page renders as unstyled HTML with no error message. Check the browser's network tab first if nothing looks different.

Step 2: Add the JavaScript (Only If You Need Interactive Components)

Most Beer CSS components are pure CSS and need no JavaScript. Interactive pieces — dialogs, snackbars, and similar — are driven by a small JS file that reads data-ui attributes.

<script src="https://cdn.jsdelivr.net/npm/beercss@3/dist/cdn/beer.min.js"></script>

Add this before the closing </body> tag. If you only use static components (buttons, cards, grids, typography), you can skip it entirely.

Step 3: Write Components with Semantic Class Names

Beer CSS translates Material Design into standard HTML semantics. You do not write custom CSS to get a Material look — you apply the framework's classes to ordinary elements.

A button:

<button>Filled button</button>
<button class="border">Outlined button</button>
<button class="text">Text button</button>

A card:

<article class="card">
  <h5>Card title</h5>
  <p>Some supporting text.</p>
</article>

A navigation bar:

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

Expected result: each of these renders with Material Design 3 styling — correct elevation, corner radius, color roles, and states — without you defining any of it.

Common snag: people often reach for a <div> and then hunt for a class to make it look like a button. Use the semantic element (<button>, <nav>, <article>) and let the framework style it. This is the core workflow Beer CSS is built around.

Step 4: Use It With Any JS Framework

Because Beer CSS is just a stylesheet plus an optional script, it works alongside React, Vue, Svelte, Angular, or plain server-rendered HTML. You are not locked into a component library or a specific runtime.

The practical pattern: keep your framework for state and rendering, and use Beer CSS classes in your markup. For example, in a React component you would write className="card" instead of class="card" — the styling behavior is identical.

Working Without Custom CSS

The framework's stated goal is building modern interfaces without writing custom CSS. In practice this means:

  • Reach for an existing component class before writing a style rule
  • Use the theme variables Beer CSS exposes for colors and spacing rather than hardcoding values
  • Only add your own CSS for genuinely page-specific layout that the framework does not cover

If you find yourself writing a lot of custom CSS, check whether a semantic element or existing class already handles the case — that is usually the faster path.

Quick Verification Checklist

After setup, confirm:

  1. The stylesheet link resolves (network tab shows a 200 for the CSS file).
  2. A plain <button> renders with Material styling, not browser default.
  3. Typography and background colors match Material Design 3 defaults.
  4. Interactive components respond if you included the JS file.

If step 2 fails, the stylesheet is not loading. If step 4 fails but step 2 passes, the JS file is missing or loaded after the elements it needs.

When This Approach Fits — and When It Doesn't

Fits well: prototypes, static sites, CMS templates, server-rendered pages, and any project where adding a bundler is more overhead than value.

Consider a build step instead if: you need to tree-shake unused CSS for a strict performance budget, or your team already has a pipeline and wants Beer CSS versioned through it. Neither is required by the framework — it is a project choice, not a Beer CSS limitation.