Posts in category: "css"

How the minmax() Function Works

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

CSS Animations vs the Web Animations API: A Case Study

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

How I Animated the bitsofcode Logo with CSS

I’m pretty new to CSS animations. For the most part, I had only used them in limited cases and mostly using libraries created by others, such as the excellent Animate.css created by Daniel Eden. As I mentioned in Redesigning bitsofcode, the graphic designer I worked with for the...

Linting HTML using CSS

When HTML is written incorrectly, nothing much happens. Because of this, it's easy to have invalid, unsemantic, or unaccessible bits in markup without it being obvious. There are many ways we can lint our HTML to discover and fix these issues, for example using the W3C Markup Validation Service. Another...

CSS Grid Layout Terminology, Explained

In the CSS Grid Layout Specification, a grid is defined as the following - The grid is an intersecting set of horizontal and vertical grid lines that divides the grid container’s space into grid areas, into which grid items (representing the grid container’s content) can be placed Err…...