Overview

An HTML template for a friendly kids’ and family clothing shop: organic basics from newborn to twelve years, prints the whole family can match and gifts for a new baby. Petita 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 size finder that goes by height as well as age and picks the size with room to grow; matching family sets priced as a set; newborn gift sets with wrapping, an embroidered name and a note; the shop browsed by age band; open now from each shop’s clock; and a full shop with a bag, coupon, delivery zones, click & collect, VAT and order tracking.

What’s included

• 3 home pages, each with its own scroll moment: One Outfit, Four Sizes (a stripe tee and joggers size up from 2–3 to 8–9 years on a height chart as the price steps up by age band), Puzzle Halves (a grown-up’s and a child’s piece cut from one print slide together like two halves of a puzzle) and Paper Doll (a paper doll is dressed layer by layer as the outfit totals)
• 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
• WebGL crayon strokes drifting along the coloured grounds, the plain page titles and the footer, and the footer’s nursery mobile, a torsion pendulum with nested pendulums hanging from it
• The size finder: age and height, everyday pieces or coats & knits, and pieces that grow with them; the size that fits, how many months it lasts, the room-to-grow pick and the day they outgrow it; the children saved on the browser
• Matching family sets: 6 prints, each with a grown-up, a child and a baby piece; the family sized and priced as a set at 10% off three pieces and 15% off four or more
• Newborn gift sets: 3 set sizes, 8 pieces, sizes up to six months, 3 wrappings, a ribbon, an embroidered name and a note, and the day it should arrive
• The shop: 24 pieces in 8 categories and 5 age bands, colours that swap the photograph, a run of sizes priced by band, the size guide and the size finder on every product, bag, coupon, delivery zones, click & collect, checkout with an order number, order tracking, wishlist, gift cards
• About, three shops with their hours, the lookbook, the journal, FAQ with search, account pages, coming soon, 404
• Growth Chart preloader, Peekaboo card reveals with a pop on the age badges, a trail of sewing buttons over the home heroes, a teddy peeking over the cards on hover, Swiper sliders and Fancybox video popups
• Fully responsive, valid HTML5, no console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open petita/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the shop clocks, the size finder, the family sets, the gift sets, the bag and the tracking all work straight from the files.

2. Deploy to a server

Upload the contents of the petita/ 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 sizes, the growth rates, the products, the prints, the gift sets, the shops, the team and the delivery rules live in one place — see Shop 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 petita/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

petita/
├── *.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
    │   ├── 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
        ├── art/                         5 files
        ├── doll/                        6 files
        ├── faces/                       5 files
        ├── flags/                       6 files
        ├── hero/                        9 files
        ├── icons/                       34 files
        ├── kids/                        6 files
        ├── life/                        16 files
        ├── logo/                        6 files
        ├── menu/                        3 files
        ├── sets/                        28 files
        ├── shop/                        36 files
        └── team/                        6 files

To publish the site, upload the contents of petita/ 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.

White is the ground and the light tile grey sits behind the photographed pieces; ink sets the type and the primary buttons. Blueberry is the one accent — the accent word in the titles, links, prices on sale, the chosen size and the button on the logo’s i. Cream, oat, sage and honey are the coloured grounds of the bands, the heroes and the footer (--pi-g-cream and its sisters), and the colours the prints and the crayon strokes are drawn in. --pi-bg, --pi-surface, --pi-panel, --pi-heading and --pi-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: M PLUS Rounded 1c (every heading, the prices and the figures, in its soft rounded weights) and Catamaran (body text, the menu, the buttons and the small labels in tracked capitals). Swap them by editing the Google Fonts link and the --pi-ff-head / --pi-ff-body variables.

Logo

The logo is the word petita in rounded lowercase with a blueberry sewing button for the dot of the i. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — ink lettering, for white and coloured grounds (the headers in the light theme, the mobile menu)
• logo-light.png — light lettering, for the header over the hero photographs and the dark theme
• logo-word.png / logo-word-light.png and button.png — the word and the button apart, for the preloader, where the button flies off the height chart onto the i
• favicon.png — pi with its button on a blueberry 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

Petita 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 petita-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; the coloured grounds turn into deep tints of themselves (--pi-g-cream and its sisters).
• Canvases — the height chart, the puzzle, the nursery mobile and the button trail read their colours from --cv-ink, --cv-berry, --cv-honey, --cv-sage, --cv-oat and --cv-paper, which the dark block swaps; the crayon strokes read --gl-1 to --gl-3.
• Logo and icons — the light logo shows on photographs and in the dark theme; each illustrated icon and line drawing ships in an ink and a light version and the right one shows by theme. The drawn pieces sit on a dark plate (--pi-plate).
• 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.

Shop Logic

The figures on every page come from one data block, JS block 09 Petita Data near the top of main.js (var PETITA). Edit it once and the sizes, prices, sets, rules, dates and totals follow. Prices are in pounds sterling with VAT included; the currency switch shows them in GBP 1, USD 1.27, EUR 1.17 (key petita-currency), and prices written in the pages carry a data-gbp attribute so the switch can repaint them. Heights are in centimetres, ages in months, times in minutes after midnight (570 = 9:30 am), weekdays 0 = Sunday to 6 = Saturday.

The size finder

Height decides the size, because a size fits a range of heights and the age on the label is only the average. The finder grows the child month by month at the rate for their age until they reach the top of the size (plus the stretch of a piece that grows with them): that is how long the size lasts. If it lasts less than the season, the room-to-grow pick is the next size up. It also says when a child is tall or petite for their age.

Family sets

Each member of the family gets the print’s piece for them, in their own size. Three pieces come 10% off, four or more 15% off. Children’s clothes are zero-rated, so the VAT inside a set is only the grown-ups’ share.

Newborn gift sets

A gift set is its pieces less the set’s share (the more pieces, the more off), plus the wrapping and an embroidered name. Every piece comes in the one size chosen for the set; the arrival day can be any day from two working days ahead.

How the shop totals

A piece’s price is its age band’s price, so the same tee costs more in a bigger size. Family-set pieces of one print in the bag come off together; the coupon comes off the goods before the free-delivery check. Weekday orders before 2 pm leave the same day, later ones the next working day; the order number carries its date (PT-YYMMDD-XXXX), so the tracking page works out where the parcel is from today.

The bag, the wishlist, the applied coupon, the family, the saved children, the size preference and the orders are kept in the browser (localStorage), so they follow the visitor from page to page. The first visit starts with a small demo bag so every shop page has something to show; to start empty, set the demo list in doShop() (block 31 Shop) to []. Checkout confirms on screen with an order number — connect it to your own systems to take real orders.

WebGL & Canvases

One small WebGL shader draws the crayon strokes — soft wax-crayon lines drifting along the edge of a band, pressed on in pieces with the paper’s tooth showing through. Each layer is one canvas:

<canvas class="pi-gl" data-gl="crayon" data-gl-edge="top" aria-hidden="true"></canvas>

• Place — data-gl-edge (top or bottom) sets the edge of the band the strokes run along, so they frame a title or a section without crossing its copy.
• Colours — blueberry, honey 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 band is on screen and the tab is visible. Visitors who prefer reduced motion get one still frame. Without WebGL, the band’s own background shows.
• Remove one — delete the canvas; nothing else depends on it.

The footer’s nursery mobile (data-nursery-mobile, block 20) hangs from the footer’s top edge: its bar turns on its string as a torsion pendulum, and a felt heart, a button, a moon, a cloud and a star hang from it as nested pendulums that lag and swing when it turns; the pointer blows on the pieces it passes. The scroll moments (data-size-up, data-puzzle, data-paper-doll, blocks 21–23) and the preloader’s height chart are plain markup and 2D canvases; their colours follow the theme tokens and they rest in their finished state for reduced motion.

RTL (Right To Left)

Petita 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 petita-lang and petita-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, sizes, heights and figures keep reading left to right inside their rows, and the height charts keep counting upwards.

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 Growth Chart preloader, the header, the Peekaboo and soft-rise reveals, the theme and direction switch and the WebGL crayon strokes.
• 09–12 — Petita Data, Button Trail, Custom Select, Currency. Petita Data holds every figure; the button trail follows the pointer over the home heroes; 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 — Nursery Mobile, One Outfit, Four Sizes, Puzzle Halves, Paper Doll. The footer’s nursery mobile (every page) and the scroll moments: one outfit sizing up (Home 1), a grown-up’s and a child’s piece joining like puzzle halves (Home 2) and the paper doll dressed layer by layer (Home 3).
• 24–38 — Shop Clock, Size Engine, Size Finder, Family Set Builder, Newborn Gift Sets, Gift Cards, Contact Form, Shop, Account Forms, Account Page, Article Tools, Demo Forms, Launch Countdown, Order Tracking, FAQ Search. The feature pages: open now from the shops’ clocks, the size engine and the size finder, the family set builder, newborn gift sets, gift cards, contact, the shop with bag and checkout, accounts, the journal, demo forms, the countdown, order tracking, FAQ.

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 pieces in every colour and print, the paper doll, the line drawings, the illustrated icons and the language flags are included and ready to use. All demo photography shown on the live preview, the children and families among it, 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, gift set, gift card, 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: M PLUS Rounded 1c, Catamaran

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.