Blue Notes

A labour of love and typography.

In late 2017 year I set myself the challenge of recreating some of the legendary Blue Note designer Reid Miles artwork in the browser, partly to test my layout chops, partly to learn and explore new technologies and techniques and very much to challenge what we think is possible with layout and typography on the web.

All the sleeves featured in the screengrabs below were created using HTML and CSS, all the layouts, type and typography are responsive. There's no JavaScript - for the record I love JavaScript - I just chose to write in vanilla CSS, mostly to make the point that we can achieve incredible things with a mixture of fairly basic HTML, CSS and some respect for web standards. Importantly too though, I wanted to lower barriers of entry, I strongly believe that building for the web shouldn't require a CS degree or indepth knowledge of the latest build tools. That, and I fucking hate Webpack.

A post with code snippets that detail the creation of the sleeves, some of the development challenges and how I incorporated responsive typography in the early days can be found here and there's a repo with the code for each individual sleeve here.

As a bit of an update. I’ve been recreating a few of the more complex sleeves using CSS Grid recently and a couple of these can be found on the repo mentioned earlier, with the remainder to follow soon. I’ve started adding texture using CSS filters and blend modes amongst other things, which I'd like to think has yielded great results (though I would say that I guess.. ;)) I've begun to write some of this up here

A new Netlify site dedicated to the build of these sleeves, with articles, code-snippets and playlists is on it's way, though in the meantime for those who might want to play with and explore the code used, here's a link to the original sleeves and the CSS grid version of Cornbread on CodePen