Thanks to Andy Bell’s ever-so-good newsletter, The Index, I found myself ooo-ing and aaa-ing at Michelle Barker’s excellent post from back in May about creating a JavaScript-free menu with the latest bells and whistles like anchor-positioning and the Popover API:
Anchor positioning in CSS enables us to position an element relative to an anchor element anywhere on the page. Prior to this we could only position an element relative to its closest positioned ancestor, which sometimes meant doing some HTML and CSS gymnastics or, more often than not, resorting to Javascript for positioning elements like tooltips or nested submenus.
There’s a lot of good examples in that post that are worth checking out but one thing that stuck out to me was the <menu> HTML element which we can use like this for a series of interactive actions:
<menu>
<li><button>Copy</button></li>
<li><button>Cut</button></li>
<li><button>Paste</button></li>
</menu>
...how have I never used this before!?
Andy Bell set out to convert all the hex colors (like #FFFFFF for white) into p3 colors and wrote up his process:
I’ll be honest. I am not smart enough to explain the new colour systems that CSS has in its ever-expanding toolset. What I can do though, is show you what a major impact they can have with not much effort.
Andy also links to hexp3.com which lets ya pass in any hex value and it’ll do its best to transform it into a p3 color.
Just last week Andy Bell wrote about his CSS boilerplate for starting new projects. But the part that caught my eye was the way that he’s using Tailwind to generate CSS utility classes like this:
.m-l-10 {
margin-left: 10px;
}
.m-r-10 {
margin-right: 10px;
}
In my experience, utility classes in CSS—think Tailwind of Tachyons—tends to be a nightmare but a limited subset of them such as spacing classes or typographic helpers like this are genuinely handy. The problem is that you’ve often got to pick all of them outta those kinds of CSS frameworks or write your own by hand which is error prone and slow.
So Andy has a JSON file for each design token, like colors, spacing, font-size, which he then runs through Tailwind to create the classes. Then he imports that directly into his CSS. My first thought was: whoa! For every new project it must be amazing to tweak a few variables in a JSON file, run a command, and get a fresh batch of CSS utilities.
The other day I then spotted that Saneef Ansari was inspired by all this and made a PostCSS plugin to do the same thing, except without Tailwind as a dependency. These design utilities then get converted into CSS custom properties like this:
:root {
--color-accent: #16a34a;
--color-dark: #111827;
--color-light: #f3f4f6;
--space-xs: 0.25rem;
--space-s: 0.5rem;
--space-m: 1rem;
--space-l: 2rem;
}
And you can also create the CSS utility classes with a single line of code!
That’s...extremely neat! My only jerky thought here is this: what if I didn’t want to use PostCSS as a dependency either? I could imagine a website where I just import some JSON or write my own classes, hit a button, and then export either a list of CSS classes...
.bg-dark {
background: #333;
}
.bg-light {
background: #fff;
}
...or custom properties...
:root {
--bg-dark: #333;
--bg-light: #fff;
}
...or both! Then I’m free to slam that into any project regardless of how it’s built and so I don’t need to even have npm as a dependency.