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...

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....

Last week, I ran a twitter poll asking the following question - What would be the amount of space between two sibling divs, where the 1st has a margin-bottom of 10px and 2nd a margin-top of 30px? The result of this poll was that 39% of the 754 people who...

One incredibly useful new feature introduced with the CSS Grid Layout Specification is the minmax() function. This function opens the door to us being able to write much more powerful and succinct CSS by allowing us to set, as a value for a grid track, a function including both a...

Last week, I wrote about how I created the bitsofcode logo animation with CSS. After that, it was suggested that I attempt a comparison between a CSS animation and the Web Animations API, so here it is! Introduction to the Web Animations API As with last week, I'll start this...