Documentation · version 1.0.0

Manifold documentation

Manifold is 40 complete website demos in one download. Each demo is a self-contained folder of plain HTML, one stylesheet and one vanilla JavaScript file. There is nothing to install and nothing to build; this page is everything you need to go from the zip to a live site.

Getting started

1. Unzip the download. You get one folder, manifold-html/.
2. Open manifold-html/index.html in a browser. That is this package's showcase: filter the 40 demos by industry, search them, and open any demo in a new tab.
3. Pick the demo closest to your brief and copy its folder (for example demo-architecture/) somewhere on its own. That copy is your project.
4. Open the copy's index.html. Every page works straight from disk, so you can edit and refresh without a server.

Package structure

manifold-html/
├── index.html               showcase landing (this package's front page)
├── documentation.html       this page
├── changelog.html           package version history
├── licenses.html            template licence, fonts, image sources
├── README.txt
├── assets/                  the landing page's own css/js/fonts/images
├── demo-architecture/       one complete website
│   ├── index.html · about.html · blog.html · …
│   ├── README.txt
│   └── assets/
│       ├── css/styles.css   reset → framework → design → components
│       ├── js/main.js       every behaviour, commented
│       ├── fonts/           self-hosted WOFF2 + fonts.css
│       ├── images/
│       └── videos/          only where the design uses video
└── demo-…/                  40 demos in all

Demo folders share nothing with each other and nothing with the landing page. Moving, renaming or deleting a demo folder cannot break another demo. Deleting the landing page and the root assets/ is fine once you have chosen a demo.

Choosing a demo

Demos are named after the industry they were designed for; the brand shown inside a demo is fictional. "Shop" means the demo ships a working cart and checkout flow in vanilla JavaScript.

Editing a demo

Content

All content is plain HTML. Change a headline by changing the headline. Add a blog post by duplicating an existing blog-*.html file, renaming it, and adding a card for it on the blog listing page.

Header and footer

The header and footer are repeated in every page rather than injected by script, so the site works from disk and has no flash of missing navigation. A navigation change is a find-and-replace across the folder; every code editor does this in one step.

Page titles and social meta

Each page's <title>, og:title and twitter:title read "Manifold – … Demo" in the package so the demos are easy to tell apart in browser tabs. Replace them with your own titles as you go; the description meta tags are the demo's own and are worth rewriting for your brand too.

Colours, type and spacing

Every colour, font family, type size, spacing step and radius is a CSS custom property declared once near the top of the demo's assets/css/styles.css, in the design section's :root block. Change a value there and it changes everywhere it is used. The demo's style-guide.html shows every token rendered, which is the fastest way to see what a change does.

The stylesheet is organised in four labelled sections: the reset, the framework layer (grid, containers, utilities), the design (tokens and page styles) and the hand-written components (navigation, sliders, accordions, forms). Search for the section banner comment to jump to it.

Images and video

Images live in the demo's assets/images/, one file per picture, capped at 1600 px on the long edge as WebP or AVIF. Replace a picture by replacing the file, or point the src at your own; a 1200–1600 px WebP at quality 80 is a good target. If you want phone-sized alternatives, add a srcset to the <img> — the markup takes it as-is.

Where a demo uses background video it ships one MP4 (H.264, muted, looped, 1280 px) plus a poster image. Replace both together.

The script

Each demo has exactly one JavaScript file, assets/js/main.js, loaded with defer. It is commented section by section: navigation, tabs, accordions, sliders, marquees, scroll reveals, counters, the cart and forms. There is no bundler and no dependency, so you can read it top to bottom and delete what you do not use. Motion respects prefers-reduced-motion; reveals are gated on a js class the page sets in its head, so content is never hidden if scripting fails.

Deploying

Upload the demo folder's contents to the root of any static host: shared cPanel hosting, Netlify, Vercel, Cloudflare Pages, GitHub Pages, an S3 bucket, or a plain Nginx or Apache directory. No server-side language, no build command, no environment variables. Links between pages are relative (about.html), so the site also works in a subfolder.

Forms are static markup. Point each form's action at your form handler (Netlify Forms, Formspree, Basin, your own endpoint) or wire it to your CRM; the demos validate on the client and show success states, but nothing is sent until you connect a backend. The same applies to checkout in the shop demos: the cart, totals and flow are complete, and the payment step is where you connect your provider.

Fonts and licences

Every demo self-hosts its fonts as WOFF2 in assets/fonts/ with an @font-face map in fonts.css; no page makes a request to Google Fonts or any CDN. All shipped fonts are under the SIL Open Font License or an equivalent redistributable licence. The package's licences page lists the families per demo, and each demo's own licenses.html lists its image and icon sources.

Support

Questions about setup, customisation or deployment are answered by the developer who wrote the code. Email contact@kaziehsan.com with the demo name and, if it helps, the page and a screenshot.