Product Documentation Website Template

Quick Start

1. Unzip and open index.html in a browser, or upload the folder to any static host. There is no build step.
2. The pages are index.html, get-started.html, install.html, validating-a-form.html, writing-error-messages.html, making-forms-accessible.html, personal-data.html, upgrading.html, components.html, text-input.html, error-summary.html, date-input.html, check-answers.html, configuration.html, whats-new.html, browser-support.html and 404.html.
3. Set your colour at the top of assets/style.css, and replace the wordmark in the header and footer of each page.
4. Replace the copy. Every page is ordinary HTML.

Using It With Your Own Design

The band, tabs, sidebar and footer are ordinary markup repeated on each page, so a page can be read and edited by itself. To change a sidebar or footer link, use find and replace across the files.

Everything interactive is found by a data- hook, and assets/script.js does nothing for a hook it cannot find. Delete any example, filter or page without touching the script.

Pages and Configuration

The frame

• Section links in the header go to the first page of each section, and each page's sidebar lists its own section. In the phone menu (data-section-tabs) they swap the panels with matching ids (menu-guides and so on) so people can browse before choosing a page.
• Right rail (data-rail) lists links to the headings on the page. The bar follows the heading in view. The same links are repeated in details.toc for smaller screens.
• Search reads the #all-pages list at the foot of each page. data-k on each link holds extra search words. A new page appears in search once it is in that list.
• Phone menu is #menu-panel, opened by [data-menu-button].

Forms

A form needs data-form. Inside it, data-form-body wraps the summary, the fields and the button, and data-done is the confirmation panel. Each field states its rules and its wording:

Code snippet omitted: it ships with the download.

The rules are required, email, min (with data-min), max (with data-max), checked, choice and date. A date field holds three inputs marked data-part="day", "month" and "year", and takes the messages required, day, month, year, yearlength, real and past.

data-start="errors" shows a form in its error state from the start, as on the home page. Without it a form opens clean. Without JS, the text inside each data-error and summary shows as a static error state and the browser's own required checks apply.

These forms are a front end and send nothing. To use one for real, remove the data-done panel and let a valid form post to your server or a service such as Formspree or Netlify Forms. Listen for the pigeonhole:valid event if you want to send it yourself, and call event.preventDefault() to stop the confirmation panel appearing. Always repeat the checks on your server.

Example box

data-example on a figure adds the width controls. .ex__frame is a size container, so anything inside can respond with @container rules. The Phone and Tablet buttons read their widths from data-snap.

Tabs

data-tabs makes a tab group. Add data-remember="pkg" to keep the choice across pages and to keep every group with the same key in step.

Check answers

data-flow holds one data-step for each step, each with its own form. data-answer="fieldname" is filled in from that field, and data-change="0" goes back to that step and returns straight to the check step. On a real service, consider making each step its own page.

Filters

data-filter="id" on a box holding an input filters each data-filter-item inside the element with that id. data-filter-group hides itself when all its items are hidden.

404 page

404.html uses relative paths. If your host serves it at deep addresses, make the assets/ and page links absolute.

Palettes

Four palettes ship in assets/style.css. Set one on <html>, for example <html lang="en-GB" data-palette="plum">, or copy a block's values into :root and delete the others.

The black palette flips to a white band in the dark theme, as a black band would vanish into the ground. Error red and success green do not change with the palette. All measured pairs are recorded at the top of the stylesheet.

The light and dark toggle is part of the site. A saved choice is applied by the short script in <head>, before the stylesheet, so nothing flashes. Without a saved choice the site follows the reader's system setting, with or without JS.

Accessibility

Native form controls throughout. The summary takes focus after a failed submit, each of its links focuses its field, and the page title gains "Error:" while problems remain. Tabs use arrow keys. The search dialog and phone menu close on Escape and return focus. Reduced motion, no JS and a blocked CDN all leave a complete working site.

Dependencies

GSAP 3.15.0 and its Flip plugin from a CDN, loaded with defer (works with GSAP 3.12+). They add only movement, and the site script does not wait for them. Public Sans is self-hosted in assets/fonts/ under the SIL Open Font License (see OFL.txt), and code uses the reader's system monospace font.

There is no photography.

Teardown

These are plain pages with ordinary page loads, so nothing needs tearing down. If you move a form into a single-page app, remove its element when you remove the route; listeners are attached to the elements themselves, apart from one keydown on the document for the / key and Escape.