The time which I dedicate to reading is predominantly based in front of a screen nowadays. Of the few physical books I make time to read, they are predominantly reference books related to learning a language. The funny thing is that this doesn't seem to stop me from entering book shops on a pretty frequent basis.

When travelling through the capital, I can't walk by a Foyles or Waterstones without at least a strong impulsion to go inside (and god help me if I'm passing Marylebone High Street). Whilst the focused calm found in most of these outlets makes for a much needed respite from the busy streets, this isn't the reason I'm drawn in.

It's the book covers.


There is nothing quite like drifting through the store from island to island, slowly taking in cover after cover. The sheer variety of the designs is always mesmerising and I'll almost always find something which awakens some creative spark deep within. The limited canvas space is a compelling example of the catalystic qualities of artistic restraints - something I am keen to understand and explore further in the future.

It was with great joy therefore that I recently discovered the wonderful bookcoverarchive.com. As they succinctly put it, this site is for 'the appreciation and categorisation of excellence in book cover design.' I promptly bookmarked the site under the 'regular design inspiration' folder.

Chris Coiyer has been inspiring us recently with articles about type lock ups and the influence of print layouts in CSS. I have been keen to roll up my sleeves and have a go, but couldn't find a place start. But this overload of book cover was the perfect opportunity. Even better, my recent efforts to learn Flexbox have primed me with just the tools needed to take on such as task.

And so I have begun what will hopefully be a semi regular project in which I attempt to build a series of book covers with HTML & CSS. I think of them affectionately as flex-books.

Below is an example, and you can see the collection so far here.

See the Pen After America by Jonathan Garner (@jonathangarner) on CodePen.

previous note next note