Every element on this page is plain, semantic HTML. There are no utility classes or component wrappers. A small documentation script powers the interactive demos; neither the script nor the demo markup is part of the stylesheet.

Typography

Heading one

Heading two

Heading three

Heading four

Heading five

Heading six

Body text uses a system sans stack, a comfortable line height, and a readable measure. Sentences wrap without leaving awkward single words behind. A strong phrase carries weight, an emphasized phrase carries stress, and a link is always underlined and easy to find.

Inline code looks like const answer = 42, keyboard input looks like Ctrl + K, and a highlighted phrase uses a quiet accent wash. You can also use HTML, small print, and outdated text.

Lists

• Unordered item
• Another item
  • Nested item
  • Another nested item

1. First step
2. Second step
3. Third step

Classless

Styling semantic elements instead of requiring utility classes.

Measure

The maximum width of a line of body text.

Quotes and rules

The best interface is the one that gets out of the way of the content.

---

Code

<main>
  <h1>Hello, world</h1>
  <p>Write HTML. Get a website.</p>
</main>

Tables

Quarterly totals

Quarter	Revenue	Change
Q1	$24,000	+8%
Q2	$31,500	+31%
Q3	$36,200	+15%
Total	$91,700	+18%

Forms

Account

Name Email Plan FreePersonalTeam Bio

Notifications

Email updates Weekly digest

Theme

System Light Dark

Volume Attachment Disabled field Save changes Unavailable

Components

Field notes

Published August 12

A short piece of standalone content. Articles get a surface, a border, and enough padding to read as a unit.

What is a classless stylesheet?

A stylesheet that targets semantic elements instead of requiring utility classes.

Does the stylesheet ship JavaScript?

No. The stylesheet is CSS only. This page uses a small documentation script for the interactive examples.

Progress 68% Disk usage 62%

Navigation

Loading

Save changes

Fetching entries

Set aria-busy="true" on a button, paragraph, or region. The animated ellipsis uses the current text color and respects reduced motion.

Dialogs

Modal dialog

Open modal dialog

Dialog title

Dialogs use the same tokens as the rest of the page. This one is opened with the native showModal() method.

Close

Modal dialogs make the rest of the page inert and trap focus. Opening and closing requires a small amount of JavaScript.

Non-modal dialog

Open non-modal dialog

Dialog title

This dialog is non-modal: the page stays interactive and focus is not trapped.

Close

Non-modal dialogs use the popover attribute. Opening, light dismissal, and closing are handled by the browser without a script. The docs site opts this one into a modal-like ::backdrop; EldanCSS leaves popover backdrops transparent.

Popovers

Open menu

Popovers are native and non-modal. The stylesheet styles [popover] like a dialog surface, and a nav inside it becomes a vertical menu. The demo script only closes the menu after a link is chosen.

Layout

Layout stays native. These examples use inline CSS Grid and Flexbox so EldanCSS does not need utility classes.