Subscribe to our Newsletter

Get articles, advice and tips about:

Smashing Magazine CSS Grid Challenge

Silver Award in
Smashing Magazine Code Competition

by Frida Nyvall

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, and read more about the competition.

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.

Tags

More posts

img

Speaking on Boagworld Show about Getting From Idea to App

img

The Dark Side of Web Design – confirmshaming

img

From idea to app: writing a specification