# classless.css ### A semantic stylesheet for njX UI — style native HTML with zero classes. [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE) [![CSS](https://img.shields.io/badge/Pure_CSS-No_JS-1572B6?logo=css3&logoColor=white)](#) [![Themes](https://img.shields.io/badge/Themes-9-blueviolet)](#themes) [![Size](https://img.shields.io/badge/~47KB-minified-green)](#)
--- ## What is classless.css? `classless.css` is a drop-in stylesheet that makes plain, unstyled HTML look great — **without adding a single class to your markup.** Just link the file and write semantic HTML. It follows the same philosophy as [PicoCSS](https://picocss.com): every native HTML element gets thoughtful, accessible styles automatically. Variants and states use **`data-*` attributes** — keeping markup clean and readable. > **Scoping:** styles only activate inside `
`, `
`, `
`, or `
` elements that have no class. This prevents conflicts with the Full library (`style.min.css`). ```html ``` ```html

Hello World

No classes. No configuration. Just HTML.

``` --- ## Table of Contents - [Quick Start](#quick-start) - [Philosophy](#philosophy) - [Themes](#themes) - [Typography](#typography) - [Links & Inline Elements](#links--inline-elements) - [Lists](#lists) - [Code](#code) - [Tables](#tables) - [Forms](#forms) - [Input Variants & Validation](#input-variants--validation) - [Input Types](#input-types) - [Checkbox, Radio & Switch](#checkbox-radio--switch) - [Loading State (aria-busy)](#loading-state-aria-busy) - [Buttons](#buttons) - [Details / Accordion](#details--accordion) - [Article (Card)](#article-card) - [Dialog (Modal)](#dialog-modal) - [Progress & Meter](#progress--meter) - [Semantic HTML5 Elements](#semantic-html5-elements) - [Semantic Roles](#semantic-roles) - [Definition List](#definition-list) - [Media Elements](#media-elements) - [Tooltip](#tooltip) - [Loading Spinner](#loading-spinner) - [CSS Variables Reference](#css-variables-reference) - [Browser Support](#browser-support) --- ## Quick Start **CDN (jsDelivr)** ```html ``` **npm** ```bash npm install njx-ui ``` ```html ``` **Recommended HTML shell:** ```html My Page

Hello World

Styles applied automatically.

``` --- ## Philosophy **One rule: write semantic HTML. classless.css styles it.** | Instead of… | Write… | |---|---| | `
` | `
` | | `
` | ` ``` --- ## Themes Set `data-theme` on `` (or any container). Default is `dark`. ```html ``` **Switch theme with JS:** ```js document.documentElement.setAttribute('data-theme', 'purple'); localStorage.setItem('njx-theme', 'purple'); ``` --- ## Typography All heading levels, paragraphs, and text modifiers are styled automatically inside `
`, `
`, or `
` (no class). ```html

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Regular paragraph with bold, italic, and small text.

A meaningful quote or highlighted passage. — Author Name
``` --- ## Links & Inline Elements ```html

Visit our documentation for more.

Press Ctrl+K to open search.

CSS is great.

H2O and E = mc2

Price: $99 $49

Article title — Term definition — x = 42

Inline quoted text appears here.

``` **Link variants** — `data-variant` on ``: ```html Accent Success Warning Error Dark ``` --- ## Lists ```html
  • Unordered item
  • Another item
    • Nested item
  1. First step
  2. Second step
  3. Third step
``` --- ## Code ```html

Use the npm install command.

Press Ctrl + C to copy.

const greeting = "Hello, World!";
console.log(greeting);
``` --- ## Tables ```html
Name Type Status
classless.min.css Stylesheet Stable
``` --- ## Forms All form elements are styled out of the box inside `` or `
` (no class). ```html
Account details
``` ### Input Variants & Validation Use `data-variant` for semantic color states, or `aria-invalid` for ARIA-compliant validation: ```html ``` Available `data-variant` values for inputs: `accent` · `success` · `warning` · `error` ### Input Types ```html ``` ### Checkbox, Radio & Switch ```html ``` ### Loading State (aria-busy) Apply `aria-busy="true"` to show a frosted overlay with spinner — no JS required for the visual. ```html

Loading content…

Fetching data…

``` --- ## Buttons Buttons are styled by default. Use `data-variant` for color variants: ```html ``` --- ## Details / Accordion ```html
What is classless.css?

A drop-in stylesheet that styles semantic HTML with no classes required.

Is it free?

Yes, completely free under the MIT license.

``` --- ## Article (Card) `
` inside `
` or `
` (no class) renders as a styled card: ```html

Card Title

Subtitle or meta info

Card content goes here.

Published April 2026
``` --- ## Dialog (Modal) Native `` element with backdrop blur. Open via JS `showModal()`. ```html

Confirm action

Are you sure you want to delete this item?

 ``` --- ## Progress & Meter ```html
+ = 75
``` --- ## Semantic HTML5 Elements ```html
123 Street, City
hello@example.com

Published on .

Area: A = π × r²

H2O and E = mc2

Price: $99 $49

This is an inline quote with decorative marks.

Classless CSS means styling without adding class names.

``` --- ## Semantic Roles ARIA roles trigger styled alert/status/note banners automatically: ```html
Something went wrong. Please try again.
Your changes have been saved successfully.
This action cannot be undone.
``` --- ## Definition List ```html
Version
1.0.5
License
MIT
Dependencies
None
``` --- ## Media Elements ```html
Description
Caption text goes here.
``` --- ## Tooltip Add a tooltip to any element via `data-tooltip` attribute — no JS required: ```html CSS * Name ``` --- ## Loading Spinner ### Overlay spinner — `aria-busy` Applies a frosted-glass overlay with a centered spinner to any block element: ```html

Loading content…

``` ### Inline spinner — `data-loading` A small spinning indicator for inline use (inside text, next to labels): ```html

Fetching data…

``` --- ## CSS Variables Reference All design tokens are defined in `_base.css`. Key variables: ### Colors ```css --color-primary /* Main brand color (default: #14a0ff) */ --color-accent /* Secondary accent (default: #ff6e00) */ --color-success /* Green (default: #9ce700) */ --color-error /* Red (default: #d43939) */ --color-warning /* Yellow (default: #ffdd00) */ --color-muted /* Subdued text (default: #8a8f99) */ ``` ### Backgrounds & Text ```css --color-dark /* Page background */ --color-dark-secondary /* Cards, inputs, nav */ --color-light /* Primary text */ --color-muted /* Secondary/hint text */ ``` ### Color scales ```css --color-primary-100 … --color-primary-900 /* Light → dark shades */ --color-accent-100 … --color-accent-900 --color-success-100 … --color-success-800 --color-error-100 … --color-error-800 --color-neutral-50 … --color-neutral-900 ``` ### Typography ```css --font-sans /* Body font (Inter) */ --font-heading /* Heading font (Poppins) */ --font-mono /* Code font (Roboto Mono) */ --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 / responsive variants */ --fs-f-base --fs-f-lg --fs-f-xl --fs-f-2xl /* etc. */ ``` ### Spacing ```css --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 ``` ### Border Radius ```css --radius-none: 0px --radius-sm: 6px --radius-md: 12px --radius-lg: 20px --radius-xl: 30px --radius-2xl: 40px --radius-full: 9999px ``` ### Shadows ```css --shadow-sm --shadow-md --shadow-lg --shadow-primary --shadow-accent --shadow-glow ``` ### Transitions ```css --ease-fast: 0.15s ease-in-out --ease: 0.3s ease-in-out --ease-slow: 0.5s ease-in-out ``` ### Form customization Override form appearance per-scope with local CSS variables: ```css article { --form-border: #444; /* input border color */ --form-bg-input: #1a1a1a; /* input background */ --form-radius: 8px; /* input border-radius */ --form-padding: 8px 12px; /* input padding */ --form-font-size: 14px; /* input font size */ } ``` --- ## Browser Support | Feature | Chrome | Firefox | Safari | Edge | |---|---|---|---|---| | Core styles | 90+ | 90+ | 14+ | 90+ | | `color-mix()` | 111+ | 113+ | 16.2+ | 111+ | | `backdrop-filter` (blur overlay) | 76+ | 103+ | 9+ | 79+ | | `dialog` element | 37+ | 98+ | 15.4+ | 79+ | | CSS `:where()` (scoping) | 88+ | 78+ | 14+ | 88+ | | `input[type="color"]` styling | 53+ | 29+ | 12.1+ | 14+ | --- ## What's Included | Feature | Status | |---|---| | 9 color themes (`data-theme`) | ✅ | | Typography — headings, paragraphs, blockquote | ✅ | | Inline elements — mark, kbd, code, abbr, q, dfn, var | ✅ | | Lists — ul, ol, nested | ✅ | | Tables | ✅ | | Forms — all input types, select, textarea, fieldset | ✅ | | `aria-invalid` validation states | ✅ | | `data-variant` on inputs (success/error/warning/accent) | ✅ | | Toggle switch (`input[role="switch"]`) | ✅ | | Buttons with `data-variant` | ✅ | | `aria-busy` loading (button + container overlay) | ✅ | | `data-loading` inline spinner | ✅ | | Details / accordion | ✅ | | Article card | ✅ | | Dialog with backdrop | ✅ | | Progress, meter, output | ✅ | | Aside callout | ✅ | | Address, cite, del, ins, sub, sup | ✅ | | `[role="alert/status/note"]` banners | ✅ | | Definition list (`dl/dt/dd`) | ✅ | | Audio, video, iframe | ✅ | | `` element | ✅ | | `data-tooltip` | ✅ | | Custom scrollbar | ✅ | | `::selection` themed | ✅ | | Focus ring (keyboard navigation) | ✅ | | Responsive tokens (breakpoints) | ✅ | --- ## License MIT — free for personal and commercial use. Part of [njX UI](https://github.com/njbSaab/njx-css-ui) by [@njbSaab](https://github.com/njbSaab).