Modular Grid

In the early 2000s, I got tangled up in writing code for some of the first commercial and government websites in the country to use pure CSS or so-called “table-less layouts”—a radical break in technology from the first generation of websites from 1997 or 1998 onwards which shoved all their information into complex subdivided rows and cells. The format of a deranged word processor in hindsight, it was a very fractious issue on the web for a number of years until a more stable set of semantic markup patterns emerged.

There were some tradeoffs with tables going out of fashion. While the change was of huge benefit to users—with faster and more robust webpages—designers struggled with lacking capabilities around basic layout needs, such as vertical alignment and quickly laying out content in horizontal rows without hacks or indecision around multiple technology layers.

Eventually flexbox emerged to solve many of these 1D layout problems but the basic late 90s vision of the graphic magazine content web was still not well handled by the medium—increasingly the site of obsession around JavaScript VMs and platform features designed for the needs of large consumer-focused tech giants. Finally, after years of review and robust testing, the CSS Grid standard was ratified and very quickly rolled out across all the major web browsers. For the first time we had full 2D layout capabilities and could push, pull, stretch and subdivide repeating content to create huge varieties of graphic layouts and typography treatments that can robustly adapt to different viewport dimensions and device capabilities.

Previous iterations of this website used complex Sass layout machinery to generate the right CSS class selectors to create 12 column floating grids. It was a great joy to rip all of this out in 2018 and replace it with only a few lines of CSS that communicated the structure of the layouts directly and made it easier to design variations for different sections of the site.

Taking this work a step further, I’d like to abstract the layouts from the pages and sections so that the site can rely on a small set of repeating content patterns that can be stacked to form different layout variations.

This insulates the layout system from URL structure and is hopefully robust enough to handle any wild changes of editorial direction and creativity that I might want to focus on, without having to tear down the site and redesign it again for a long time.

I want to be able to go in the HTML templates and quickly stack design patterns, moving content headers, metadata boxes and embedded page items around to fit the high concept for each area of the site.