Grunt

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Grunt is a one-page website template for creative studios and design agencies, built on Bootstrap 5, with a split-screen hero and a menu that slides in from the side. The layout is responsive and mobile-ready and works in all popular web browsers. Everything sits on one page, with the menu leading to each section: home, what we do, about us, portfolio, gallery and contact.

The page opens with a photo slider beside the studio’s name and a “Start a project” button. Below it you will find six service cards, an about block with a video that opens in a dialog, the team, three projects with client quotes, testimonials, a photo gallery with a lightbox, a working contact form and a footer with a newsletter form and social links. Grunt gives you a ready-made site to present your studio, its services and its work.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.3.1 and jQuery), compiled from Sass with the original colours and the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the hero slider, PhotoSwipe 5 replaces Fancybox in the gallery, CSS columns replace Isotope for the gallery layout, a keyboard-operable dialog replaces the off-canvas menu, and the sticky header and smooth scrolling need no plugins. AOS, animate.css and the jQuery UI, date picker, countdown, Magnific Popup, Slick and Stellar files, which nothing on the page used, are gone. Lucide SVG icons replace the IcoMoon font and an unused icon font, and a 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 page: the page went from 3.0 MB and 44 requests to 1.2 MB and 34 requests, and the download from 3.5 MB to 2.4 MB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the first screen, and the first hero photo is preloaded.
• No third-party requests: Roboto is self-hosted, the icons are local SVGs, the about video loads from YouTube’s privacy-enhanced player only after a click, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, the page loaded its font from Google Fonts.
• Working forms: the contact form and the newsletter form in the footer send through php/send-email.php, with validation, a spam trap and an in-page message. Before, neither form had field names or an action, so nothing could be sent.
• Accessibility: a skip link, a main landmark and one h1 (the logo was a second one), a labelled menu button and a menu panel that keeps keyboard focus inside and closes with Esc, gallery photos that open from the keyboard, names on the social links, labelled form fields, descriptive alt text, visible focus rings (the old styles removed them) and WCAG AA text contrast, with the reviewed menu and photo-overlay text at 6.4:1 or better: darker body and meta greys (they were as light as 2.1:1 on white) and a white fill behind the hero button on phones and tablets, where it sat over the photo.
• Fixed: the footer’s Team link goes to the team section (the team reused the services section’s id, so the link went nowhere), every “Learn more” button leads to the portfolio, and “Start a project” and the project links (“Visit website”, now “Start a similar project”) lead to the contact form instead of nowhere. The third project’s link shows again (a broken attribute had swallowed it), the client photos beside the quotes are round as intended, and the hero starts below the header instead of sitting 30 px under it. The page has its own title, description and social sharing tags.
• New demo content: studio copy, six services, team bios, three named projects and quotes from fictional clients in place of placeholder text, and brand-free Unsplash photos for two hero slides, a team portrait and ten portfolio and gallery photos.