Quick summary
Commons is the classic social network layout rebuilt as a working product — not a screenshot with dead buttons. A sticky navbar with search and badge counters sits over the classic three-column grid: both rails are position-fixed and hold still while the news feed scrolls between them. The composer expands, takes a photo, a live tag or a feeling, and posting unshifts a new object straight onto the live feed array. Every post card’s Like toggles its own colour and moves its own counter by exactly one; Comment opens a real thread; the ⋯ menu saves, hides or deletes with an undo. Around the feed, everything else answers too: eleven routes without a router, notification and chat popovers, a story viewer, chat windows that send and minimise, live search, and a dark theme swapped through design tokens.
Who this template is for
This build is for anyone who needs a feed — a product adding a social surface, a developer studying how a big interface stays in sync, a student who wants the canonical layout with the wiring left visible.
- Developers who want a worked reference for the hard parts of an app shell: routing without a router, a feed that renders from one array, and chrome that stays interactive while you type
- Products that need a familiar social surface — feed, composer, reactions, chat — with the mechanics people already know and none of the framework weight
- Anyone learning front-end state who wants to see a large interface where every control traces back to a single object, small enough to read in one file
What problem this template solves
Most product front ends you can actually read are either a framework tutorial with three fake rows in it, or a real app whose logic is buried under a build pipeline. This build is neither.
- Interface clones stop at the layout — the mechanics that make the product work are left as an exercise
- Real state rules are the hard part, and they are exactly what a screenshot cannot show you
- A build behind a bundler is a build you cannot read: the file you open is not the code that runs
What you get with this template
One index.html. Open it and the whole application runs — no install, no bundler, no server, no network requests.
- The full app shell: sticky navbar with search and live badges, both fixed rails, eleven routes, popovers, a story viewer, a photo lightbox and dockable chat windows
- The feed pipeline end to end: an expanding composer with photo, live and feeling attachments whose draft survives route changes, posts that unshift onto the live array, and per-post like, comment, share, save, hide and delete
- The sync mechanics in readable code: one state object, one delegated click handler, class-toggle chrome updates that never steal focus, and a dark theme swapped entirely through CSS custom properties
Page sections overview
| Section | Purpose |
|---|---|
| The Fixed Frame | A navbar that sticks and rails that hold still. |
| The Composer | A draft object, not a form. |
| The Like Rule | Each card owns its state. |
| The Routes | Eleven views, no router. |
| The Sync Layer | Every surface derives, none of them toggle. |
Design & branding system
The design brief was fidelity: the real product’s tokens, hierarchy and spacing, reproduced closely enough that the differences are the interesting part.
- The authentic palette as CSS custom properties — ground grey #F0F2F5, card white, text at three weights, and the one blue #1877F2 — with the whole dark theme expressed as a second token set on a single html attribute
- The real hierarchy: 590px feed column, 56px navbar, avatar sizes and divider weights measured from the product rather than guessed
- System-native type and flat cards with the product’s own shadow recipe, so the page reads as the real thing at a glance and as a clean study up close
Mobile & speed optimization
The layout is designed at full width and then composed down, so the same interface holds together on a phone without a separate mobile build.
- The multi-column grid collapses in stages rather than all at once, so each breakpoint has a deliberate layout
- Touch targets, type and spacing are re-tuned at the small end — not just scaled down
- No horizontal overflow at any width, verified by measurement rather than by eye
How this template helps you convert
A working product beats a mockup. The page is arranged so a visitor can use the thing before deciding anything.
- Visitors interact immediately — the live build is on the page, with no signup or install in the way
- Every mechanic is inspectable, which turns a curious visitor into someone who wants the brief behind it
- The one-time prompt unlock is a concrete next step while the product is still open in the tab
Other information about this template
A few additional details are worth noting before you build on this template.
- Zero network requests — avatars and imagery are generated gradients, the icon set is an inline SVG sprite, and the favicon is a data URI
- Keyboard support throughout: every control is a real button with a visible focus ring, Escape unwinds overlay → menu → popover, Enter sends, Cmd/Ctrl+Enter posts
- Shipped as a study of the interface — for production use, reskin the mark and palette to your own brand the way the prompt’s restyle option describes
The sync layer
one state object is the only source of truth, and every surface derives from it. Navigate to Marketplace from the nav tab and the left-rail item lights up too, because both read the same route field rather than toggling themselves. Add a friend in the right rail and the Friends page already says Requested. The section headings are buttons — “Sponsored”, “Contacts”, a post author’s name — and all of them route through the same one-line go() call.
Two bugs worth buying
the post ⋯ menu is anchored in document space, not viewport space — a fixed-position menu detaches from its post on the first scroll event, which can fire asynchronously the same instant the menu opens and close it before it is seen. And the chrome never re-renders as HTML: active tabs and badges mutate by class toggle, so the search input keeps focus and caret while you type. Both are the kind of defect that passes code review and only appears in a driven browser.
Screenshots
Captured from the live build, section by section. This is the template as it actually renders, not a mock-up.
