Why Lumen?

Lumen is a modern, lightweight CSS framework for developers who want a good-looking page without learning class names. Link one stylesheet and style plain HTML for landing pages, docs, blogs and web panels.

Classless by design

Headings, lists, tables, forms, buttons and code blocks look good without a single class.

Tiny footprint

One stylesheet of about 4 KB gzipped. No dependencies, no build step, no JavaScript required.

Dark mode built in

Follows the system theme automatically, with an optional one-line theme switch for visitors.

Responsive out of the box

Fluid typography, an auto-fit card grid and scrollable tables work on every screen size.

Easy theming

Change one CSS variable and the tints, glows, focus rings and gradients follow.

Polished components

Forms, buttons, navigation, tables, images, video and code blocks are ready for real projects.

Install

Add one line to your <head>. That's it.

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/7AS1N/Lumen/lumen.css">

Download

Grab lumen.css from the repo, drop it in your project and link it:

<link rel="stylesheet" href="lumen.css">

Starter template

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My site</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/7AS1N/Lumen/lumen.css">
</head>
<body>
  <header><h1>Hello</h1></header>
  <main><p>Styled with zero classes.</p></main>
</body>
</html>

Layout

A section that contains articles becomes a responsive auto-fit grid. An aside beside your content becomes a sticky sidebar. Resize this window to watch it flow.

Classless

Elements are styled by what they are.

Lightweight

One small stylesheet and nothing else.

Dark mode

Follows your system theme, with an optional one-line switch.

View code

<section>
  <article><h3>Classless</h3><p>...</p></article>
  <article><h3>Lightweight</h3><p>...</p></article>
  <article><h3>Dark mode</h3><p>...</p></article>
</section>

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs get a comfortable measure and line height, with links, bold, highlights and inline code all styled.

Simplicity is the ultimate sophistication.

Unordered list item
Another item

View code

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>A paragraph with <a href="#">a link</a> and <mark>highlight</mark>.</p>
<blockquote>A quote.</blockquote>

Forms

Wrap controls in a label and a form. Text inputs, textarea, select, checkbox and radio are all styled.

View code

<form>
  <label>Email
    <input type="email" placeholder="ada@example.com">
  </label>

  <label>Topic
    <select>
      <option>General question</option>
      <option>Bug report</option>
    </select>
  </label>

  <label>Message
    <textarea></textarea>
  </label>

  <fieldset>
    <legend>Preferences</legend>
    <label><input type="checkbox"> Email me updates</label>
    <label><input type="radio" name="plan"> Free</label>
  </fieldset>

  <p>
    <button type="submit">Send</button>
    <button type="reset">Reset</button>
  </p>
</form>

Buttons

Submit buttons are filled with a gradient. type="button" and type="reset" become outlined. Use role="button" on a link to make it look like a button.

Link button

View code

<button>Primary</button>
<button type="button">Secondary</button>
<a role="button" href="#">Link button</a>
<button disabled>Disabled</button>

Theming

Every color is a CSS variable. Tints, glows, focus rings and the select arrow are all derived from --accent, so changing it re-themes everything. Try it:

Change the accent

Override the variables after the stylesheet. One color works for both themes, or use light-dark() to give each theme its own.

:root {
  --accent: #0ea5e9;
  --accent-2: #22d3ee;

  /* or a separate color for light and dark */
  --accent: light-dark(#0ea5e9, #38bdf8);
}

Add a theme switch

The framework follows the system theme by default. To let visitors switch, add the optional script in your <head> and drop a button anywhere. It fills itself with a sun or moon icon and remembers the choice.

<script src="https://cdn.jsdelivr.net/gh/7AS1N/Lumen/lumen-theme.js"></script>

<button data-theme-toggle></button>

No JavaScript? Force a theme with <html data-theme="dark"> or data-theme="light".

Frequently asked questions

What is a classless CSS framework?

A classless CSS framework styles standard HTML elements directly, so you never add class names. Write semantic HTML such as <h1>, <form> and <table> and it is styled automatically.

How big is Lumen?

The stylesheet is about 15 KB unminified and about 4.4 KB gzipped, with no dependencies. The optional theme switch script adds about 1.2 KB gzipped.

How do I install Lumen?

Add one <link> tag to your <head> from the jsDelivr CDN, or download lumen.css and link it locally. See Install for the code.

Does Lumen support dark mode?

Yes. Lumen follows the visitor's system theme automatically. You can also force a theme with data-theme or add a theme switch button with one script. See Theming.

Do I need JavaScript or a build step?

No. Lumen is a single CSS file. The theme switch script is optional, and there is nothing to compile or install.

How is Lumen different from other lightweight CSS frameworks?

Like Water.css, Sakura and Simple.css, Lumen is classless. It also turns a section of articles into a responsive card grid and includes polished form controls, tables, buttons and one-variable theming, which suits landing pages and web panels. Unlike class-based frameworks such as Pure.css or Bootstrap, you do not need to learn or write class names.

Which browsers does Lumen support?

Lumen targets modern browsers: Chrome and Edge 123+, Firefox 121+ and Safari 17.5+. It uses :has(), color-mix() and light-dark().

Is Lumen free to use?

Yes. Lumen is open source under the MIT license, so you can use it in personal and commercial projects.