Yay Brigade’s Favorite Albums 2018

The most interesting discovery for me while building the site was a real-world use case for css variables. I had heard much about them, but had not used them in production before. The site’s design is built around a big square that holds the album covers. The easiest way to define the length of that square’s sides is to use the viewport width (vw) for both the width and the height. But that only works for vertical screens. For horizontal screens, I have to use the viewport height (vh). That ensures that the square always fits into the viewport, no matter the orientation.

Another more recent CSS feature that I’ve been enjoying is CSS grid. I’m a little late to the party, I know, but Jen Simmon’s advocacy and experimentation encouraged me to take the plunge. For anyone not using grid yet, go do so. It’s ready for production. I used the handy grid-template-areas property to define the grid regions. It’s an odd but satisfying syntax—I like how it exposes the grid visually in the code