I’ve just launched my first Source project. It’s quite different from other projects in that focuses on showcasing what can be done with Grid, Variable Fonts and CSS Custom Properties (variables). It consists of a current magazine-type homepage, with different kinds of cards sitting in a grid, with a Poster 2 blog in a Splider in carousel mode. I’ve tried to pack a lot of useful things into it, and it’s extensively annotated. The biggest thing, really, is a new way of working with grids where everything is grid-based, and where there are three levels of colour-coded, nested grids. This makes possible all kinds of things that were not easy before, if possible at all. The project is also responsive, with different column grids for desktop (laptop!), phablet, mobile. I‘ve also made it a showcase for variable fonts, using Huerta Tipográfica‘s gorgeous ‘Piazzolla’ font. This is interesting because it has two axes — weight and optical size. And rather neatly the optical size axis is applied automatically — as type gets bigger the hairlines become finer and more delicate and the letterspacing is tighter. It becomes proper Display type (there is a lovely microsite for Piazzolla that is linked on the page).
There is more information on the page, and a button to take you to the published project.
Do take a look! The url is https://shakennotstirred.net