Clothing Brand Template

Quick Start

Upload the folder to any static host and open index.html. Keep the six HTML files beside assets/ so relative links keep working. There is no build step, framework or package to install.

Pages load normally. In browsers that support cross-document view transitions the change between pages is a short fade (off under reduced motion); elsewhere it is an ordinary page load.

GSAP with ScrollTrigger, Draggable, InertiaPlugin and Flip load from a CDN. Images, fonts, styles and the script are bundled locally.

Using It With Your Own Design

1. Photographs. Replace the files in assets/img/ (see Images and Credits). Heroes and bands are full-bleed, so any landscape photo of at least 1600px works; set the focal point with the --pos style on each hero <img>. Each hero also has a narrower portrait crop for phones (hero-*-m.webp, in the <source> above its <img>), so phones download about half the pixels; replace both, or delete the <source> to use the one photo everywhere. The product photo and the story page's founders photo have smaller rungs (forth-day1-760.webp, look-moto-680.webp) in their srcset for the same reason.
2. Sticker words. Every hero headline is a stack of .sticker spans inside the h1. Change the words, the --r rotation and the edge shape (sticker--b, sticker--c). Pen notes are .sticker--pen.
3. Products. The shop grid is plain links with data-fit and data-wash; the product page is one hand-written spec sheet. Rename "Forth", change prices and sizes in the HTML.
4. Wear-in slider. Supply four photographs of the same item at four ages (see Wear-in slider).
5. Identity. Replace "Pryce", the round SVG mark (repeated in each page's nav and footer so each page stands alone, and in assets/favicon.svg), the address and the footer promise.
6. Colour and type. Edit the tokens at the top of assets/style.css (see Palette).

Everything visual lives in assets/style.css; everything interactive lives in assets/script.js, one function per feature that returns early when its markup is absent. Delete a section or a page and the rest keeps working.

Pages and Configuration

Hooks you will meet in the markup:

• data-peel-area around a set of data-peel stickers, and data-restick on the button that puts them back. Peeling is for mouse users on wider screens; touch scrolls the page as usual.
• data-rail on a horizontal scroller, with data-rail-prev and data-rail-next buttons in the same section.
• data-item with data-fit and data-wash in data-grid; chips carry data-filter (the group) and data-value.
• data-fitguide: data-fit-tab buttons and data-leg outlines share keys; the measurements are the FITS table in initFitGuide.
• data-wear: four figure[data-stage], notes with data-at (the stage at which they appear), and data-wear-range.
• data-compare with data-compare-range; data-jean-map with data-spot buttons and matching data-ring paths; data-ticket on the form.
• data-look buttons and the data-lightbox dialog on the story page.
• data-buy on the product form, carrying the product as data-id, data-name, data-wash, data-price and data-img; data-bag-add buttons with the same attributes plus data-size; data-bag-page around the bag page and data-bag-count on each nav count.
• data-reveal, data-reveal-group and data-hero-fade for the gentle entrances; data-drift for the slow drift on photo bands.
• data-slap on a hero .sticker (and the hero button) slaps it on in CSS from the first frame, without waiting for the script; --i sets its place in the stagger. Keep it on the inner .sticker, not the .sticker-wrap that a peel drags.

Stickers

A sticker is ordinary text: a .sticker span with paper background and a torn-edge clip-path (--tear-a, --tear-b or --tear-c in the tokens), wrapped in a .sticker-wrap that carries the drop shadow (a clip would cut it off). Headline stickers are always paper with ink, so they stay readable over any photograph you choose. Under 760px wide, long sticker lines wrap onto two lines rather than overflowing.

Wear-in Slider

The slider is a native <input type="range"> from 0 to 3, so mouse, touch, keyboard and screen readers get real slider behaviour. Dragging crossfades between neighbouring photographs; letting go settles on the nearest stage. Arrow keys, Page Up and Page Down step a whole stage, Home and End jump to day 1 and year 2, and the four labels below the track are buttons. The spoken value is the stage name and its caption.

Shoot the four photographs from the same height, angle and framing on the same backdrop, 4:5 portrait. Put them in the four figure[data-stage] elements in order and rewrite the figcaption of each: the caption becomes the line under the stage name and the text read aloud. Each note is a .wear-note with data-at and a position in percent of the photo, paired in order with an arrow path with the same data-at in the SVG (its viewBox is 100 by 125, the photo's proportions). Move them to point at your own details.

With JavaScript off the four stages appear as a row of captioned photographs. Under reduced motion the slider steps between stages without crossfades and the notes appear without drawing.

Bag

The bag is a front end only: it never charges, reserves stock or sends anything. It lives in sessionStorage under pryce-demo-bag, so it lasts for the visitor's current tab. Each line is { id, name, wash, size, price, img, qty }; adding the same id and size again raises the quantity. The nav shows "Bag" with a count on every page and links to bag.html.

• Adding. The product page's Add to bag reads the product from the data- attributes on its data-buy form and the chosen waist and leg, then says what went in with a link to the bag. The picks on an empty bag page are data-bag-add buttons with a fixed size; copy one to add a pick.
• The bag page. Each line has a photo, a size tag, the wash, the unit price, a quantity stepper (native buttons, 1 to 9) and Remove. The ticket shows the subtotal, UK delivery and the total. Delivery is free over £150 and £6 below that: FREE_DELIVERY_OVER and DELIVERY at the top of the bag code in assets/script.js. Check out shows an in-place notice that nothing was charged.
• Motion. A removed line peels off like a sticker and the gap closes; the total ticks to its new value. Under reduced motion both happen instantly.
• Without JavaScript the bag page says the bag needs JavaScript and links to the shop and three products; the Add buttons and nav count are hidden.

To take real orders, replace the bag with your cart provider and keep the page as its design:

• Shopify Buy Button: create the products in Shopify, then point Add to bag at the Buy Button SDK's cart.addVariants and open its cart from the nav link, or swap bag.html for its embedded cart.
• Snipcart: add snipcart-add-item with data-item-id, -name, -price, -url and -image to the Add buttons (the same values are already on them), and give the nav link the class snipcart-checkout.
• Stripe Checkout: send the bag array to a small server function that creates a Checkout Session with matching price IDs, then redirect the Check out button to the session URL. Never trust prices sent from the browser.

Forms

The repair ticket and the newsletter field are static front ends. The repair ticket collects a garment, the marked spots, a delivery route, a name and an email, then shows a demo reference without sending anything. Connect them to Formspree, Netlify Forms, your mailing list provider or your CRM.

Palette

Each colour has an -rgb triple for translucent values. Ink is 11.1:1 on the ground and 16.4:1 on paper; secondary text (ink at 78%) is at least 5.7:1 on every grey; paper on indigo is 13.0:1; ink on the orange buttons is 5.5:1. The orange is never used for text on grey or paper.

Type is Sedgwick Ave Display (hand-drawn capitals) for stickers and headings, Kalam for pen notes and Public Sans for everything else.

Accessibility and Fallbacks

• One h1 per page, a skip link, visible keyboard focus (not shown after mouse clicks), real links and native controls: buttons with aria-pressed, two range inputs with spoken value text, radio size chips, labelled form fields.
• Sticker headlines are real text in the heading; the decorative footer promise is hidden from screen readers because it repeats the hero.
• The lookbook viewer is a native <dialog>: Escape closes it and focus returns to the photo that opened it.
• Reduced motion: no entrances or drift, stickers do not slap on, the slider steps between stages, Flip reflows instantly, lines appear without drawing, view transitions are off.
• No JavaScript or a blocked CDN: all content is visible, the wear stages and the before and after appear side by side, rails scroll natively, the filter chips and bag count are hidden, and the bag page explains that it needs JavaScript.

Dependencies

The demo is pinned to GSAP 3.15.0 with ScrollTrigger, Draggable, InertiaPlugin and Flip. Compatibility floor: GSAP 3.12+, with core and plugins on matching versions. Without Draggable, InertiaPlugin or Flip the matching feature degrades: stickers stay put, rails stop without momentum, the grid filters without animating.

Images and Credits

The download contains cropped, graded WebP derivatives in assets/img/, baked from assets/img-manifest.json (masters of the generated images are in assets/img-src/). Replace them directly, keeping the names and proportions, or change the paths in the HTML.

The garments are AI-generated (Codex image generation) for this template: the four wear stages forth-day1, forth-month3, forth-year1, forth-year2; the flat-lays alder-raw, forth-raw, shore-rinse, kirk-worn, bonnington-ecru, granton-raw, granton-ecru, overshirt-black; and the repair pair repair-before, repair-after, which illustrates a typical repair rather than a customer's jeans. Pryce is fictional; replace these with photographs of your own products.

Other photography is licensed through Pexels, which permits use in website templates. It shows real places and unrelated people, not Pryce's staff or customers.

Fonts

All three families are self-hosted in assets/fonts/ as the latin woff2 files Google Fonts serves, declared by the @font-face rules at the top of assets/style.css, so the pages make no font requests to another site: Sedgwick Ave Display (stickers and display), Kalam 400 and 700 (pen notes) and Public Sans (body; a variable font, one file for 400 and 600). The hero faces, Sedgwick Ave Display and Kalam 400, are preloaded in each page's <head>.

Licence: SIL Open Font License 1.1, full text and copyright lines in assets/fonts/OFL.txt (Kalam: Copyright 2014 Indian Type Foundry; Public Sans: Copyright 2015 The Public Sans Project Authors; Sedgwick Ave Display: Copyright 2017 The Sedgwick Ave Project Authors). Keep that file with the fonts. To use Google Fonts instead, delete the @font-face rules and the two font preloads and add the Google Fonts <link> to the <head>.

The manifest records each source, crop, size and grade, so you can export matching WebP files from your own photographs.