Bakery Homepage Template

A warm Bootstrap 6 homepage template for a neighbourhood bakery, Rosemary & Rye, with a tabbed product menu, story, cake order form, reviews and a Bread Club sign-up.

How it works

Everything sits inside .rr-page, which carries data-bs-theme="light" and maps the Bootstrap 6 primary role (--bs-primary-bg and friends) to raspberry. Fonts: Gloock, Outfit and Caveat for .rr-script labels.

• Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-start"> for the mobile menu. "Menu" opens a .menu; the tray button shows a badge (data-rr-count). The script syncs aria-expanded and closes the drawer after a link.
• Hero: an opening-hours pill (.rr-open) set from the visitor's clock, the arched photo .rr-arch, the rotating SVG stamp .rr-stamp and the .rr-special card.
• Today on our shelves: nav nav-pills tabs switch three .tab-pane panels of product cards (.rr-item). Each .rr-add button adds its data-rr-item to the tray, updates the badges and summary, and shows #rr-toast.
• Story: a photo collage plus a stepper sm:stepper-horizontal inside .contains-inline that shows a day at the bakehouse.
• Cake order: <form data-bs-validate novalidate> with a native select, a Combobox for the pickup bakery, btn-check radio labels for the size, a Datepicker and a message field with a live character count. Size radios update the total from data-rr-price. The earliest pickup is computed as two days from today, so the calendar never goes stale. Submit validates, shows a spinner, simulates the request and confirms with a toast.
• Reviews and CTA: quote cards and a band whose button opens #rr-club, a <dialog class="dialog"> with radio plans.

Customization

• Change --rr-berry, --rr-cocoa and --rr-butter on .rr-page in style.css to rebrand; adjust the --bs-primary-* overrides next to them so buttons follow.
• Set OPEN_HOUR and CLOSE_HOUR at the top of script.js to your real opening hours.
• Edit data-rr-price on each size radio to change cake prices.
• Change addDays(today, 2) in the Datepicker options to require more or less notice.
• Replace the setTimeout in the order submit handler with fetch() to your order endpoint.
• Remove a whole <section> (for example .rr-story) and its navbar link for a shorter page.
• The photos come from Unsplash; replace them with photos of your own bakes.

Accessibility

A skip link jumps to #rr-main. Tabs use role="tab" with aria-selected, every add button has a descriptive aria-label, and the tray summary is an aria-live region. Form fields have labels, invalid fields get .is-invalid and focus, and the toast uses role="status". The stamp and ribbon animations stop under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Bootstrap 5 developers will recognise the replacements: btn-solid theme-primary instead of btn-primary, a Drawer navbar instead of navbar-collapse, Menu instead of Dropdown, Dialog instead of Modal, form-control on <select> instead of form-select, and data-bs-validate instead of needs-validation. New components used: Combobox, Datepicker and Stepper. The script imports Datepicker, Dialog, Drawer and Toast from the bundle as an ES module. The Combobox selection stays after the form resets.