I was in a situation recently where I wanted to show an iPhone on a website. I wanted users to be able to interact with an application demo on this “mock” phone, so it had to be rendered in CSS, not an image. I found a great library called marvelapp/devices.css. The library implemented the device I needed with pure CSS, and they looked great, but there was a problem: the devices it offered were not responsive (i.e. they couldn’t … Read article “Turning a Fixed-Size Object into a Responsive Element”
The fact that lists render their markers outside their own box (by default) is slightly weird. Any hidden overflow or overhanging off the edge of the browser will hide them. Moving them inside the box feels better and safer, but doing it that the easy way means losing the really nice alignment we got for free with outside list markers. We want it both ways! Let’s do that with our own custom counters, CSS grid (with subgrid), and some more … Read article “#184: Inside & Aligned Lists”
I had a dumb little issue the other day where a nested list didn’t quite have the right spacing. I was only adding margin-bottom on the list elements and the lists themselves, but that meant there was no space between the first nested list item and the parent list item above it when nesting a list. It got me thinking about margins, spacing in general, and nested items.
I didn’t realize this until it was far too late, but one of the biggest mistakes that’s made on a design systems team is a common mismanagement issue: there are too many people in a meeting and they have too many dang opinions.
The other day I was helping my pal Jez work on Dept. of Enthusiasm, the site for his newsletter, and I had a thought. What if we made the word “enthusiasm” in the title animate a little bit? Like, what if each of the letters in the word bopped up and down enthusiastically?… Read article “How to Animate Text with SVG and CSS”
These cases of CSS messing with our screenreader announcements are initially shocking, perplexing, and maybe even appalling. After all, they seem to conflict with our mental model of CSS, one that’s likely been instilled in us since we started learning web development:
Every three years of so, some people should pick a couple
There was no purpose to having two of them other than the fact that having just one didn’t tint the image enough. For some reason, whoever initially coded that … Read article “Adventures in CSS Semi-Transparency Land”