Directone

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Directone is a city directory and business listing template built on Bootstrap 5, with a red accent, category icons and large photos of places. The layout is responsive and mobile-ready. There are six pages: home, listing, about, blog, a single blog post and contact.

The home page opens with a search bar for a keyword, a location and a category, followed by twelve category tiles, popular and recent listings, a special offers band, an about section with animated counters, a review slider, a How It Works section with a video and the latest blog posts. The listing page has its own search and twelve listing cards, each with a photo that opens in a lightbox, a category, an address, a phone number, a rating and a save button. The blog has post cards with pagination and a full post with tags, an author box, comments and a comment form, and the contact page pairs contact details with a working form. Directone gives you a ready-made front end for a city guide or a local business directory.

What’s new in 3.0

• Bootstrap 5.3.8 in place of the Bootstrap 5.0 alpha of the earlier release, compiled from Sass with only the parts the pages use, and plain JavaScript with no jQuery. Swiper 14 replaces tiny-slider on the review slider, PhotoSwipe replaces GLightbox for the listing photos, the How It Works video opens in a native dialog, and small built-in modules replace AOS and the counter script for the scroll reveals and counters. Rellax and animate.css, which loaded on every page but were never used, are gone. Lucide SVG icons replace Font Awesome 4.7, Ionicons and the Flaticon font, and a three-logo subset of Font Awesome 7 Brands draws the social logos, with the X logo in place of the old bird. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 17.4 MB and 49 requests to 2.2 MB and 38 requests, and the contact page from 5.0 MB to 650 KB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the first screen, and JPEG fallbacks over 500 KB are re-encoded. The download went from 25.8 MB to 8.1 MB.
• No third-party requests: Nunito Sans is self-hosted, the icons are local SVGs, the How It Works video loads from YouTube only after a visitor clicks play, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded Bootstrap and two icon fonts from CDNs, its font from Google Fonts, the Google Maps script and an analytics tag.
• Working forms: the contact form and the blog comment form send email through php/send-email.php, with validation, a spam trap and an in-page message, and the search forms on the home and listing pages send the keyword, location and category to the listing page. Before, none of these forms sent anything.
• Accessibility: a skip link, landmarks and one h1 per page, labelled links and form fields, save buttons that announce whether they are pressed, keyboard access to the menu, slider, lightbox and video dialog, visible focus rings, reduced-motion support and WCAG AA text contrast, with all text at 5:1 or better. The brand red was too light for white text and for red text on white, so the buttons, the active category, pagination and the special offers band use a darker red, red text uses a darker shade, and body text is a darker grey.
• Fixed: the script errors on every page are gone (the Google Maps script ran on pages without a map), and every category tile and listing card shows the icon of its own category (the card icons did not match their categories, and the four How It Works steps shared one icon). Listing titles, category tiles, footer links and the phone and email links, which pointed nowhere, now lead to the listing page, real pages or a call or email, and footer links to pages that do not exist are gone. The contact section no longer makes the page scroll sideways, and every page has its own title and description.
• New demo content: twelve fictional listings with their own names, addresses and phone numbers, fictional contact details, different reviewers, real blog titles and a full article in place of placeholder text, and corrected typos. Photos that showed shop signs and brand logos, landmarks lit at night or identifiable people are replaced with Unsplash photos.