Skip to main content

Plain HTML + CSS

Step-by-step tutorial for static sites: download tokens, link CSS, set data-atelier-* on <html>, copy markup, and optionally add atelier-plain.js for theme/mode buttons. React copy remains the full component path.

Tutorial

  1. Download the bundle
  2. Link CSS in your page
  3. Set theme & mode on <html>
  4. Add HTML + .atelier-* classes
  5. JavaScript tutorial (optional toggles)

Toolbar above updates token examples to match your preview theme (atelier / light).

1. Download the bundle

Unzip into your site's static folder (e.g. public/ or next to index.html). You need tokens.css and atelier-plain.css; atelier-plain.js is optional (step 5).

3. Set theme & mode on <html>

Variables from tokens.css apply on the element that has both attributes — usually <html>. Selector: [data-atelier-theme="atelier"][data-atelier-mode="light"].

<html lang="en" data-atelier-theme="atelier" data-atelier-mode="light">
  ...
</html>

4. Add HTML + .atelier-* classes

Put class="atelier-root" on body. Use primitives from atelier-plain.css. Per-component snippets live on Install → Plain HTML + CSS when available.

5. JavaScript tutorial (optional toggles)

Skip this if a fixed theme is enough. Otherwise use atelier-plain.js to update data-atelier-theme and data-atelier-mode when visitors click buttons.

  1. Include the script. After unzipping, put atelier-plain.js beside tokens.css and atelier-plain.css. Add to <head>:
    <script src="./atelier-plain.js" defer></script>
    The script does not run by itself — you call AtelierPlain.init() below.
  2. Set a starting theme on <html> (or pass theme / mode to init()). Example:
    <html data-atelier-theme="atelier" data-atelier-mode="light">
  3. Add toggle buttons with catalog theme ids and/or mode. Use .atelier-btn classes so they match your page:
    <!-- Pick a catalog theme id (same as React theme="…") -->
<button type="button" class="atelier-btn atelier-btn--secondary" data-atelier-set-theme="zinc-folio">
  Zinc folio
</button>

<!-- Theme + mode in one click -->
<button
  type="button"
  class="atelier-btn atelier-btn--secondary"
  data-atelier-set-theme="atelier"
  data-atelier-set-mode="dark"
>
  Atelier dark
</button>

<!-- Mode only — keeps the current theme -->
<button type="button" class="atelier-btn atelier-btn--ghost" data-atelier-set-mode="light">Light</button>
<button type="button" class="atelier-btn atelier-btn--ghost" data-atelier-set-mode="dark">Dark</button>
  4. Initialize on DOMContentLoaded. bindControls() wires every data-atelier-set-* button in the document. persist: true saves the choice in localStorage (AtelierPlain.storageKey):
    document.addEventListener("DOMContentLoaded", function () {
  // Apply theme/mode on <html> (reads attributes, optional localStorage)
  AtelierPlain.init({ persist: true });

  // Click handlers for [data-atelier-set-theme] and [data-atelier-set-mode]
  AtelierPlain.bindControls({ persist: true });
});

// Imperative alternative (no buttons):
// AtelierPlain.apply("magenta-edit", "dark", { persist: true });
  5. Try it. Buttons below use the same script as a static site (loaded from this docs server). Click a theme or mode — tokens on the panel should update.

    Try the controls — same data-atelier-set-* hooks as a static page.

  6. Copy a full page. Paths assume files sit in the same folder as index.html.
    <!DOCTYPE html>
<html lang="en" data-atelier-theme="atelier" data-atelier-mode="light">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="./tokens.css" />
  <link rel="stylesheet" href="./atelier-plain.css" />
  <script src="./atelier-plain.js" defer></script>
</head>
<body class="atelier-root">
  <button type="button" class="atelier-btn atelier-btn--secondary" data-atelier-set-theme="zinc-folio">
    Zinc folio
  </button>
  <button type="button" class="atelier-btn atelier-btn--ghost" data-atelier-set-mode="dark">Dark</button>
  <button type="button" class="atelier-btn atelier-btn--primary">Hello</button>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      AtelierPlain.init({ persist: true });
      AtelierPlain.bindControls({ persist: true });
    });
  </script>
</body>
</html>

Limits

  • Plain CSS uses shared token-driven primitives — not every React component has a preset HTML snippet yet. Complex widgets (date picker, dialogs, motion) stay on the React copy path.
  • Per-theme button chrome (glass, volt arcs, etc.) is simplified; tokens and colors still match the catalog.