Launching Source Project ‘New Frontier’

[jamessouttar]

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

[robertreinink]

Looks promising and clean, but I can only see one page working on the menu/hamburger

[Webdeersign]

Looking good.

[jamessouttar]

The links on the hamburger menu don’t actually go anywhere — yet. They‘re ready to, though! ;-)

I included the PopDrop menu for two reasons. One, because I think it’s quite a usable little component (with another nod to Jon at 1LD) — I was experimenting with one for a site last year, but I got stuck with something. But, anyway, in the way these things go, I came back to it recently and the solution was obvious. I mostly use a PopDrop drop-down menu I built a couple of years ago — PopDrop’s animated burger still doesn’t have many rivals. The other reason for including it is that Tav did such a great piece of work with PopDrop and there is actually so much that it can be used for. The same suite of stacks is driving this burger menu and the footnote on the blog page — like his Limelight and Chroma, this thing is a Swiss Army knife of a stack!

[habitualshaker]

Very impressive @jamessouttar . Think i’ll need to buy it myself to see how you have done some of that :)