Classless Mode Preview

Semantic HTML. Polished UI.

This page shows how classless.css styles native HTML elements without class names. Wrap content in <article> — everything looks great out of the box.

Start With Typography Explore Themes

Zero classes Native tags first

article scopes the styles

9 themes via data-theme

How It Feels

<article> <h2>Launch
                                        faster</h2> <p>Write plain
                                        markup.</p>
                                        <button>Ship</button>
                                        </article>

Mode idea: semantic markup gets a readable visual layer right away, without manually stacking utility classes.

Use Cases

Documentation, blogs, admin pages, MVPs, articles, and internal panels where speed and consistency matter.

At A Glance

17+ element groups

100% semantic-first

58 KB minified classless.css

Foundation First Start with typography, inline content and tables to evaluate default reading rhythm.

Interactive Elements Jump to forms, buttons and dialogs to inspect native controls and affordances.

Theme System Review how the same semantic markup responds to theme tokens without changing HTML.

🎨 Themes

9 built-in themes via data-theme on <html>. Click a card to switch the entire page theme.

Theme switcher

dark

data-theme="dark"

light

data-theme="light"

red

data-theme="red"

blue

data-theme="blue"

green

data-theme="green"

cyan

data-theme="cyan"

yellow

data-theme="yellow"

pink

data-theme="pink"

purple

data-theme="purple"

<html data-theme="dark">
<html data-theme="light">
<html data-theme="red">
<html data-theme="blue">
<html data-theme="green">
<html data-theme="cyan">
<html data-theme="yellow">
<html data-theme="pink">
<html data-theme="purple">

🎨 Design Tokens

CSS-переменные из _base.css — единый источник правды для всех стилей. Меняй здесь — применяется везде.

Semantic colors

primary

--color-primary

accent

--color-accent

success

--color-success

error

--color-error

warning

--color-warning

muted

--color-muted

light

--color-light

surface

--color-dark-secondary

--color-primary
--color-accent
--color-success
--color-error
--color-warning
--color-muted
--color-light
--color-dark-secondary

Primary scale

100

200

300

400

500

600

700

800

900

--color-primary-100 … --color-primary-900

Neutral scale

100

200

300

400

500

600

700

800

900

--color-neutral-50 … --color-neutral-900

Font families

Aa Gg

Sans · body

--font-sans (Inter)

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123

Aa Gg

Display · headings

--font-heading (Poppins)

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123

Aa Gg

Mono · code

--font-mono (Roboto Mono)

const x = 42;
fn() => { return true }

--font-sans: var(--font-inter)
--font-heading: var(--font-poppins)
--font-mono: var(--font-roboto-mono)

Font sizes

--fs-xs

The quick brown fox jumps

12px

--fs-sm

The quick brown fox jumps

14px

--fs-base

The quick brown fox jumps

16px

--fs-lg

The quick brown fox

18px

--fs-xl

The quick brown fox

20px

--fs-2xl

The quick brown

24px

--fs-3xl

The quick brown

30px

--fs-4xl

The quick

36px

--fs-5xl

Display

48px

--fs-hero

Hero

96px

--fs-xs: 12px --fs-sm: 14px --fs-base: 16px
--fs-lg: 18px --fs-xl: 20px --fs-2xl: 24px
--fs-3xl: 30px --fs-4xl: 36px --fs-5xl: 48px
--fs-hero: 96px (+ fluid: --fs-f-base, --fs-f-xl…)

Spacing scale

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-5

20px

--space-6

24px

--space-8

32px

--space-10

40px

--space-12

48px

--space-16

64px

--space-20

80px

--space-24

96px

--space-1: 4px --space-2: 8px --space-3: 12px
--space-4: 16px --space-6: 24px --space-8: 32px
--space-10: 40px --space-12: 48px --space-16: 64px

Border radius

none
0px

sm
6px

md
12px

lg
20px

xl
30px

2xl
40px

full
9999px

--radius-none: 0px --radius-sm: 6px
--radius-md: 12px --radius-lg: 20px
--radius-xl: 30px --radius-2xl: 40px
--radius-full: 9999px

Shadows

--shadow-sm

--shadow-md

--shadow-lg

--shadow-primary

--shadow-accent

--shadow-glow

--shadow-sm --shadow-md --shadow-lg
--shadow-primary --shadow-accent --shadow-glow

⚡ Variants

data-variant attribute from _native.css — applies semantic color to native elements without class names.

Button variants

<button>Default</button>
<button data-variant="accent">Accent</button>
<button data-variant="success">Success</button>
<button data-variant="warning">Warning</button>
<button data-variant="error">Error</button>
<button data-variant="dark">Dark</button>
<button data-variant="light">Light</button>

Input variants

Link variants

Default link Accent Success Warning Error Dark

<a href="#">Default link</a>
<a href="#" data-variant="accent">Accent</a>
<a href="#" data-variant="success">Success</a>
<a href="#" data-variant="warning">Warning</a>
<a href="#" data-variant="error">Error</a>
<a href="#" data-variant="dark">Dark</a>

𝐓 Headings & Typography

Headings, paragraphs, blockquotes and text formatting from _native.css. No classes needed inside <article>.

Headings h1–h6

Heading 1 — The quick brown fox

Heading 2 — jumps over

Heading 3 — the lazy dog

Heading 4 — Pack my box

Heading 5 — with five dozen

Heading 6 — liquor jugs

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraph & text styles

A regular paragraph with bold text, italic text, and small text. Mix them for bold italic combinations.

Use underline sparingly. ~~Strikethrough~~ for outdated content. Highlighted text draws attention.

Design is not just what it looks like and feels like. Design is how it works. — Steve Jobs

<p>A paragraph with <strong>bold</strong>, <em>italic</em>.</p>
<p><mark>Highlighted</mark>, <s>strikethrough</s></p>
<blockquote>
Quote text here.
<cite>— Author</cite>
</blockquote>

🔗 Inline & Links

Inline semantic elements styled by _native.css: links, citations, definitions, abbreviations, and more.

Links

Regular link — Active (aria-current) — External link ↗

<a href="#">Regular link</a>
<a href="#" aria-current="page">Active link</a>
<a href="#" target="_blank">External ↗</a>

Inline semantic elements

Cited work — Inline quotation — Definition term — variable — H₂O — E = mc²

~~Deleted text~~ — Inserted text — Highlighted text — HTML

<cite>Cited work</cite>
<q>Inline quotation</q>
<dfn>Definition</dfn>
<var>variable</var>
H<sub>2</sub>O
<del>Deleted</del>
<ins>Inserted</ins>
<mark>Highlighted</mark>
<abbr title="HyperText Markup Language">HTML</abbr>

≡ Lists

Unordered, ordered, and nested lists styled by _native.css.

Unordered list

First item
Second item with a link
Third item
- Nested item one
- Nested item two
Fourth item

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item
    <ul>
      <li>Nested item</li>
    </ul>
  </li>
</ul>

Ordered list

Design the layout
Write semantic HTML
Apply classless CSS
1. Link the stylesheet
2. Set data-theme
Ship it

<ol>
  <li>Design the layout</li>
  <li>Write semantic HTML</li>
  <li>Apply classless CSS</li>
  <li>Ship it</li>
</ol>

⌨ Code

Inline code, keyboard shortcuts with <kbd>, and <pre> blocks styled by _native.css.

Inline code & kbd

Use const for block-scoped constants. Press Ctrl + Shift + I to open DevTools.

Run npm install then npm run dev to start the server.

<p>Use <code>const</code> for constants.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

Pre block

function greet(name) {
  return 'Hello, ' + name + '!';
}

console.log(greet('World'));

<pre>
  <code>
    function greet(name) {
      return 'Hello, ' + name + '!';
    }
  </code>
</pre>

📊 Tables

Native <table> with thead, tbody, tfoot and caption — all styled by _native.css.

Full table with thead / tbody / tfoot

Team Members
Name	Role	Location	Status
Alice Chen	Lead Developer	San Francisco	Active
Bob Kline	Designer	Berlin	Active
Carol Davis	DevOps	London	Away
Dan Park	QA Engineer	Seoul	Active
Total members			4

<table>
  <caption>Team Members</caption>
  <thead>
    <tr><th>Name</th><th>Role</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>Developer</td><td>Active</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">Total</td><td>2</td></tr>
  </tfoot>
</table>

📋 Inputs & Forms

Native form elements styled by _native.css — label, input, select, textarea, fieldset.

Label + input

<form>
  <label>Full name <input type="text"></label>
  <label>Email <input type="email"></label>
  <label>Password <input type="password"></label>
</form>

Select & textarea

<label>Country
  <select>
    <option>Choose a country</option>
    <option>United States</option>
  </select>
</label>
<label>Message
  <textarea rows="4"></textarea>
</label>

Fieldset & legend

<form>
  <fieldset>
    <legend>Personal Info</legend>
    <label>First name <input type="text"></label>
  </fieldset>
  <button type="submit">Submit</button>
</form>

Ready form cards

Newsletter signup

Get classless.css examples, release notes and new ready blocks.

Contact form

Login card

Validation states

<article>
  <h3>Newsletter signup</h3>
  <p>Get classless.css examples and release notes.</p>
  <form>
    <label>Email <input type="email"></label>
    <button data-variant="primary">Subscribe</button>
  </form>
</article>

🎛 Controls

Native checkboxes, radio buttons, and switches (role="switch") styled by _native.css.

Checkbox

Checked option Unchecked option Disabled Disabled checked

<label><input type="checkbox" checked> Checked</label>
<label><input type="checkbox"> Unchecked</label>
<label><input type="checkbox" disabled> Disabled</label>

Radio buttons

Option A Option B Option C Disabled

<label><input type="radio" name="plan" checked> Option A</label>
<label><input type="radio" name="plan"> Option B</label>
<label><input type="radio" name="plan"> Option C</label>

Switch (role="switch")

Notifications enabled Dark mode Analytics (disabled)

<label>
  <input type="checkbox" role="switch" checked>
  Notifications enabled
</label>
<label>
  <input type="checkbox" role="switch">
  Dark mode
</label>

▣ Ready Cards

Copy-ready card patterns built from semantic <article>, headings, lists and buttons. Useful for docs, landing pages and internal tools.

CTA card pair

Open source CSS

Build docs and prototypes with zero component classes.

Drop in classless.css, write semantic HTML, and keep markup readable enough to copy straight from docs.

Explore docs GitHub

Full njX UI

Need more than classless? Use the full component kit.

Buttons, cards, sidebars, modals, animations and utilities share the same theme tokens.

View npm Live docs

<article>
  <span>Open source CSS</span>
  <h3>Build docs and prototypes...</h3>
  <p>Drop in classless.css and write semantic HTML.</p>
  <p><a href="https://njxui.dev">Explore docs</a></p>
</article>

Feature cards

No classes required

Native headings, paragraphs, lists, tables and forms get sensible defaults.

Read reference

Data variants

Use attributes like data-variant="success" for meaningful states.

Open docs

Theme aware

Switch every card with one data-theme attribute on the root.

Try themes

<article>
  <h3>No classes required</h3>
  <p>Native elements get sensible defaults.</p>
  <a href="https://njxui.dev">Open docs</a>
</article>

Pricing cards

Classless

$0 / MIT

Semantic HTML styling
9 themes
Loading states

Full njX UI

25+ components

Buttons, cards and forms
Sidebar and modals
Animations and utilities

Playground

Fork on CodePen

Copy ready cards
Try theme switcher
Remix without build tools

<article>
  <h3>Classless</h3>
  <p>$0 / MIT</p>
  <ul>...</ul>
  <button data-variant="primary">Use CDN</button>
</article>

🔲 Buttons

Native <button> elements styled by _native.css with data-variant for semantic variants.

Variants

Disabled & types

<button type="button">button</button>
<button type="submit">submit</button>
<button type="reset">reset</button>
<button disabled>disabled</button>

📄 Article

Semantic <article> structure with header, body content, and footer. The scoping element for _native.css styles.

Article with header / body / footer

Article Title

Published April 27, 2025 · 5 min read

This is the article body. It can contain paragraphs, images, lists, code, and any other semantic HTML elements — all styled automatically.

A second paragraph with strong emphasis and italic text to demonstrate the base typography rhythm.

<article>
  <header>
    <h2>Article Title</h2>
    <p>Published <time datetime="2025-04-27">April 27, 2025</time></p>
  </header>
  <p>Article body content.</p>
  <footer>
    <p>Written by <a href="#">Author</a></p>
  </footer>
</article>

🏗 Semantic Elements

aside, address, and ARIA live region roles — role="alert", role="status", role="note".

aside

Main content goes here. It can contain any text.

Tip: Use aside for supplementary content that is related but not essential to the main flow.

<p>Main content here.</p>
<aside>
<strong>Tip:</strong> Supplementary content.
</aside>

ARIA roles: alert / status / note

Alert: Your session will expire in 5 minutes.

Status: File upload complete (3 of 3).

Note: Changes are saved automatically.

<p role="alert">Alert: Session expiring.</p>
<p role="status">Status: Upload complete.</p>
<p role="note">Note: Auto-saved.</p>

address

Written by John Doe.
42 Main Street, San Francisco, CA 94105
[email protected]

<address>
  Written by <a href="#">John Doe</a>.<br>
  42 Main Street, SF<br>
  <a href="mailto:[email protected]">[email protected]</a>
</address>

🖼 DL & Figure

Definition lists (dl/dt/dd) and figure with figcaption styled by _native.css.

Definition list

HTML: HyperText Markup Language — the standard language for web pages.
CSS: Cascading Style Sheets — describes the presentation of HTML documents.
JavaScript: A scripting language for interactive web content.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets.</dd>
</dl>

Figure with figcaption

Figure 1 — A scenic landscape from Picsum Photos.

<figure>
<img src="image.jpg" alt="Description">
<figcaption>Figure 1 — Caption text.</figcaption>
</figure>

🔽 Details & Summary

Native <details> / <summary> accordion — no JavaScript, styled by _native.css.

Details accordion

What is classless CSS?

A single CSS file that styles native HTML elements with zero class names. Drop it in and write semantic HTML — everything looks great out of the box.

How do I use data-theme?

Add data-theme="dark" (or any of the 9 theme names) to your <html> element. Themes update all CSS custom properties automatically.

Is this production ready?

Yes. The library is minified to ~48 KB, has zero runtime dependencies, and supports all modern browsers. The classless mode is a standalone add-on to the main CSS.

<details>
  <summary>Question title</summary>
  <p>Answer content goes here.</p>
</details>


<details open>
  <summary>Always visible</summary>
  <p>This panel is open on load.</p>
</details>

▮ Progress & Meter

Native <progress>, <meter>, and <output> elements styled by _native.css.

Progress bar

Upload progress Almost done Indeterminate

<label>Upload progress
<progress value="40" max="100"></progress>
</label>
<label>Indeterminate
<progress></progress>
</label>

Meter

Disk usage (60%) Battery (90%) Score (low — 1/10)

Output

💬 Dialog

Native <dialog> element styled by _native.css. Uses the Popover API for zero-JS open/close.

Dialog via Popover API

<button popovertarget="my-dialog">Open dialog</button>

<dialog id="my-dialog" popover>
  <h3>Dialog Title</h3>
  <p>Dialog content goes here.</p>
  <footer>
    <button popovertarget="my-dialog" popovertargetaction="hide">Close</button>
    <button data-variant="success" popovertarget="my-dialog" popovertargetaction="hide">Confirm</button>
  </footer>
</dialog>

⏳ Loading

aria-busy="true" on any block element adds a frosted overlay + spinning indicator from _native.css. Use [role="status"] for an inline spinner. No extra markup needed.

aria-busy on article

Project analytics

Loading content…

<article aria-busy="true">
  <h3>Project analytics</h3>
  <p>Loading content…</p>
  <button>View report</button>
</article>

aria-busy on section

Account settings

Section loading…

<section aria-busy="true">
<p>Section loading…</p>
</section>

Button loading state

<button aria-busy="true">Saving…</button>
<button aria-busy="true" data-variant="accent">Submitting…</button>

Inline spinner — data-loading

Fetching data…

Syncing changes

<p><span data-loading></span> Fetching data…</p>