Getting to know CSS Grid with Past Present Future

Added on by christine clark.

Since the release of CSS grid I've been waiting for fresh build to try the new specification out with. Then Past Present Future came along, a new project with Environment Lethbridge that aims to engage people with Lethbridge's relationship to the environment - historically, currently, and speculatively. The content is a mix of archival material, quotes, graphs, and photographs, broken up into topical sections - lots of variety in size and shape that would make for interesting layouts with CSS grid.

There were 6 topics that carried through the 3 sections, each with a unique set of content, so 18 mini grid-based layouts. Doable with floats or inline-block elements, but it would have been a mess of classes. But with CSS grid - what a dream!

See the project on GitHub

Now that I've been through the process once, there are definitely some things I would do differently:

  1. I didn't use grid-template-areas. And I should have. This wasn't a big deal until I got into adjusting the grid for mobile. Rather than updating one rule, I was updating each one to change their grid-column start point and span. In hindsight, had I assigned them a grid-area instead, I would only have to change the grid-area-template in my media queries. 
  2. It took me a while to find out that IE 11 and Edge were working with the old specification of grid. This meant a few things:
    • I had to do another pass through to add in the -ms- prefix with the properties from the old spec.
    • The old spec doesn't include the grid-column: 1 / span 2 type values, rather they need to be set in two separate properties. All the more reason to use grid-template-areas (in old spec it's grid-template)
    • The old spec doesn't recognize grid-gap so the gutter has to be treated as it's own column, which changes the column start and span values. Again, more reason for relying on grid-template-areas instead.

Early wireframes:

CSS grid is an incredibly efficient and effective way to arrange content. With how delightful it was to work with, and the new design opportunities it provides, I can see us all asking each other this years later: "where were you when you first tried CSS grid?"

More to come soon!

Talk for Architecture & Design NOW

Added on by christine clark.

On October 27th I will be speaking in the Architecture and Design NOW series at the University of Lethbridge. If you would like to attend, here is more info.

This talk will focus on my practice in information visualization (infovis), which has largely been shaped by my background in design, a deep rooted connection to the people and landscape in Alberta, and a desire to engage with public interest and activist topics. Infovis is an extremely powerful tool for improving comprehension of complex information and its recent adoption in creative fields has lead to a surge of new applications. Meanwhile, technology fluctuates, access to information is variable, and best practices in infovis, design, and activism often conflict with each other. In my talk I will discuss my experience navigating through these opportunities and challenges and show the body of work that has emerged.