Drafting desk with layout grids, colour swatches, and a well-used notebook

About Locally Lost

Locally Lost started as a place to document layout experiments — the kind of work that happens between finishing a client project and starting the next one, when you finally have time to test whether that grid idea actually holds up under real content. Over the years, it has grown into a working reference for theme architecture, typography decisions, and the structural patterns that separate clean builds from fragile ones.

The name reflects the process honestly. Most of the useful discoveries here came from getting lost in the details: debugging a column collapse at a specific breakpoint, figuring out why a type scale that looked perfect in Figma felt wrong in the browser, chasing down the caching header that was serving stale CSS to half your visitors. Getting lost locally — in the small, specific problems — is where the best practical knowledge comes from.

What You Will Find Here

The site is organised around three main areas. The demo layouts are working examples of different grid and composition approaches, each dissected with notes on spacing logic, typography choices, component patterns, and common implementation mistakes. The guides cover focused topics — semantic HTML, caching, icon systems, theme architecture — with practical checklists and field-tested observations. The field notes are shorter pieces on whatever we are currently thinking about, from sustainability and gaming to disc golf and cultural commentary.

How the Content Is Built

Every demo layout has been tested with real articles, actual images at various aspect ratios, and the edge cases that only appear after launch — three-line titles, overflowing bios, sidebars that collapse on tablets but not phones. The guides draw from repeated encounters with the same problems across different projects. Where a technique worked reliably, we document it. Where it broke under specific conditions, we explain what went wrong.

The site itself runs on Gatsby and deploys to Cloudflare Pages. All images are self-hosted. There are no trackers, no analytics scripts, and no third-party dependencies beyond what the build system requires.

Who This Is For

Theme authors debugging layout problems. Front-end developers evaluating grid approaches. Site owners trying to understand why their content looks different on mobile. Designers shipping landing pages under deadline who need a quick reference for spacing and type scale decisions. Anyone who has spent twenty minutes trying to figure out why their three-column layout works in Chrome but breaks in Safari.

If any of the material here saves you a round of debugging, it has done its job.