klods

Vanilla HTML demo

One <link> tag. Plain BEM classes. No build step, no framework required.

Drop the klods-css stylesheet into any HTML file and start building with plain BEM classes — no build step, no bundler, no framework required.

This is not an exhaustive demo — see the full docs for every component and option available.

Get started

A simple page structure with a collapsible sidebar on mobile looks like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My page</title>

    <!-- Klods CSS import -->
    <link rel="stylesheet" href="https://unpkg.com/klods-css/dist/klods.min.css" />
  </head>

  <body>
    <div class="klods-page
                klods-page--with-sidebar
                klods-page--sticky-header">

      <header class="klods-header">
        <!-- Hamburger button — only visible on mobile via CSS -->
        <button type="button" class="klods-sidebar-toggle"
                aria-label="Toggle sidebar"
                onclick="klods.toggleSidebar(this)"></button>
        <strong>My app</strong>
      </header>

      <aside class="klods-sidebar">
        <nav>
          <ul class="klods-toc">
            <li><a href="/" class="klods-toc__link klods-toc__link--active">Home</a></li>
            <li><a href="/about" class="klods-toc__link">About</a></li>
          </ul>
        </nav>
      </aside>

      <main class="klods-content">
        <h1>Hello, klods</h1>
      </main>

      <footer class="klods-footer">
        <span>© 2026 My app</span>
      </footer>
    </div>

    <!-- Optional JS import -->
    <script src="https://unpkg.com/klods-css/dist/klods.js"></script>
  </body>
</html>

The klods-sidebar-toggle button is hidden by CSS on wide viewports and revealed on mobile. Add the klods.js script tag and call klods.toggleSidebar(this) from the button's onclick — it handles the backdrop-dismiss and nav-link-close behaviour automatically on first call.

Buttons

<button class="klods-button klods-button--primary" type="button">
  Save
</button>

Badges

default accent success danger

<span class="klods-badge klods-badge--success">active</span>

Alerts

Info — something worth knowing.

Success — changes saved.

Warning — double-check before continuing.

Danger — this action is irreversible.

<div class="klods-alert klods-alert--success">
  Changes saved.
</div>

Cards

Standard

Surface colour, border, rounded corners.

Elevated

Drop shadow instead of border.

<div class="klods-card klods-card--elevated">
  <div class="klods-card__title">Title</div>
  <div class="klods-card__body">Content</div>
  <div class="klods-card__footer">…</div>
</div>

Nav

<nav>
  <ul class="klods-nav__list">
    <li><a href="/" class="klods-nav__link klods-nav__link--active">Home</a></li>
    <li><a href="/about" class="klods-nav__link">About</a></li>
  </ul>
</nav>

Table

Name	Role	Status	Joined
Alice	Engineer	active	Jan 2024
Bob	Designer	away	Mar 2024
Carol	Manager	inactive	Aug 2023
Dave	Engineer	active	Nov 2023

<table class="klods-table klods-table--striped">
  <thead>…</thead>
  <tbody>…</tbody>
</table>

Box

alpha

beta

gamma

delta

<div class="klods-box">content</div>

Layout

This page itself demonstrates the full shell. The outer wrapper carries three classes:

<div class="klods-page
           klods-page--with-sidebar
           klods-page--sticky-header">

  <header class="klods-header">…</header>
  <aside  class="klods-sidebar">…</aside>
  <main   class="klods-content">…</main>
  <footer class="klods-footer">…</footer>

</div>

Add klods-content--narrow to cap the content width at a comfortable reading measure.

Utility classes

klods-stack — vertical flex column

one

two

three

klods-cluster — wrapping flex row

alpha

beta

gamma

delta

epsilon

klods-grid klods-grid--cols-3