Overview

An HTML template for a bespoke tailor and atelier making suits, coats and womenswear by hand, to measure, for men and women. Sartora ships three home pages, a light and a dark theme, right-to-left support, a pound / dollar / euro switch, and logic that is worked out rather than typed in: a made-to-measure builder that draws the garment in the chosen cloth and prices it with its weeks and fitting dates; a measurement guide that works out the sizes; fittings booking from the tailors’ diaries; an alterations estimate with the ready day; a cloth library; open now from the clock; and a ready-to-wear shop with colours, sizes, a bag, coupon, shipping zones and VAT.

What’s included

• 3 home pages, each with its own scroll moment: The Jacket Assembles (a jacket built on the dress form piece by piece — canvas, fronts, sleeves, the lapels folding over, the buttons), The Fabric Book (a bunch of swatches turning page by page while the panel reads each cloth) and The Three Fittings (one jacket basted, forward and finished)
• A white theme by default and a dark theme 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
• A WebGL pattern paper drifting through the paper bands, the page titles and the footer, and the footer’s jacket front whose lapel and collar fold into shape in 3D
• The made-to-measure builder: 10 garments, 2 makes, 27 cloths from the fabric book, 3 lapels, 4 buttons, 5 linings and 4 finishing touches; the price, the deposit, the weeks and the date of every fitting, the garment drawn in the cloth
• The measurement guide: 12 measurements on a drawn figure with how to take each one; jacket size and length, drop, trouser waist, collar, leg and dress size worked out as you type, saved for the builder and the booking
• Fittings booking in five steps from the tailors’ diaries: the appointment, the tailor (only those who take it, on the days they are in), a day and a free start, your details, confirm
• The alterations estimate: 19 jobs by garment, the price and the ready day in working days, express at ×1.5 in half the time
• The cloth library: 27 cloths by season, weight, weave, colour and mill with a quick view, each drawn from its weave; “use this cloth” carries it to the builder
• The ready-to-wear shop: categories, fit, price filter, sort and search, colours that swap the photograph, sizes, the product page, bag, coupon, shipping zones, VAT included, collection at the atelier, checkout with an order number, wishlist
• Services, the bespoke suit, commissions with filters and a lightbox, the tailors and a tailor profile, the journal, FAQ with search, account pages, coming soon, 404
• Tape Measure preloader, Shear Cut photo reveals, word-rise titles, a basting stitch on hover, Swiper sliders and Fancybox video popups
• Fully responsive, valid HTML5, no console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open sartora/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the atelier clock, the builder, the sizes, the booking, the alterations estimate, the cloth library and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the sartora/ 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 hours, the garments and their prices, the makes, the cloths, the fittings, the tailors, the alterations, the sizing, the products and the shop rules live in one place — see Atelier 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 sartora/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

sartora/
├── *.html                              the 32 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
    │   ├── 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 (38 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
        ├── atelier/                     22 files
        ├── banner/                      8 files
        ├── blog/                        7 files
        ├── couture/                     6 files
        ├── faces/                       6 files
        ├── flags/                       6 files
        ├── hero/                        4 files
        ├── logo/                        5 files
        ├── menu/                        3 files
        ├── pill/                        6 files
        ├── services/                    4 files
        ├── shop/                        26 files
        ├── team/                        7 files
        └── work/                        12 files

To publish the site, upload the contents of sartora/ 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 --sr-night-rgb) — change both together.

White is the ground and paper the quiet bands; forest night sets the dark bands, the footer and the primary buttons. Chalk camel is the tailor’s chalk: the basting dashes, the outlines of the stitched buttons and the accents on dark grounds. Olive carries the small accent type on light grounds (eyebrows, links, the italic accent words), deep enough to read; khaki and sage tint the pattern paper and the drawings, oxblood the linings. --sr-bg, --sr-surface, --sr-panel, --sr-heading and --sr-text are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Jost (the headings, the body, the menu, the buttons and the small labels in tracked capitals) and Ibarra Real Nova (its italic for the subtitles, the prices and the accent word in each title). Swap them by editing the Google Fonts link and the --sr-ff-head / --sr-ff-body / --sr-ff-serif variables.

Logo

The logo is the word SARTORA in widely tracked capitals with its O drawn as a four-hole suit button. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — ink lettering, for white grounds (the headers in the light theme, the mobile menu)
• logo-light.png — paper lettering, for the headers over the hero photographs, the footer and the dark theme
• button.png / button-light.png — the button on its own, for the preloader’s tape case
• favicon.png — the camel button on a forest square, 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

Sartora opens white: the light theme is the default and needs no attribute. Every header (and the mobile menu) has a theme switch that dims the lights. The choice is saved in the browser under the key sartora-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees the white page first. 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.
• Drawings — the canvases (the dress form and the garments, the figure, the fabric book, the footer’s lapel) read their inks from the --cv- and --lp- tokens, which the dark block swaps; the pattern paper reads --gl-1 to --gl-3.
• Logo — the light logo shows on photographs and in the dark theme.
• 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.

Atelier Logic

The figures on every page come from one data block, JS block 09 Sartora Data near the top of main.js (var SARTORA). Edit it once and the prices, weeks, sizes, slots, dates and totals follow. Prices are in pounds sterling; the currency switch shows them in GBP 1, USD 1.27, EUR 1.17 (key sartora-currency), whole units from a hundred up, and prices written in the pages carry a data-gbp attribute so the switch can repaint them. Times are minutes after midnight (600 = 10:00 am); weekdays run 0 = Sunday to 6 = Saturday.

The made-to-measure builder

A commission is the make’s price for the garment, the cloth at its price per metre for the metres the garment takes (with 1.4 m more for a second pair of trousers), then the lapel, the buttons, the lining and the finishing touches. The deposit is half. The weeks are the make’s gaps stretched by the garment’s factor, plus the mill’s weeks before the first fitting when the cloth is not in stock; each fitting falls on the next open day.

The measurement guide

The jacket size is the chest in inches, halved and rounded to an even size (34 to 56), with S, R or L by height; the drop is chest minus waist in inches (7 and over athletic, 4 and over regular, else full); the collar is the neck in inches plus half an inch, to the nearest half; the dress size takes the larger of the bust and the hips on a 5 cm scale from UK 6 to 22.

The alterations estimate

The price is the sum of the jobs ticked; the ready day is the longest job’s working days counted on the days the atelier is open. Express multiplies the price and halves the days, never under one.

How the shop totals

Prices include VAT: the bag shows the VAT inside the total, not on top of it. The coupon comes off the goods before the free-shipping check.

The bag, the wishlist, the applied coupon, the commission from the builder, the measurements, the chosen cloth, the bookings and the orders are kept in the browser (localStorage), so they follow the visitor from page to page and appear in the account. 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 Atelier Shop) to []. Checkout and booking confirm on screen with a reference — connect them to your own systems to take real orders and appointments.

WebGL & Drawings

One small WebGL shader draws the pattern paper — the faint markings of a dressmaker’s pattern drifting across the paper bands, the plain page titles and the footer: grain lines, notches, cutting crosses, dashed seam allowances and button marks, each turned to its own angle. Each layer is one canvas:

<canvas class="sr-gl" data-gl="pattern" data-gl-density="0.8" aria-hidden="true"></canvas>

• Density — data-gl-density sets how close the marks sit (1 = one mark to every 170 pixels; lower is sparser).
• Colours — camel, olive and sage: --gl-1, --gl-2, --gl-3 and the strength --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.

The footer’s jacket front is cut flat from the pattern with its lapel and collar lying open; in 3D, the lapel turns over along the roll line, the collar folds down along its own crease, a button is sewn on, and it opens out again — origami fold geometry, each piece a flat facet turned about its crease and shaded by the light (<canvas data-lapel>, block 37). The pointer tilts it. Every cloth and garment on the site is drawn by block 10: the weave of each cloth from its two colours, and the garment on its dress form in that cloth; the scroll moments (data-assembly, data-book, data-fittings-moment, blocks 20–22) are drawn the same way, follow the theme tokens and rest in their finished state for reduced motion.

RTL (Right To Left)

Sartora 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) beside the light / dark switch lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the language and the direction (keys sartora-lang and sartora-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 every move that must mirror follow it on their own. Prices, times and measurements keep reading left to right inside their rows, and the drawn garments and the figure keep their sides.

JavaScript Guide

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

• 01–08 — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Layers. The core every page shares: the Tape Measure preloader, the header, the Shear Cut and word-rise reveals, the theme and direction switch and the WebGL pattern paper.
• 09–12 — Sartora Data, Cloth & Garment Drawing, Custom Select, Currency. Sartora Data holds every figure; Cloth & Garment Drawing weaves every cloth and draws every garment on its dress form; the pound / dollar / euro switch repaints every price.
• 13–19 — Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: sliders, accordions, filters, search, the newsletter, choice cards.
• 20–23 — The Jacket Assembles (Home 01), The Fabric Book (Home 02), The Three Fittings (Home 03), Swatches & Drawn Garments. The scroll moments: the jacket assembled on the dress form (Home 01), the fabric book turning swatch by swatch (Home 02) and one jacket through its three fittings (Home 03); the drawn swatches and garments on every other page.
• 24–36 — Atelier Clock, Made-To-Measure Builder, Measurement Guide, Fittings Booking, Alterations Estimate, Cloth Library, Contact Form, Atelier Shop, Account Forms, Account Page, Article Tools, Demo Forms, Launch Countdown. The feature pages: open now from the clock, the made-to-measure builder, the measurement guide, fittings booking, the alterations estimate, the cloth library, contact, the shop, accounts, the journal, demo forms, the countdown.
• 37–38 — The Lapel (Footer), FAQ Search. The footer’s lapel folding into shape, and the 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 drawn ties, pocket squares, scarves and gift card and the language flags are included and ready to use; the cloths and garments are drawn by the script and need no images. 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 newsletter, booking, checkout, account, 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: Jost, Ibarra Real Nova

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.