Readit Blog

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Readit is a website template for a blog or online magazine about design, art and creative work, built on Bootstrap 5, with a bold pink-to-orange hero and a clean, readable layout. It is responsive and mobile-ready and works in all popular web browsers. It comes with five pages: home, articles, article, about and contact.

The home page opens with a full-screen hero with a parallax effect and lists featured stories with large photos, categories, reading times and share links. The articles page is a card archive with dates and a search that filters the posts, and the article page has an author box, threaded comments, a comment form and a sidebar with categories, recent posts and a tag cloud. The about page adds a video, mission, vision and values tabs and a reader testimonial slider, and the contact page has a working contact form and a map that loads on click. The menu turns into a sticky bar as you scroll.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.2.1 and jQuery), compiled from Sass together with the theme and the original Bootstrap 4 proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the testimonial slider, Jarallax replaces Stellar on the page headers, a small built-in module replaces the scroll animations, and npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all six pages together went from 17.4 MB and 220 requests to 7.0 MB and 105 requests. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the hero, the hero photo is preloaded, and unused plugins such as AOS, Scrollax, a number counter and animate.css are gone.
• No third-party requests: Poppins is self-hosted, the Ionicons, Open Iconic, IcoMoon and Flaticon icon fonts are replaced by Lucide SVG icons and a 1 KB social-logo subset (the Twitter bird is now the X logo), the about video loads from YouTube only after a click, and the map on the contact page is an OpenStreetMap embed that loads only when a visitor asks for it, with no API key.
• Accessibility: a skip link, landmarks, one main heading per page, named icon and share links, labelled form fields, visible focus rings and reduced-motion support. Text meets WCAG AA contrast: a deeper yellow for links on white, dark labels on the yellow buttons, darker grey body text and a deeper hero gradient behind the white heading and menu.
• Working forms: the contact and comment forms send through an included PHP mailer with validation, a spam trap and in-page success and error messages, and the sidebar search, tags and categories filter the article archive.
• New demo content: nine distinct stories with their own photos and categories, a full article, fictional authors, readers and commenters, and unique page titles, descriptions, social sharing tags and structured data on every page.