Build guide · Site 09 of 25

A Swiss studio site with a grid you can actually see.

GRID SYSTEM is one of 25 sites designed and built by Formwork to show craft in web design and motion. This one is the quiet one — restraint as the flex. Here is exactly how it was made.

The idea

Most sites talk about being on a grid. This one lets you switch the grid on. Press G (or the button in the header) and the twelve columns, the 32-pixel baseline, the crop marks and a live coordinate crosshair fade in over the whole page. The brief was International Typographic Style for a fictional architecture and industrial-design practice, so the discipline had to be real, not decorative.

The stack

Signature A CSS grid overlay toggled by a class on <html>, driven by keyboard and pointer.
Motion GSAP + ScrollTrigger for reveals and a subtle magnetic on the accent controls.
Figures Count-up numbers via a plain IntersectionObserver — no library needed.
Type Inter for everything, tight tracking; JetBrains Mono for indices, coordinates and captions.
Build Plain HTML/CSS/JS. No framework, no bundler. It simply runs.
Host GitHub Pages, straight from the repo's main branch.

The signature technique

The columns are a real twelve-track CSS grid that shares the site's max-width and gutter, so the guides line up with the content. The clever part is the baseline: a repeating gradient whose vertical offset is nudged by the scroll position, so the horizontal rhythm appears pinned to the document instead of the viewport as you scroll.

// baseline appears anchored to the page (module = 32px)
const MODULE = 32;
const applyBaseline = () => {
  overlay.style.setProperty('--bl',
    (-(window.scrollY % MODULE)) + 'px');   // shift the rules
};
addEventListener('scroll', onBaselineScroll, { passive: true });

A second layer tracks the pointer: two hairlines and a mono readout print the exact X · Y coordinate under the cursor — the page turned into a drawing board. The overlay is pointer-events: none, so every click still lands on the content beneath it.

Details that matter

Robust reveals — content is only hidden while a .js class is present, so a CDN failure never leaves a blank page.
Expanding records — each project row opens a detail strip using the grid-template-rows: 0fr → 1fr trick, and the row number flips to red in an overflow:hidden box.
Reduced motion — with prefers-reduced-motion every transition is cut, figures snap to their final value, and hidden content is forced visible.
Keyboard first — rows are operable with Enter, the grid with G, and every focus ring is drawn in the red accent.

Ship it on GitHub Pages

Every site here is static, so hosting is three commands:

git init -b main && git add -A && git commit -m "ship"
gh repo create formwork-grid --public --source=. --push
gh api --method POST /repos/OWNER/formwork-grid/pages \
  -f 'source[branch]=main' -f 'source[path]=/'

Use relative paths (./main.js, not /main.js) because project Pages live under /repo-name/. Add an empty .nojekyll file so every asset serves verbatim.

That is the whole recipe: one honest grid, a Swiss type system, a little motion, and static hosting. The other 24 sites each swap the central technique — shaders, particles, kinetic type — but the discipline is the same.