Suppablog

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Suppablog is a minimal personal blog template with no CSS framework. A dark sidebar rail on the left holds the logo, the menu button and the social links; the menu button slides out a panel with search, the site title and the navigation. There are five pages: home, scroll, single post, about and contact.

The home page splits the screen between a featured post with a post list and a full-height featured photo. The scroll page shows featured stories as full-height photo panels that scroll sideways, the single post has a crossfading photo gallery, a pull quote and an inline image, the about page has a header photo and an author card, and the contact page has a working contact form and a map that loads on click. Suppablog suits writers and bloggers who want a quiet, photo-led layout.

What’s new in 3.0

• Plain JavaScript with no jQuery and no CSS framework: Swiper 14 replaces carouFredSel on the post gallery, native horizontal scrolling replaces niceScroll on the scroll page, and SmartMenus, imagesLoaded and the other jQuery plugins are gone. npm run build (esbuild) produces one minified stylesheet and one script.
• Real demo photos: the earlier download shipped grey placeholder images; 3.0 includes ten photos sized for high-density and 4K screens, each with an AVIF version and a JPEG fallback, real dimensions and lazy loading below the first screen. The full-page preloader is gone.
• Fewer requests: 157 requests across the five pages went down to 55, and the contact page went from 1.04 MB and 56 requests to 0.16 MB and 8 requests.
• No third-party requests: Montserrat and Libre Baskerville are self-hosted, Font Awesome 4.7 is replaced by Lucide SVG icons and a 1 KB social-logo subset, and the contact map is an OpenStreetMap map (no API key needed) that loads only when a visitor clicks.
• Working features: the contact form sends through an included PHP handler with visible labels, validation, spam protection and success and error messages; the sidebar search filters the posts; category links and “Load more entries” work; an RSS feed is included.
• Accessibility: a skip link, one main heading per page, a keyboard-operable sidebar that closes with Escape, labelled icon links, visible focus rings and text colours that meet WCAG AA contrast.
• Unique page titles and descriptions, Open Graph tags, schema.org structured data, a commented Google Analytics 4 placeholder, and a README with build, form, SEO and customisation notes.