Gricklo

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Gricklo is a website template for business directories, listing sites and city guides, built on Bootstrap 5.3.8 with plain JavaScript. The layout is responsive and works in all current browsers. It comes with ten pages: home, about, listings, listing details, blog, blog post, contact, elements, login and sign up.

The home page has a transparent sticky header, a full-screen hero with a what/where search, destination circles, interest tiles, a popular-listings slider, a how-it-works section and a testimonial with a video. The listings page adds filters for city, neighbourhood, distance, price and tags, the listing page has a gallery, a click-to-load map and a contact form, and the blog pages have a sidebar with search, categories, recent posts and a newsletter box.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release shipped Bootstrap 5.0 beta 1 with jQuery 1.12), compiled from Sass together with the theme, and plain JavaScript with no jQuery. Swiper 14 replaces Slick on the popular-listings slider, PhotoSwipe replaces Magnific Popup in the gallery, and a keyboard-operable dialog replaces SlickNav for the mobile menu. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all ten pages together went from 16.6 MB and 539 requests to 8.7 MB and 271 requests (home 2.0 MB to 1.3 MB). Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the fold, and unused plugins and icon fonts are gone.
• No third-party requests: Work Sans and Mulish are self-hosted, the icon fonts are replaced by Lucide SVG icons and a small social-logo subset, the video loads from YouTube’s privacy-enhanced player only after a click, and the Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its fonts from Google Fonts, and the map pages loaded Google Maps.
• Working forms: the contact and listing forms send through includes/send-email.php with validation, a spam trap and an in-page message, and the search, filter, newsletter, comment, sign-in and sign-up forms have named, labelled fields.
• Click-to-load OpenStreetMap maps need no API key; nothing loads from OpenStreetMap until the visitor presses Show map.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, visible keyboard focus, menus that open from the keyboard, labelled form fields and text contrast of 4.5:1 or better.
• New photographs, fictional listings and avatars throughout, and a README and a documentation page generated from it.