Poster Grid Template
A one-page site for a poster biennale, built on a twelve-column rule grid that is printed on the page rather than hidden behind it: the grid draws itself in as measured rules while the headline sets column by column, four photographic plates reflow between fixed compositions with GSAP Flip, and a marginalia rail down the outer column tracks scroll on three channels at once.
About This Template
A production-ready one-page site for a poster biennale, print studio, type foundry or design festival. It ships as a finished site for a fictional event, The Measure, the ninth Leeds Poster Biennale: an open call, a programme of press days and talks, four selected plates and a colophon, all written in the voice of a small organisation that runs a press six days a week.
Read the full template overview
The design idea is that the grid is visible. A twelve-column rule grid is drawn on the page as a design element and every headline, label and plate is set to it, at roughly ten times the scale contrast between the display line and the smallest dimension label. The palette is three colours and nothing else: warm paper, printing ink and one ink-red, used the way a two-colour press would use them.
Three interactions carry the page and none of them repeats another. The grid draws itself in as measured rules while the headline sets a word at a time; a field of four photographic plates reflows between four fixed compositions with GSAP Flip when you choose a plate; and a marginalia rail in the outer column reads scroll position on three separate channels.
Make it yours by repainting three hex values and their RGB triples in the token block, swapping the photographs in assets/img, and rewriting the copy. Every section is found by a data attribute and separately guarded, so you can delete the programme band, the plate field or the type specimen and the rest keeps running.
What's Included
- A visible twelve-column rule grid that draws itself in from the margins on load, with the dimension labels ticking up to their printed values like a spec drawing filling in
- A display headline that sets itself column by column, each word snapping in from its own column rather than fading
- One full-bleed duotone plate that breaks three columns and runs off the edge of the sheet, with a solid ink caption strip
- A plate field where four photographs reflow between four fixed twelve-column compositions with GSAP Flip, the field's horizontal rules travelling to match on the same curve
- A marginalia rail down the outer column reading scroll on three channels: the section numeral, a measured rule with a millimetre readout, and Cardo side-notes that swap with a short overshoot
- An inverted full-bleed programme band setting the schedule as type rather than as cards
- A type specimen section built on a single oversized letterform that overruns the left margin
- Three colours and two Google faces, with every translucent value mixed from an RGB triple so a reskin is a six-value edit
- Measured contrast throughout, including a documented ban on the red carrying reading-size text
- A complete no-JavaScript document, a designed reduced-motion state, and keyboard parity on every plate control
Perfect For
- Design biennales, poster festivals and open calls that need a submission deadline front and centre
- Print studios, letterpress and risograph shops selling work by the sheet
- Type foundries and specimen sites where the grid and the scale ladder are the product
- Editorial, publication and zine launches that want print logic rather than page logic
- Galleries and exhibition programmes with a dated schedule and a plate list
- Any portfolio that wants a Swiss, rule-led identity instead of a card grid
How It Works
Structure
One script initialises each section inside a single gsap.context, with a gsap.matchMedia branch for motion preference and for the 1100px breakpoint where the rail changes axis. Every init takes its section's root element and returns early if the markup is absent, so deleting a section from index.html cannot break the rest. Event listeners are kept in a Map and removed by the cleanup function returned from the matchMedia callback.
The grid draw-in
On load, one timeline runs four things off the same clock: the twelve column rules scale up from the top margin, staggered from the edges inwards; the dimension labels tick from zero to their printed values; each headline word is set visible in a single frame and slid in from one column's width away, so it snaps into place rather than fading; and the supporting copy fades under it. Scrolling the hero then adds a scrubbed channel, softening the rules and drifting the plate against the type.
The plate reflow
Four fixed compositions live in CSS as grid-column and grid-row rules under a data-arrangement attribute on the field. Choosing a plate, or one of the composition numbers, records the state with Flip.getState, swaps the attribute and lets Flip.from animate every plate from where it was to where the new composition puts it. Flip's absolute phase would otherwise collapse the field's height mid-tween, so the taller of the two measured heights is held for the duration and cleared on complete; the field's horizontal rules are tweened between their old and new offsets on the same curve.
The marginalia rail
A single document-length ScrollTrigger paints three channels from one progress value: the measured rule fills, the millimetre readout counts toward the sheet height, and the tick marks ink over one at a time as they are passed. A second set of triggers, one per section, swaps the section numeral and its Cardo side-note with a short overshoot so each change settles rather than snaps. The notes are read from data attributes on the sections themselves, so a deleted section takes its note with it.
Without JavaScript, and with reduced motion
A synchronous script in the head adds a has-js class before first paint, which is what gates the animation start states; the main script removes it again if the GSAP CDN is blocked, so the page falls back to a plain, fully readable document with the grid already drawn. Under prefers-reduced-motion a CSS block restores every gated element and the matchMedia branch sets the page to its finished state: the rules drawn, the headline set, the plates in the first composition, and the rail still reporting position without any easing.
Questions about this template
Why is the grid visible?
Because it is the design. A twelve-column rule grid is printed on the page rather than hidden behind it, drawing itself in from the margins on load while the dimension labels tick up to their printed values like a spec drawing filling in. It is print logic applied to a page, which is the point for a design audience.
What does the plate reflow do?
Four photographs move between four fixed twelve-column compositions with GSAP Flip, and the field's horizontal rules travel to match on the same curve. It is composition as the interaction rather than a carousel, and every plate control has keyboard parity.
How many photographs do I need?
Five or so: four for the reflowing plate field and one full-bleed duotone that breaks three columns and runs off the sheet. The type specimen section is built on a single oversized letterform, and the programme band sets the schedule as type, so neither needs images.
Can I use it for something other than a poster festival?
Yes. Print studios and risograph shops selling work by the sheet, type foundries showing specimens, zine and publication launches, and gallery programmes with a dated schedule all fit. Any portfolio wanting a Swiss rule-led identity instead of a card grid works.
How much of a reskin is it?
Six values. Three colours and two Google faces, with every translucent value mixed from an RGB triple. Contrast is measured throughout, including a documented ban on the red carrying reading-size text, so a repalette has a stated boundary rather than a guess.
Can artists submit work through the entry form?
No. It takes a name, an email, a sheet size and a note about the plate, and confirms on the page, but there is no backend behind it. An open call also needs somewhere to put files, so point it at a form handler that accepts uploads, or at Submittable, which is what most biennales already run.