Hi folks,
 

Welcome to Braintactics #112, where I share a round up of useful links in the realm of design, code and typography.

This week I’ve been working on an approach to responsive navigation. The technique uses CSS Grid template areas and media queries to adapt layout at different screen sizes. This allows for leaner, more accessible HTML. I plan on a write up soon, but in the meantime I have some great CSS Grid content for you. A fantastic talk by Andy Clarke and an article from Rachel Andrew on using grid template areas to create editorial layouts.

On another note, I’m tearing through Human Universe by Brian Cox and Andrew Cohen. What a book! Think Sapiens, with a lot more Space. I’ll begin this week with one of my highlights that made me think for a moment.

Thought provoking

“By focusing on tiny but interesting things with honesty and clarity, great and profound discoveries are made.” Brian Cox and Andrew Cohen in Human Universe.

Goal Dilution explains the way we perceive the quality of products or services. The more singular something is in its purpose, the more effective we believe it is.
 

Design and Code

Editorial Design Patterns With CSS Grid And Named Columns. By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids.

Space, Grids, and Layouts. Elliot Dahl on composing spatial design systems.

Smart animation has arrived in Figma, but what can you actually do with it? This 5 Minute animation by Pavel Ryaposov should give you an idea.

Complete intro to Netlify in 3.5 hours from Shawn Swyx Wang. Everything you possibly wanted to know about Netlify and how its various products and features can link together to create a full JAMstack app.

Powerful New CSS for Styling Bullets, Numbers, and List Markers. Miriam Suzanne demonstrates what’s possible with the new ::marker pseudo element.

Creating a custom focus style. Zell Liew with more tips on creating custom focus styles.
 

Typography

Reviving a blackletter font from a museum’s archive. Printing museum Pavillon-Presse revive a forgotten German blackletter font from 1916, by the type foundry of Julius Klinkhardt.

A tiny guide to variable color fonts. Arthur Reinders Folmer explores the endless possibilities of font interpolation.

Questions asked by parents whilst watching type designer Jonathan Hoefler’s Abstract episode. A fun experiment by the editors at Eye on Design.
 

Something to watch

Andy Clarke - Inspired by CSS Grid. How compound grids, modular grids, and skinny columns will change the way you think about layout on the web.