Always looking to push what's possible with code, and develop best-practice processes, over the past few months we've been moving to CSS grid.

We’re transitioning slowly, allowing ourselves to discover new paradigms and design methods, instead of simply porting old habits to a new syntax.

So far, we've developed a number of really useful strategies for keeping track of the layout. I've written a couple of surprisingly nifty mixins, using named areas and templates, and we've hit upon some basic conventions to create highly readable code.

I thought it would be valuable to walk through a fully-developed production implementation of a single major component using grid; digging in to some of the design questions it throws up and steering you away from some pitfalls we’ve encountered.

Using our work with Traverse Theatre as an example, I've put together a fairly detailed account of our process over on the CSS Tricks website – Code as Documentation: New Strategies with CSS Grid

(I’m expecting some basic familiarity with CSS, Sass, BEM, and some interest in the task of prototyping fully-realised, accessible, custom frameworks with 50+ components from Sketch or Photoshop-type documents on a tight timeline.)