Delicious is a recipe and food blog template, built on Bootstrap 5, with a clean, minimal design that puts food photos first. The layout is responsive and mobile-ready. There are eight pages: home, recipes, recipe page, blog, blog post, about, contact and elements.
The home page has a hero slider, two feature cards, best and latest recipes, a newsletter sign-up and a full-width Instagram strip, and the menu has drop-downs and a mega menu with courses, diets, popular recipes and a recipe slider. The recipes page lists 20 demo recipes that can be searched by course, diet and keyword, and each recipe page shows its own photo, ingredients and method. The blog can be filtered by category and month, posts and recipes have a comment form, and the contact page has a contact form and a map that loads on click. Delicious gives you a ready-made site for sharing recipes and cooking tips.
What’s new in 3.0
Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.0 and jQuery 2.2.4), compiled from Sass together with the theme and the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 runs the hero slider and the photo slider in the mega menu, small built-in modules handle the mobile menu, the counters and the map, and the 140 KB bundled plugin file is gone. npm run build (Dart Sass and esbuild) compiles the stylesheet and scripts and writes the recipe and blog content into the pages.
Lighter pages: the home page went from 0.99 MB and 51 requests to 0.24 MB and 40 requests. Every photo has an AVIF version with the JPEG or PNG as the fallback, real dimensions and lazy loading below the first screen, and the full-page preloader that hid the page until everything had loaded is gone. The download grows from 5.76 MB to 12.15 MB because every recipe now has its own full-size photo.
No third-party requests: Open Sans is self-hosted, Font Awesome 4.7, the menu icon font and the PNG food icons are replaced by Lucide SVG icons and a small social-logo subset (the Twitter bird is now the X logo), the logo and favicon are SVG, and a Google Analytics 4 snippet stays commented out until you add your own ID. The contact page map is an OpenStreetMap map that loads only when a visitor clicks “Show map”. Before, every page loaded its web fonts from Google Fonts and the contact page loaded the Google Maps script.
A working recipe blog: 20 recipes and 6 blog posts are kept as data, and every card, title, photo and cooking time comes from the same record. The new recipes page searches by course, diet and keyword and shows 9 recipes per page, the recipe page and the new blog post page show the recipe or post named in the address, and the blog list filters by category and month and has pagination. Real recipe, about and contact copy replaces the Lorem ipsum. Before, every recipe, blog and menu link went to the same page or nowhere.
Working forms: the contact, comment and newsletter forms send through php/send-email.php and php/subscribe.php (PHP on your host), with a spam trap and an in-page message, and the site search and the recipe search work. Before, the form fields had no names, so nothing could be sent.
Accessibility: a skip link, landmarks and one h1 per page, a mobile menu that keeps keyboard focus inside and closes with Esc, drop-downs and the mega menu that open from the keyboard, names on icon-only links, labels on the form fields, visible focus rings and WCAG AA text contrast, with a deeper green behind the white button text, a darker green for green text, darker greys and darker rating stars.
Fixed: every page marked Home as the current menu item, and the contact page was titled “Recipe” (each page now has its own title and description); card and slide titles did not match their photos; the recipe page showed one photo three times; the slider arrows were hidden until hovered (they are always visible now, 48 px); and the menu had placeholder “Dropdown” items and three identical mega-menu columns.