Fab City Website Template Guide

The implementation guide for members of the Fab City Network, published as a web page.

Live: https://fabcity.github.io/website-guide/

That is the link to send. It opens in any browser, on any device, with no download and no PDF reader.

What this repository is

One static page. index.html carries the whole guide — all fifteen sections, three appendices, seven tables and twelve figures — with its CSS inline. No build step, no dependencies, no JavaScript at all.

index.html	the guide (66 KB)
img/	figures, WebP (633 KB total)
fonts/	Funnel Sans + its SIL OFL 1.1 licence
.nojekyll	tells GitHub Pages to serve the files as-is
tools/	the scripts that generated index.html — see Updating below

Deliberate properties, each of which was tested:

• Renders with JavaScript disabled. All 6,200 words are in the HTML.
• Zero external requests. No CDN, no Google Fonts, no analytics, no third-party anything. Nothing about a reader leaves their browser.
• No horizontal scrolling at 320px. Wide tables scroll inside their own frame; everything else reflows.
• WCAG 2.1 AA contrast on every piece of rendered text, checked with alpha compositing rather than by eye.
• Prints properly. Browser → Print → Save as PDF gives a real PDF with selectable, searchable text — unlike the canvas export, whose pages are images.

The source of truth is not this repository

The guide is authored in the Claude Design project Fab City Website Template Guide (9ac2e27c-c7e9-40cc-bd73-0fcfc57cd8de). index.html here is generated from that document.

Edit the guide there, not here. An edit made directly to index.html will be silently overwritten the next time the page is regenerated, and the two copies will disagree in the meantime — which is exactly the failure mode the August 2026 audit was about.

Updating

1. In the Claude Design project, export the guide (⋯ → Export → HTML). You get a zip.
2. Unzip it and run the four scripts in tools/, in order: extract.py, clean.py, images.py, assemble.py. Each has a SRC path at the top pointing at the unzipped export.
3. Commit the new index.html and img/.

The scripts do the parts that are easy to get wrong: they strip the canvas runtime and the 596 inline styles, classify the layout blocks so they reflow on a phone, keep every image's alt text, pick PNG or WebP per file by whichever is smaller, and drop assets the guide does not reference.

Two things the export contains that must never be committed

• _ds/assets/fonts/Circular-Medium.ttf and CircularStd-Medium.ttf — commercial Lineto typefaces. The network stopped using Circular precisely because its licence forbids redistribution. Publishing them here would be redistribution. Only Funnel Sans (SIL OFL 1.1) and the guide's own text belong in a public repository.
• Assessment & Rollout Plan.dc.html — the Foundation's internal decision log. Not for publication.

The export also carries a stale copy of the template repository and roughly 3 MB of unused screenshots. Neither belongs here.

Related

• Template repository: fabcity/city-site-template
• Live sample site: fabcity.github.io/city-site-template
• city.json checker: fabcity.github.io/city-site-template/validate.html
• Subdomain requests: the form linked in §05 of the guide
• Network conversation: Hylo

Licence

Guide text and figures © Fab City Foundation. The Fab City name, logo and lockup system are trademarks of the Fab City Foundation. Typeface: Funnel Sans, SIL Open Font License 1.1.

Questions: Lucas, luc@fab.city.