Inspirations
12 kinds of website, each written by hand in plain HTML with dssoca/vanilla.css and dssoca/vanilla.js — no framework, no build step.
Every card opens its example in a new tab; view the source, copy what you like. The pages follow the
same two design axes as this site.
The examples are served from the standalone Inspirations site on GitHub Pages, rebuilt from the current source on every release. See the Plain HTML & CSS guide for the path they are built on.
Ops consoledashboardOps console (opens in a new tab)Metrics, charts, a deploy table and a live-looking log stream inside the app shell.
Topbar Sidebar MetricTile Chart Table LogStream
Social feedsocial networkSocial feed (opens in a new tab)A three-column timeline with a composer, post cards, menus and a mobile bottom nav.
Card Avatar Textarea BottomNav Menu Tooltip
Swipe profilesdating appSwipe profiles (opens in a new tab)A phone-shaped card stack with like / skip actions, keyboard hints and a match dialog.
Card Badge Button Modal BottomNav Kbd
Team chatmessagingTeam chat (opens in a new tab)Server rail, channel sidebar, grouped messages, reactions and an autosizing composer.
Sidebar Avatar Input Textarea Menu EmptyState
Product landingmarketing siteProduct landing (opens in a new tab)Hero, feature grid, a product shot built from real components, pricing tiers and a FAQ.
Heading Container Card Accordion SegmentedControl Button
Personal blogpublishingPersonal blog (opens in a new tab)A narrow reading column with post list, prose, code blocks, tags and pagination.
Heading Link Badge Pagination Kbd Input
Media trackerlist & saveMedia tracker (opens in a new tab)Poster grid or table of everything you watched, with filters, scores and a rating dialog.
Card Table SegmentedControl Select Pagination Modal
Storefronte-commerceStorefront (opens in a new tab)A product page with gallery, variant pickers, quantity stepper, cart toasts and related items.
NumberField Select Accordion Badge Card Button
Mail clientproductivityMail client (opens in a new tab)Folders, a triage list with keyboard hints, a reading pane, compose dialog and search palette.
Sidebar Kbd Menu Modal SearchPalette Textarea
Project boardkanbanProject board (opens in a new tab)Columns of issue cards with priorities, assignees, an issue dialog and a show-done switch.
Card Badge Avatar Modal Switch DateField
Music playerstreamingMusic player (opens in a new tab)A playlist page with a track table, a now-playing row and a fixed transport bar.
Sidebar Table Button Spinner Menu BottomNav
Account settingsforms & authAccount settings (opens in a new tab)Every form control in one place: profile, notifications, security, API keys — plus a sign-in screen.
Input Switch Select FileDrop Modal Table