Latest Posts

Understanding the difference between grid-template and grid-auto

With all the new properties related to CSS Grid Layout, one of the distinctions that always confused me was the difference between the grid-template-* and grid-auto-* properties. Specifically the difference between grid-template-rows/columns and grid-auto-rows/columns. Although I knew they were to do with the explicit and implicit grid systems,...

[Smashing Magazine] Creating The Feature Queries Manager DevTools Extension

While working with feature queries, I requently find myself in the messy situation of trying to test my fallbacks layout. This lead me to create the Feature Queries Manager, a developer tools extension that lets you easily toggle styles behind feature queries. I recently wrote an article for Smashing Magazine...

How display: contents; Works

As I frequently mention, every element in the document tree is a rectangular box. Broadly speaking, this "rectangular box" consists of two sections. First we have the actual box, which consists of the border, padding, and margin areas. Second, we have the contents of the box; the content...

Recreating the GitHub Contribution Graph with CSS Grid Layout

While learning CSS Grid Layout, I’ve found that the best way to internalise all the new concepts and terminology is by working on various layouts using them. Recently, I decided to try to recreate the GitHub Contribution graph using CSS Grid Layout, and found it was an interesting challenge....

What’s New in HTML 5.2?

Less than a month ago, HTML 5.2 became an official W3C Recommendation (REC). When a specification reaches the REC stage, this means that it has received the official endorsement of W3C Members and the Director, and that the W3C officially recommends it’s deployment by user agents, and it’...