Meranda

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Meranda is a news, magazine and blog website template built on Bootstrap 5, with a light, minimal layout that puts the headlines and photos first. It has five pages: home, categories, a single article, about and contact.

The home page opens with an editor’s pick slider, followed by editor’s picks, a numbered trending list, politics and business columns, recent and popular news with pagination and a newsletter box. The category page lists posts with popular posts beside them, the article page has an author line, threaded comments and a comment form, and the contact page has a working contact form. The menu bar sticks to the top of the page while reading, and on phones the menu opens in a side panel.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.3 and jQuery), compiled from Sass with the theme and the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 runs the home slider, small built-in modules handle the mobile menu, the sticky menu bar and the forms, and a dozen unused plugins are gone. npm run build (Dart Sass and esbuild) compiles the minified stylesheets and script.
• Lighter pages: the five pages went from 7.6 MB and 172 requests to 2.6 MB and 99 requests, the home page from 1.8 MB to 0.9 MB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading, the thumbnails are sharp on high-density screens, and the full-page preloader is gone.
• No third-party requests: Cabin and B612 Mono are self-hosted, Lucide SVG icons and a 1 KB social-logo subset replace two icon fonts, and a Google Analytics 4 snippet stays commented out until you add your own ID.
• Working forms: the contact, comment and newsletter forms post to a small PHP mail handler with validation, a spam trap and in-page success and error messages, and the search box sends its query to the category page.
• Accessibility: a skip link, one main heading per page, the current page marked in the menu, a keyboard-friendly menu panel, labelled icon buttons and form fields, visible focus rings and WCAG AA text contrast with a deeper green and darker greys.
• Fixes: every placeholder and broken link now leads to a real page, each page has its own title, description and social-sharing tags, and new photos replace two that did not suit a commercial template.