PureCSS.com: interaction without JavaScript

01Survey rules

One rule: no JavaScript in the pattern

02Pattern inventory

74 patterns, surveyed and counting

Charted across four categories and graded by difficulty, from a beginner's toggle switch to advanced scroll-driven instruments.

By category

• 13+ Form
• 11 Navigation
• 37+ Layout
• 13 Feedback

By difficulty

• Beginner
• Intermediate
• Advanced

Representative spread

• toggle switches
• floating labels
• star ratings
• multi-step forms
• tab navigation
• off-canvas nav
• scroll-spy
• modals
• lightboxes
• card flips
• parallax
• pie / bar / donut charts
• skeleton loaders
• toasts
• countdown timers
• typewriter text
• confetti
• CSS rain
• QR code
• morphing blobs
• + 54 more on the sheet

03Field methods

The techniques that do the work

Every pattern maps to a CSS mechanism doing the job JavaScript usually gets hired for. The methods, charted:

input:checked ~ ...the checkbox hack

toggle switches, off-canvas nav, expandable cards

[type="radio"]:checkedradio-group state

tab navigation, star ratings, pagination, multi-step forms

:targetURL-fragment state

modals, lightboxes, toasts

:has()parent selection

the site's own CSS-only dark/light theme toggle

:placeholder-shownempty-field detection

floating labels

:user-valid / :user-invalidpolite validation

live form validation

animation-timeline: scroll() / view()scroll-driven animations

scroll-spy, parallax, shrinking headers

scroll-snap-typescroll snap

carousels

@property + counter() + steps()typed number animation

animated number counters, countdown timers

conic-gradient()angular fills

pie charts

stroke-dashoffsetSVG line drawing

donut charts, border-draw buttons

box-shadowpixel art

the QR code

04Instrumentation

A pattern library that publishes itself

Behind the demos is a JAMstack build on Eleventy 3, the static site generator, with an ESM config tuned so adding a pattern is cheap, and so the site keeps shipping when nobody's at the desk.

1. STA 01

   One data file drives everything

   A single 74-entry catalog powers the homepage grid, the per-pattern pages, and the category and difficulty indexes. Adding a pattern touches exactly five files, every time.

2. STA 02

   CSS scoped per pattern

   Each pattern's stylesheet is scoped under its own demo wrapper and loads only on its page: 74 demos, zero chance of one leaking into another.

3. STA 03

   Drip release by publish date

   Every entry carries a publish date, spaced so a new pattern surfaces every 2-3 days instead of the whole catalog landing at once.

4. STA 04

   The 6 a.m. cron

   A daily GitHub Actions cron rebuilds the site at 6 a.m., so scheduled patterns go live on their own. A self-publishing content engine: no deploy button, no reminder, no drift.

5. STA 05

   Everything heavy happens at build

   Prism syntax highlighting runs at build time (zero client JS), sharp generates the OG images and favicons, and GitHub Pages serves the static result.

05Margin of error

Honest limits

A pattern library that overstates browser support isn't a reference. The margins are marked on the sheet.

• Nesting-free on purpose

  The CSS is written flat, with no native nesting, so Safari on iOS 15.2+ parses every rule. In a reference library, reach beats elegance.

• Progressive enhancement, flagged

  The :has() and scroll-driven patterns are marked as progressive enhancement, with Safari and Chromium support noted per pattern. They enhance; they never gate.

• Next on the roadmap

  Reduced-motion guards and a deeper accessibility pass across the animation-heavy patterns: surveyed, scheduled, not yet shipped.

What other people would consider impossible, he made possible through code.