Overview

A warm, animated HTML template for artisan bakeries, pastry shops and bakery cafés. Flourise ships three home pages, a light and a dark theme, right-to-left support, and bakery logic that is worked out rather than typed in: whether each bakery is open now, the next batch out of the oven, today’s special, a menu that filters itself by diet, a cake builder that prices every choice, ordering ahead with real pickup times, a bread subscription, catering quotes, classes with seats left, and a shop with a bag, coupon, delivery and tax.

What’s included

• 3 home pages, each with its own scroll moment: The Baker’s Night (the night’s stages glide sideways while the bakehouse clock runs), the pastry case (cut-outs on three depths) and The Oven (a thermometer’s needle follows the scroll)
• Light and dark mode on one switch in every header, remembered between visits and applied before the page paints
• Right-to-left stylesheets and a flag language picker in every header: a right-to-left language turns any page around
• WebGL layers — flour dust in a warm beam of light, and a wheat sheaf turning in the footer — tinted by the theme colours
• The menu with category tabs, diet filters (vegetarian, vegan, gluten free, nut free), search and the baker’s picks
• A cake builder: size, sponge, filling, finish and decorations priced live, with the deposit and the earliest pickup day
• Order ahead in four steps with the bakery’s open days and half-hourly pickup times
• The Bread Club priced a month by plan, rhythm and delivery; an instant catering quote by guests, platter, extras and staff
• Classes with their next dates from repeat rules, seats left and seat booking; three bakeries with live open status
• The shop: filters, sort and search, product page, bag, coupon, free-delivery meter, tax, checkout with an order number, wishlist
• Bread explorer, the oven board, bakers, gallery, blog in six post formats, FAQ with search, account pages, coming soon, 404
• Stamp Press preloader, Proving Rise reveals, Swiper sliders and Fancybox lightboxes
• Fully responsive, W3C-valid, zero console errors

Getting Started

Thank you for choosing Flourise. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open flourise/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the menu filters, the cake builder, ordering ahead, the club, the quote, the classes and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the flourise/ folder to your hosting provider using an FTP client (such as FileZilla) or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All custom styling lives in assets/css/style.css (with a numbered Table of CSS at the top) and assets/css/responsive.css. Colours and fonts are controlled by CSS variables — see Colors & Fonts. The bakeries, their hours, the menu, the breads, the cake prices, the club, catering, classes and products live in one place — see Bakery Logic.

File Structure

Below is an overview of the key files and folders included in this template.

Folder Structure

The package unzips to two folders: Documentation/ (this guide) and flourise/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

flourise/
├── *.html                              the 30 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the forms
└── assets/
    ├── css/
    │   ├── style.css                   all custom styles, numbered Table of CSS (17 sections)
    │   ├── style.rtl.css               the right-to-left twin of style.css
    │   ├── responsive.css              breakpoints 1399 / 1199 / 991 / 767 / 575
    │   ├── responsive.rtl.css          the right-to-left twin of responsive.css
    │   ├── fontawesome-all.css         Font Awesome Free, loaded locally
    │   └── plugins/                    vendor stylesheets
    │       ├── bootstrap.min.css
    │       ├── bootstrap.rtl.min.css   Bootstrap for right-to-left pages
    │       ├── jquery.fancybox.min.css
    │       └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (36 blocks)
    │   └── plugins/                    vendor scripts
    │       ├── bootstrap.bundle.min.js
    │       ├── gsap.min.js
    │       ├── jquery-3.7.1.min.js
    │       ├── jquery.fancybox.min.js
    │       ├── ScrollTrigger.min.js
    │       └── swiper-bundle.min.js
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── bakery/                      35 files
        ├── blog/                        8 files
        ├── cutouts/                     12 files
        ├── decor/                       7 files
        ├── faces/                       4 files
        ├── flags/                       6 files
        ├── icons/                       30 files
        ├── logo/                        7 files
        ├── menu/                        3 files
        ├── seals/                       12 files
        ├── shop/                        15 files
        ├── team/                        6 files
        └── textures/                    2 files

To publish the site, upload the contents of flourise/ to your web root. Photos keep their folder, file name and size when you replace them, so no page needs editing.

Colors & Fonts

The whole design is driven by CSS variables declared at the top of style.css. Change a token once and every section, button and card updates. Colours used with transparency have an -rgb twin (for example --fr-gold-rgb) — change both together.

Charcoal is the ink of the buttons, the top bar, the night bands and the footer. Gold marks the stars, the date and role tags, the scored lines under every title and the timeline; small gold text uses the deeper gold text colour so it reads clearly. White and cream paper alternate as the section grounds, and the product ground matches the backdrop of the shop photographs. --fr-bg, --fr-surface, --fr-heading and --fr-text are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode). The cream paper grain is an image, img/textures/paper.jpg, named once in --fr-paper.

Fonts

Two Google Fonts are loaded in the head of each page: Cormorant (the capital headings, the menu, prices and the italic gold accents) and Mulish (body text, labels and the small tracked capitals of buttons and tags). Swap them by editing the Google Fonts link and the --fr-ff-head / --fr-ff-body variables.

Logo

The logo is the name FLOURISE in capitals with a gold wheat ear in place of the accent over the I, and a small tracked line under it. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the headers
• logo-light.png — for dark grounds: Home 3’s header over the hero, dark mode
• logo-framed.png — the boxed version in the footer
• seal.png / seal-light.png — the round ARTISAN BAKERY stamp on the page-title banners
• mark.png — the F and wheat ear the preloader presses into the dough; favicon.png — the browser tab icon

The logo’s lettering appears only inside the images. To use your own logo, replace these files; the header sizes the logo by its height, so a wider or narrower file needs no CSS change.

Light & Dark Mode

Every header (and the mobile menu) has a theme switch. The choice is saved in the browser under the key flourise-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees a light flash. The switch sets data-theme="dark" on the <html> tag.

• Tokens — the dark values sit in one block, [data-theme="dark"] { … }, right after :root in style.css. Change a dark colour there; the cream paper swaps to its espresso twin.
• Bands that stay dark — sections with the class is-night (The Baker’s Night, The Oven, the numbers band, the footer) are dark in both themes. A light card placed inside one takes fr-on-light to keep its own ink.
• Illustrated icons and seals — each ships in a charcoal and a cream ink; the right one shows by theme and ground on its own.
• Start dark — to open the site dark for first-time visitors, add data-theme="dark" to the <html> tag of each page; the switch still works and is still remembered.

Bakery Logic

The figures on every page come from one data block, JS block 09 Bakery Data near the top of main.js (var BAKE). Edit it once and the cards, prices, hours, menus and totals follow. Times are minutes after midnight (390 = 6:30 am), weekdays run from 0 (Sunday), prices are in US dollars.

Open now and the oven

Block 10 Bakery Clock compares the visitor’s clock with each bakery’s hours (Old Town opens 7:00 am – 7:00 pm on weekdays and closes on Mondays in the demo) and writes “Open Until” or “Opens” with the next opening; it also finds the next batch in bakes and today’s special by weekday.

The cake builder

The size sets the base price, the servings and the days of notice; sponge, filling and finish add their price times the size factor; decorations and the inscription add flat. The earliest pickup is today plus the notice days, moved to the chosen bakery’s next open day.

Ordering ahead

Block 26 Order Ahead lists the chosen bakery’s open days for the next 10 days and its pickup times every 30 minutes from opening to 60 minutes before closing; today’s times start 120 minutes from now, and whole cakes or boxes move the first day to tomorrow. Continue never blocks; Confirm checks the bakes, the time and the details and gives a reference made from the date.

The Bread Club and catering

How the shop totals

The bag, the wishlist and the applied coupon are kept in the browser (localStorage), so they follow the visitor from page to page. The first visit starts with a small demo bag and wishlist so every shop page has something to show; to start empty, set the two demo lists in doShop() (block 31 Bakery Shop) to []. Checkout, ordering ahead, the cake request, the club, the quote and class booking confirm on screen with a reference — connect them to your own systems to take real orders.

WebGL Layers

Two small WebGL shaders draw the moving layers: dust — fine motes of flour drifting through a warm, slanted beam of light (The Baker’s Night, The Oven, the bread explorer, the numbers band, coming soon, 404) — and sheaf — a sheaf of wheat turning slowly in a moving light, the footer’s signature. Each is one canvas:

<canvas class="fr-gl" data-gl="dust" aria-hidden="true"></canvas>

• Colours — each layer reads three colours and an opacity from CSS variables on its canvas or section: --gl-1, --gl-2, --gl-3 and --gl-alpha. The theme switch repaints them.
• Performance — a layer only runs while its section is on screen and the tab is visible. Visitors who prefer reduced motion get one still frame. Without WebGL, the section’s own background shows.
• Remove one — delete the canvas; nothing else depends on it.

RTL (Right To Left)

Flourise is RTL-ready: the layout with its paddings and margins, the sliders and the animations all mirror. Right to left comes from the stylesheets, not from separate pages: the language picker (a flag and a code) in the top bar and the mobile menu lists the languages that read left to right and right to left. Choosing Arabic stores the language and the direction (keys flourise-lang and flourise-dir) and reloads; the one-line script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute before the page paints. Nothing is translated — you bring your own right-to-left copy. To make a page right to left for good:

1. Set The Direction

Add dir="rtl" to the page’s <html> tag (and set lang to your language):

<html lang="en" class="no-js" dir="rtl">

2. Swap Three Stylesheets

The scripts read the direction from the dir attribute: sliders and The Baker’s Night glide the other way on their own. The oven thermometer still reads cold to hot from left to right.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 36 numbered blocks (see the JS INDEX comment at the top of the file):

• The core — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Layers. The Stamp Press preloader, the header, the Proving Rise reveals, the theme and direction switch and the WebGL layers.
• The data — Bakery Data holds every figure; Bakery Clock works out open now for each bakery, today’s hours, the next batch out of the oven, today’s special and the next date of every class.
• The scroll moments — The Baker's Night, The Pastry Case, The Oven — one on each home page.
• The bakery logic — Bread Explorer, Menu Filters, Cake Builder, Order Ahead, Bread Club, Catering Quote, Classes & Oven Board, Bakery Shop.
• Shared components — Custom Select, Counters & Rings, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards, Contact Form, Account Forms, Article Tools, Demo Forms, Launch Countdown, FAQ Search.

Each block is a self-contained doSomething() function that safely skips pages where its section is not present — you can delete any block you do not need. Every animation respects prefers-reduced-motion automatically: content appears in its final state and the scrubbed scenes rest in place.

Images

The download package ships with neutral placeholder images so you can see every layout at the correct dimensions. Replace them with your own photos using the same file names, or update the src attributes. Images are grouped inside assets/img/:

The logo files, the illustrated icons, the seals, the line drawings, the paper textures, the language flags and the Flourise packaging shots are included and ready to use. All demo photography shown on the live preview is for preview purposes only and is not included in the download.

Contact Form

The contact form and the comment form post to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The Bread Letter, notify-me, order ahead, cake request, bread club, catering quote, class booking, checkout, login, register and forgot-password forms are demo forms: they confirm on screen and are ready to connect to your own systems. To activate the mail handler on your server:

1. Set your email address

Open sendmail.php and replace the placeholder recipient at the top of the file with your own address:

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support (virtually every shared host). It will not send from your local computer or from a static-only host — there the form shows a friendly “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

Invisible reCAPTCHA v3 spam protection is already built into the handler. It stays dormant until the form submits a token — that is why no badge or checkbox appears out of the box. To switch it on:

• Create v3 keys (a site key and a secret key) for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• In contact.html, add a hidden token field inside the form and load the reCAPTCHA script with your site key just before </body>:

<!-- inside the form -->
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

<!-- before the closing </body> tag -->
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
  grecaptcha.ready(function () {
    grecaptcha.execute('YOUR_SITE_KEY', { action: 'contact' }).then(function (token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

Once the token field is present, sendmail.php verifies every submission with Google and rejects low-score (bot) requests.

Credits

This template is built using the following open-source libraries and resources.

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Cormorant, Mulish

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embeds and the video popups.

Support

If you have any questions or need help with the template, please reach out through the marketplace where you purchased the template: open the item there and send us your question from its support page. We aim to respond within 24–48 hours.