Inspirations
Twelve kinds of website, each written by hand in plain HTML with
dssoca/vanilla.css and dssoca/vanilla.js — no framework, no
build step. Open one, view its source, copy what you like. Every page follows the two
design axes: flip them below and the pages you open follow.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dssoca@0.19/dist/theme.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dssoca@0.19/dist/vanilla.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/dssoca@0.19/dist/vanilla/index.js"></script>-
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