Callie

Author: Colorlib

Updated: October 2026 · v3.0.1

Credits: Images from Unsplash

Callie is a magazine and blog template for lifestyle, fashion, health, technology and travel writing, built on Bootstrap 5. The header has social links, a centred logo, a search overlay and a slide-out side menu, and the main menu opens a mega menu with category tabs and post previews. The layout is responsive and mobile-ready. There are seven pages: home, category, single post, author, about, contact and a regular page with typography and elements.

The home page opens with a grid of three featured posts over their photos, followed by recent posts, most-read posts and a sidebar with social follower counts, a newsletter form, categories, tags, popular posts and advertising spaces. The single post has share buttons, a pull quote, an author box, previous and next links, related posts, comments and a comment form, and the category and author pages list posts in the same card style. The contact page has contact details and a working contact form.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 3.3.7 and jQuery), compiled from Sass with the Bootstrap 3 proportions the design was drawn with, and plain JavaScript with no jQuery. The page banners scroll with a light Jarallax parallax instead of Stellar.js, the mega-menu tabs, side menu and search overlay have their own small script, and npm run build (Dart Sass and esbuild) compiles one minified stylesheet and script.
• Lighter pages: the seven pages went from 9.5 MB and 214 requests to 5.7 MB and 195 requests, and the contact page from 0.97 MB to 0.37 MB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the first screen, and the post photos are new and sharp at twice their display size.
• No third-party requests: Montserrat and Muli are self-hosted, Font Awesome 4 is replaced by Lucide SVG icons and a 1 KB social-logo subset (with the X logo), and a Google Analytics 4 snippet stays commented out until you add your own ID.
• Working forms: the newsletter, contact and comment forms send through php/send-email.php, with validation, a spam trap and an in-page message, and the header search opens the category page with the query. Before, none of the forms had a handler.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, labelled menu, search and close buttons, a side menu that keeps focus inside and closes with Esc, mega menus and category tabs that work from the keyboard, labelled form fields, alt text on photos, visible focus rings and WCAG AA text contrast, with a darker pink for pink text and buttons and white-on-pink category labels over photos.
• Fixed and tidied: menu, category, tag and footer links that pointed nowhere now open the matching page (About has a new Privacy section for the footer link), the missing Glyphicons font requests are gone, and the demo uses fictional author and commenter names, a fictional address and example.com email.