Stephen

@[email protected]
311 Followers
88 Following
857 Posts
Hey, I’m Stephen. I'm an American expat living in Berlin with my wife and two dogs. I am a contributor to Rails and the sqlite3-ruby gem as well as the maintainer of a handful of gems aimed at making Ruby and Rails the absolute best platforms in the world to run SQLite projects.
Homepagehttps://fractaledmind.github.io
GitHubhttps://github.com/fractaledmind
LinkedInhttps://www.linkedin.com/in/stephen-margheim-5aa25bb8/
Twitterhttps://x.com/fractaledmind
StephenJan 10

As soon as I saw the Bloom component from Josh Puckett, I knew I had to build it with plain HTML and CSS. This one was tricky, I won't lie, but a lot of fun.

May just add this as an affordance to HTML UI, we shall see.

StephenJan 8

Same olʼ <dialog>, completely new CSS.

HTML UI will have dialog sheets inspired by Silk React components.

No JS, no swipe gestures, but still gorgeous sheets with elegant animations. Just a <dialog class="ui-sheet"> away ✨

StephenJan 5

Which of these buttons do you like more, and why?

Each has a subtle 3d effect, but done in three different ways. Shown here at 1x, 2x, and 8x.

Show threadStephenJan 2
The pattern is quite flexible as well. Here's I've made a more traditional "tabs" interface, but again with *only* HTML and CSS. Even I get surprised at what is possible today with #StylishHTML
StephenJan 2
I genuinely thought such a component required JS. After a day of tinkering, turns out I was wrong. This is a 100% plain HTML and CSS "card tabs" component built with <details>, container queries, and absolute positioning.
Show threadStephenJan 1
These are actual Tailwind v4 utilities built with @utility, so you get tree-shaking and editor auto-complete. Same DX you're used to.
Show threadStephenJan 1

Instead of this...

You write this...

StephenJan 1

Component libraries bundle JS behavior, CSS styling, and DOM templating. Most of the time I just want one, not all three. Headless libraries solved "behaviors only, no styles."

I can't find any "bodiless" libraries offering styles only, no behaviors.

So I'm making HTML UI...

Show threadStephenJan 1
Adding margin between stars breaks the hover UX—gaps create "dead zones" where nothing highlights.
The fix: expand the label WIDTH while keeping the mask-size fixed.
The gap is visual, but the hover target is continuous.
Show threadStephenJan 1

Why mask instead of background-image?

You can't change SVG fill colors dynamically with background images.
But with mask, the SVG acts as a stencil—letting background-color show through.

Now hover states are just color changes.