Flour & Fold | Template guide

Start here

Flour & Fold is a soft editorial bakery landing page. It includes a responsive navigation, full-width food hero, pastry feature, filterable HTML menu, sharing-box feature, bakery gallery, visit details, pre-order inquiry form, FAQs, and guest-facing Privacy and Terms of Use dialogs.

Extract the ZIP and keep the complete flour-and-fold folder structure.
Open index.html in a modern browser. No build process or package installation is required.
Edit the business details and menu, configure the email recipient, and replace the sample contact information.
Review the launch checklist below before making the page public.

All styles, scripts, photographs, and icons are local. The page does not require a CDN, font service, map embed, or API key to render.

Files at a glance

flour-and-fold/
  index.html
  README.html
  LICENSES.txt
  assets/
    css/style.css
    js/main.js
    icons/fold.svg
    images/hero.webp
    images/raspberry.webp
    images/bakery.webp
    vendor/bootstrap/bootstrap.min.css
    vendor/bootstrap/bootstrap.bundle.min.js

Keep the vendor folder: Bootstrap’s stylesheet supplies core navigation, form, and dialog styles; its bundled JavaScript powers collapses and dialogs. Both local files must remain at the referenced paths. File and folder names are case-sensitive on many servers.

Make the bakery yours

Edit visible content in index.html: the title and description in the head, logo text, hero copy, product feature, menu categories, names, prices, story, address, phone, email, hours, and FAQs. Search for Flour & Fold, flourandfold.example.com, 555-0148, and Example Lane to locate sample details.

The included address and contacts are fictional, prices and hours are demonstration content, and photographs are illustrative. Replace them with approved business information and imagery. Update the demonstration notice once this work is complete. No testimonials, awards, or sourcing credentials are claimed.

The current area-map link opens a general Pasadena map, not the fictional address. Replace its query with your real business address and keep the new-tab indication. Product prices are displayed as USD; the form does not compute totals or taxes. Keep serving quantities and box contents consistent wherever repeated.

Menu ingredients are descriptive, not dietary guarantees. Update allergy notes with accurate information and invite guests to discuss preparation directly. Do not add dietary certifications or sourcing claims without supporting facts.

Colors, type, photography, and icons

CSS variable	Color	Role
--vanilla	#FFF9E8	Page background and light surfaces
--raspberry	#B83B64	Primary buttons and accents
--peach	#F5C4AC	Soft bands and highlights
--plum	#492C42	Main text and dark sections

Change the variables at the top of assets/css/style.css. Georgia and Times New Roman provide editorial headings; Arial and Helvetica supply the interface text. These are device fonts, so no font downloads or additional font licenses are needed. Adjust --serif and --sans to use your own locally licensed fonts.

Replace WebP files in assets/images or update their paths in HTML, including data-photo on gallery buttons. Update alt text, image dimensions, captions, and modal descriptions. Hero and bakery images use landscape 3:2 proportions; the pastry image is portrait 2:3. Adjust object-position when changing a photo so important details remain visible on phones.

The logo mark is a local SVG at assets/icons/fold.svg, also used as the favicon. Edit its color and geometry or replace it. Keep decorative image alt text empty when adjacent words already identify the brand.

Menu controls and product preselection

Each menu category uses data-category. Its matching filter uses the same value in data-menu; all shows everything. Buttons announce selected states through aria-pressed. Keep category identifiers synchronized.

Each + control and featured-product CTA uses data-pick. Its value must exactly match an option in the #product select. Clicking it selects that product, focuses the select, and clears any stale email draft. Names, email, quantities, dates, and notes already entered remain unchanged.

Add or remove a product in both the visible menu and select options. Update any matching preselection buttons. Drinks have no pre-order button because they are listed for café visits. The “Mixed order / other inquiry” choice lets guests describe several products in their message; there is no shopping cart.

Configure the pre-order inquiry

At the top of assets/js/main.js, edit the BAKERY settings:

name: 'Flour & Fold'
recipient: 'hello@flourandfold.example.com'
timezone: 'America/Los_Angeles'
leadDays: 1
closedWeekdays: [1]
maxQuantity: 24

The current configuration accepts preferred pickup dates from tomorrow onward in Pasadena time, excludes Mondays, and requires a whole quantity between 1 and 24. JavaScript weekdays use 0 for Sunday through 6 for Saturday. The date rule is a calendar-day rule, not a guaranteed 24-hour preparation period.

Pickup time choices are in #pickupTime in the HTML: 8 am through 2 pm. Update those options, the visible hours, helper text, FAQs, and business settings together. Update the quantity input’s max attribute when changing maxQuantity. Units mean individual products or complete boxes; mixed orders are described in the message.

The form validates required name, email, product, quantity, date, and time. It then creates a reviewable draft in the browser. It does not send email, store submissions, reserve inventory, process payments, calculate prices, or confirm pickup. “Open email app” uses a mailto link. The visitor must review and send the email; the bakery must reply to confirm the request.

“Copy draft” uses the clipboard API when supported. If permission is unavailable, including some local-file contexts, the text is selected for manual copying. Long drafts may exceed an email client’s mailto limit; copying the draft is the fallback. The phone and email links provide additional contact options.

Editing a form field or selecting another product invalidates the existing draft. Reset clears all entries and the draft, including the quantity. Nothing is written to local storage or sent to a backend by this page. Browser autofill and restored-page behavior are controlled by the visitor’s browser.

To use a real ordering provider later, replace CTAs with your verified external link and update form descriptions, privacy wording, FAQs, and any affected README content. Do not describe a provider as included until you have integrated it.

Navigation, dialogs, and accessibility

Keep section IDs synchronized with links in the header, footer, and CTAs. The main navigation sticks to the top as visitors scroll; the small announcement strip scrolls away. The script pins the navigation to the viewport and reserves its space to prevent content jumps. It measures the header to keep section links clear; CSS provides a sticky fallback if JavaScript is unavailable. The expanded mobile menu can scroll on short screens. The mobile menu uses Bootstrap Collapse with target #mainNav. FAQ controls use unique IDs and data-bs-target values. Keep headings, labels, and associated ARIA attributes when editing.

Photography buttons use data-photo, data-title, and data-caption to populate #photoModal. Bootstrap provides Escape closing and focus handling; the custom script adds explicit Tab cycling. Photo dialogs return focus to their opener.

Use descriptive alt text for meaningful photographs, visible keyboard focus, clear button labels, and a logical heading structure. The skip link leads to the main content. Reduced-motion preferences disable smooth scrolling and transitions. Avoid adding essential content that is hidden until an animation runs.

Privacy and Terms of Use

The bottom footer controls open #privacyModal and #termsModal. Their text speaks to bakery guests, explains the email-draft behavior, and distinguishes page behavior from external email, hosting, and map services.

This wording is a starting point requiring review before launch. Customize it to match the bakery’s actual practices, contacts, and any services you add. Do not move these buyer instructions into the guest-facing dialogs. If you add analytics, tracking, backend forms, payments, or an ordering provider, revisit the policies and remove statements that no longer apply.

Keep both dialog headings, the scrollable body, close controls, keyboard behavior, and focus return. No unsupported cancellation rules, charges, retention periods, or compliance guarantees are included.

Responsive customization

CSS adapts at 1199, 991, 767, and 380 pixels. Bootstrap’s expanded navigation switches at 992 pixels. Use flexible widths and preserve the single-column phone layout. Avoid fixed widths on text, fields, buttons, and menu rows.

After editing, review at desktop width, portrait tablet, and 320–390-pixel phones. Confirm heading wrapping, hero contrast, visible buttons, usable menu filters, contained form fields, and scrollable policies. Keep comfortable section spacing and ensure long email addresses wrap.

Dependencies and notices

Bootstrap 5.3.8 and bundled Popper 2.11.8 are included locally under the MIT license. Complete notices are in LICENSES.txt. Preserve them when redistributing. HTML, custom CSS and JavaScript, local SVG artwork, and illustrative photographs are included as template assets; applicable purchase terms govern template use. System fonts are referenced, not redistributed.

Launch checklist

Replace all sample business details, menu information, hours, and illustrative venue imagery as appropriate.
Configure a working recipient in JavaScript and update every visible email and telephone link.
Align pickup choices, preparation preferences, closed days, quantity settings, and FAQs.
Review ingredient wording and both guest-facing policies for the real business.
Verify every local CSS, JavaScript, icon, and WebP path, including both Bootstrap files.
Check keyboard navigation, mobile menu, category buttons, product preselection, photo dialogs, FAQs, and footer policies.
Exercise invalid dates, required fields, draft preparation, email handoff, copying, editing, and Reset.
Review the final page at desktop, tablet, and small-phone sizes.

Troubleshooting

The layout looks unstyled or navigation becomes a list.: Check that assets/vendor/bootstrap/bootstrap.min.css is present and returns successfully. Confirm the custom stylesheet also loads. Keep paths and filename capitalization exact.
The menu or dialogs do not open.: Check bootstrap.bundle.min.js loads before assets/js/main.js. Check that targets and IDs match.
My newly added bake does not preselect.: Match data-pick exactly to the product select option. Preserve unrelated fields when changing the preselection code.
No email app opens, or copying fails.: Configure a default mail client or manually copy the draft to webmail. Clipboard permissions vary; manual text selection is the built-in fallback.
A pickup date is rejected.: Check tomorrow’s minimum in the configured timezone and the Monday closure rule. A requested date is never proof of stock or pickup availability.
An old style remains after editing.: Refresh the browser cache. If needed, use matching version query strings on the stylesheet and script references.