Smashing Magazine CSS Grid Challenge
6 Oct 2017
Silver Award in
Smashing Magazine Code Competition
We are proud and honored to be awarded 2nd place in an International competition for creating an inspiring and creative layout using CSS Grid.
The competition was held by Smashing Magazine, a (some might even say “the”) industry leading web design, UI/UX, and front-end development publication.
CSS Grid is a fairly new technology for creating layouts on the web. It is currently supported in the most recent web browsers.
View the submission here, read more about the competition, and see all winners.
About the Submission
I created the front page from The Daily Telegraph, the fictional newspaper from J.K Rowling’s Harry Potter books. These types of old-style print layouts have generally been quite challenging to replicate digitally, but CSS Grid offers new possibilities. I would have loved to replace the images with videos or gifs, to come even closer to how the newspaper is described in the books, but am instead using images without any copyright restrictions.
Other than CSS Grid, I’m also using CSS Shapes to get text to wrap around a circular image, as well as a fun little CSS animation to have the owl fly down with the logo. I added an external JS plugin to get the headlines to fill out their lines, as well as modernizr.js paired with an early jquery version to help with old Internet Explorer compatibility.
