A warm, light Bootstrap 6 coffee shop homepage for a fictional roaster, Wren Coffee House, with a filterable menu, story, reviews, location and an order-ahead dialog using the new Combobox.
How it works
The page lives in .wr-page, which pins data-bs-theme="light" and re-maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast and friends) to forest green, so buttons, chips and the stepper follow the brand.
- Strip and navbar:
.wr-stripnames the current roast. Thenavbar lg:navbar-expanduses a<dialog class="drawer drawer-start">on small screens. - Hero: a serif headline, two calls to action, a
.wr-factslist and.wr-hero-art, an arched Unsplash photo with a round pastry photo and an SVG "roasted in-house" sticker. The.wr-statusbadge is computed fromWR_HOURS: "Open now", "Opens today at…" or "Closed now". - Menu: Bootstrap 6
chip theme-primarybuttons withdata-wr-filterhide or show.wr-itemrows by theirdata-wr-cat, updatearia-pressedand announce the count. - Story: text, a photo and a four-step
stepper md:stepper-horizontalinside.contains-inline(vertical on phones, horizontal from 768px). - Reviews, location and FAQ: quote cards, a CSS-drawn map, hours where today's row gets
.wr-today, and an exclusive<details name="wr-faq">accordion. - Club signup: an
input-groupform; an invalid email gets.is-invalid, a valid one shows a spinner and a simulated request, then#wr-toast. - Order ahead:
#wr-orderis a<dialog class="dialog">with a searchable Combobox (data-bs-name="drink"creates a hidden input), abtn-checksize group, a pickup select and a name field. On submit the script readsFormData, closes the dialog and shows the pickup time in the toast.
Customization
- Change
--wr-forestand--wr-terracottain.wr-page(style.css) and the matching--bs-primary-*overrides to rebrand. - Edit
WR_HOURSinscript.jsand thedata-wr-daysrows of.wr-hoursto set your opening times. - Add menu rows with a new
data-wr-catvalue and a matching chip withdata-wr-filter. - Add drinks to the order dialog as
menu-itembuttons withdata-bs-value. - Replace the simulated handlers in
script.jswithfetch()calls to your ordering system and newsletter provider. - Swap the photos; they come from Unsplash and should be replaced with your own café and drinks.
- Remove
.wr-stripor.wr-faq-sectionfor a shorter page.
Accessibility
A skip link jumps to #wr-main. Filter chips use aria-pressed, the map is one labelled role="img", the toast uses role="status", and the drawer, dialog and accordion are native <dialog> and <details> elements with keyboard support. Focus outlines are visible and smooth scrolling is disabled under prefers-reduced-motion.
Bootstrap 6 notes
Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Compared with Bootstrap 5: Offcanvas is now Drawer, Modal is Dialog, btn-solid theme-primary replaces btn-primary, toggle buttons put the input inside a label.btn-check, the accordion is native <details>, and Chips, Stepper and Combobox are new built-in components. The Combobox has no public reset method, so the chosen drink stays selected after an order. The script imports Dialog, Drawer and Toast from the bundle as an ES module.
