Menu

CSS

Old is Solid; New Gets Talked About

December 15th, 2020

When Chris asked me to write about “one thing I learned about building websites this year” I admit my brain immediately went through a list of techniques and CSS properties I started using this year. But then I paused. Other people can write about that much better than I can. What’s something that I specifically…

Debugging CSS

December 14th, 2020

High five to Ahmad Shadeed for releasing his new book, Debugging CSS. I think that’s a neat angle for a book on CSS. There are a ton of books on the general subject of CSS already, so not that they can’t be fresh takes on that, but this feels equally important and less trodden territory….

Make it Personal

December 11th, 2020

One thing I noticed about building websites in 2020: despite all the social networks and publishing platforms craving our content, our stories, and our attention, people are somehow still building personal websites. Over the course of the year, many of you have launched or relaunched your website. It indeed feels like the personal website is…

Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode

December 10th, 2020

Black isn’t always slimming. All of my page text — headings and body copy — appeared to bulk up when I switched to dark mode. And it didn’t matter what fonts I used or which browsers I tried. The same thing happened with all of them. For example, here’s what happens with Adobe’s Source Sans…

Web Performance Calendar

December 7th, 2020

The Web Performance Calendar just started up again this year. The first two posts so far are about, well, performance! First up, Rick Viscomi writes about the mythical “fast” web page: How you approach measuring a web page’s performance can tell you whether it’s built for speed or whether it feels fast. We call them…

Native CSS Masonry Layout In CSS Grid

November 30th, 2020

Rachel Andrew introducing the fact that masonry layout is going to be a thing in native CSS via CSS grid layout. The thing with masonry is that we can already do it for the most part, but there is just one thing that makes it hard: doing the vertical-staggering and having a left-to-right source order….

A Complete State Machine Made With HTML Checkboxes and CSS

November 27th, 2020

State machines are typically expressed on the web in JavaScript and often through the popular XState library. But the concept of a state machine is adaptable to just about any language, including, amazingly, HTML and CSS. In this article, we’re going to do exactly that. I recently built a website that included a “no client…

DRY-ing up styled-components

November 23rd, 2020

I like working with styled-components. They allow you to write CSS in your JavaScript, keeping your CSS in very close proximity to your JavaScript for a single component. As a front-end developer who loves to dissect a web page and break it down into reusable components, the idea of styled-components brings me joy. The approach…

A Dynamically-Sized Sticky Sidebar with HTML and CSS

November 20th, 2020

Creating page content that sticks to the viewport as you scroll, something like a jump-to-anchor menu or section headings, has never been easier. Throw a position: sticky into your CSS ruleset, set the directional offset (e.g. top: 0) and you’re ready to impress your teammates with minimal effort. But sticky positioning can get a bit…

Color Theming with CSS Custom Properties and Tailwind

November 19th, 2020

Custom properties not only enable us to make our code more efficient but allow us to work some real magic with CSS too. One area where they have huge potential is theming. At Atomic Smash we use Tailwind CSS, a utility class framework, for writing our styles. In this article, we’ll look at how custom…