Dispatch — Free Editorial Blog & Magazine Website Template
Dispatch is built like a real newsroom front page, not a generic blog theme: a weighted lead story, a filterable "Latest Dispatches" grid, a Most-Read column, and a full single-article layout with a reading-progress bar and sticky share rail. The palette pairs espresso ink and warm newsprint with a slate-navy masthead and a single ochre accent — an identity that reads editorial without leaning on the tired cream-and-terracotta look. Everything is Bootstrap 5, self-hosted, and dependency-free: no jQuery, no icon fonts, no CDN scripts.
Features
- Magazine front page with a weighted lead story plus stacked secondary teasers
- JavaScript category filter across the "Latest Dispatches" card grid (City / Technology / Coffee / People)
- Complete single-article page (article.html) with drop cap, pull-quote, inline figures, and related posts
- Reading-progress bar and a sticky vertical share rail on the article page
- Hand-drawn inline-SVG icons and share buttons — zero icon-font dependencies
- Slide-open archive search, off-canvas mobile nav, and a validated newsletter form
- Numbered "Most Read" list and a navy "Editor's Picks" panel for editorial hierarchy
- IntersectionObserver scroll-reveal with a full prefers-reduced-motion fallback
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 2 (magazine home + single article)
- Responsive: Yes
- Style: Editorial print magazine — espresso ink, warm newsprint, slate navy, ochre
How to use it
Download the ZIP, unzip it, and open index.html — there is no build step and no dependencies to install. Replace the demo text and images with your own, point any forms at your backend or a form service, and deploy the folder to any static host. Colours, fonts, and spacing live in css/style.css; the interactions are in js/main.js. Bootstrap 5 is bundled locally, so it works offline and on strict-CSP hosts.
FAQ
Is Dispatch really free for commercial projects?
Yes. Use it for personal sites, client work, or a commercial publication at no cost. Attribution is appreciated but not required.
Does it use jQuery or any icon fonts?
No. All interactivity is vanilla JavaScript in one guard-claused file, and every icon is inline SVG, so it deploys cleanly even under a strict Content-Security-Policy.
Can I add more categories to the filter?
Yes. The filter reads `data-cat` on each card and `data-filter` on each chip — add a matching pair and it works with no extra JavaScript.
Which fonts does it use?
Fraunces for display headlines, Libre Franklin for body text, and Spline Sans Mono for datelines and kickers, all loaded from Google Fonts. Swap them in one CSS variable block if you prefer your own pairing.
