Posts in category: "css"

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

How calc() Works

The CSS3 calc() function allows us to perform mathematical operations on property values. Instead of declaring, for example, static pixel values for an element's width, we can use calc() to specify that the width be the result of the addition of two or more numeric values. .foo { width: calc(100px...

3 New CSS Features to Learn in 2017

Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year. 1. Feature Queries A while ago, I wrote about Feature Queries being the one...

Challenge - Recreating the iTunes Library

It's time for another UI challenge! In the first challenge, we recreated some interactions from the MacOS application, Clear. In this one, we are recreating the look of the old iTunes library gallery. The Challenge This is what the final product looks like - Start the Challenge | Live Demo with...

The New System Font Stack?

A few months ago, I wrote about how you can use system fonts in the browser using the built-in keywords that work with the font shorthand property (see Using System Fonts in the Browser). These keywords can be useful, but they also have some drawbacks, the main one being that...