Nimble.css — Extended Demo

Showcasing layout modes, utility classes, button variants, form patterns, surface hierarchy, dark mode toggling, and .no-nimble component isolation. See also: HTML5 Test Page.

Surface Hierarchy

Four surface levels create depth without relying on box-shadow. The lightness offsets invert symmetrically in dark mode (Solarized principle).

Surface 1
Page background
Surface 2
Code blocks, table headers
Surface 3
Inset areas
Surface 4
Overlays, dialogs

Button Variants

Standard Buttons

Link as Button

Primary Link Secondary Link Outline Link

Button Group

Same-Type Button Groups

Small Inline Buttons

Text with an inline and a embedded in a paragraph.

Form Patterns

Login Form

Registration Form

Account Details Looks good! Please enter a valid email address.
Preferences Enhanced picker requires nimble-select.min.css add-on.

Theme preference

Search

Tables

Default Table

Library Size (min+gz) CSS Variables Cascade Layers
nimble.css~3.3 KB~20Yes
PicoCSS~13 KB100+No
simple.css~4 KB~15No
new.css~4.5 KB~12No
Comparison of classless/minimal CSS libraries.

Striped Table

FeatureStatusPhase
Reset layerDone2
Color systemDone2
TypographyDone2
FormsDone3
ButtonsDone3
UtilitiesDone4

Layout Utilities

The default body grid centers content at --nc-content-width (60ch). These utilities break out of the center column.

.bleed-edge — spans to the shadow/paper edge (content + gap on each side).

.bleed-wide — breaks out to 1200px max-width. Good for dashboards and wide content.

.bleed-full — spans the entire viewport width. Useful for hero sections, banners, and images.

Code & Interactive Elements

Inline code: const x = 42;. Keyboard shortcut: Ctrl + S.

// nimble.css — zero config
<link rel="stylesheet" href="nimble.css">

// That's it. Semantic HTML looks good now.
Click to expand details

This is a <details>/<summary> element. nimble.css adds border, radius, and padding. The styling is behind the $enable-details feature flag.

Dialog

Native <dialog> element with minimal styling. Behind the $enable-dialog feature flag.

Dialog Title

This is a native HTML dialog element. It uses surface-4 as its background and gets a semi-transparent backdrop.

Typography

Any application that can be written in JavaScript, will eventually be written in JavaScript.

— Jeff Atwood

This text contains a highlighted mark element and a standard link plus a visited-style link.

The horizontal rule above uses a subtle color-mix() with the border color at 40% transparency.

Component Isolation (.no-nimble)

The .no-nimble class opts an element out of nimble.css typography, form, and component styles. This requires no-nimble.js which wraps scopeable rules in @scope at runtime. Layout utilities (.container, .grid, .bleed-edge, .bleed-wide, .bleed-full) remain global and still work on .no-nimble elements.

Compare the elements below with the styled versions above — these should render in browser defaults.

Heading Inside .no-nimble

This paragraph is inside a .no-nimble container. It should use browser-default font sizing, margins, and line-height instead of nimble.css typography.

Buttons

Form

Table

ItemStatus
Scoped outYes
Browser defaultsActive

Blockquote

This blockquote should use browser-default styling, not nimble.css styling.

Details/Summary

This should also render without nimble.css details styling.