Stephen Margheim
@fractaledmind.bsky.social
Org charts, file trees, tournament brackets—all with pure CSS. No canvas. No SVG. No JS. Just flexbox and pseudo-elements.
Let's break it down, starting with the foundational left-to-right tree, where only a couple dozen lines of CSS can transform this ... into this ...
🧵
Let's break it down, starting with the foundational left-to-right tree, where only a couple dozen lines of CSS can transform this ... into this ...
🧵
December 26, 2025 at 4:02 PM
Org charts, file trees, tournament brackets—all with pure CSS. No canvas. No SVG. No JS. Just flexbox and pseudo-elements.
Let's break it down, starting with the foundational left-to-right tree, where only a couple dozen lines of CSS can transform this ... into this ...
🧵
Let's break it down, starting with the foundational left-to-right tree, where only a couple dozen lines of CSS can transform this ... into this ...
🧵
If you're going to write semantic CSS classes in 2025, don't call them .btn or .card.
Use a ui-* prefix: ui-button, ui-input, ui-badge.
Here's why naming matters more than you think...
Use a ui-* prefix: ui-button, ui-input, ui-badge.
Here's why naming matters more than you think...
December 25, 2025 at 11:02 AM
If you're going to write semantic CSS classes in 2025, don't call them .btn or .card.
Use a ui-* prefix: ui-button, ui-input, ui-badge.
Here's why naming matters more than you think...
Use a ui-* prefix: ui-button, ui-input, ui-badge.
Here's why naming matters more than you think...
Your app/design system needs a .button class before it needs a <Button/> component.
We need to be able to compose behaviors and appearance as needed. A <label> might need to look like a button, or <summary>, or <input type=radio>
Visual affordances deserve their own primitive.
We need to be able to compose behaviors and appearance as needed. A <label> might need to look like a button, or <summary>, or <input type=radio>
Visual affordances deserve their own primitive.
December 24, 2025 at 11:04 AM
Your app/design system needs a .button class before it needs a <Button/> component.
We need to be able to compose behaviors and appearance as needed. A <label> might need to look like a button, or <summary>, or <input type=radio>
Visual affordances deserve their own primitive.
We need to be able to compose behaviors and appearance as needed. A <label> might need to look like a button, or <summary>, or <input type=radio>
Visual affordances deserve their own primitive.
👀 Sneak peek of a 100% plain HTML and CSS component I'm building for my next project.
I'll give a full behind-the-scenes tour of the project to the first person that comments with the correct essential implementation details driving this "card tabs" component.
I'll give a full behind-the-scenes tour of the project to the first person that comments with the correct essential implementation details driving this "card tabs" component.
December 23, 2025 at 4:04 PM
👀 Sneak peek of a 100% plain HTML and CSS component I'm building for my next project.
I'll give a full behind-the-scenes tour of the project to the first person that comments with the correct essential implementation details driving this "card tabs" component.
I'll give a full behind-the-scenes tour of the project to the first person that comments with the correct essential implementation details driving this "card tabs" component.
Have an SVG with stylized text? Want to make the stylized text selectable?
Add a <text fill=transparent> node with the corresponding text.
We can have nice things that are usable too!
Add a <text fill=transparent> node with the corresponding text.
We can have nice things that are usable too!
December 23, 2025 at 10:59 AM
Have an SVG with stylized text? Want to make the stylized text selectable?
Add a <text fill=transparent> node with the corresponding text.
We can have nice things that are usable too!
Add a <text fill=transparent> node with the corresponding text.
We can have nice things that are usable too!
Designer-quality dialogs with zero JavaScript 👀
Borrowed the visual design from Campsite, but built with native
Borrowed the visual design from Campsite, but built with native
December 22, 2025 at 3:57 PM
Designer-quality dialogs with zero JavaScript 👀
Borrowed the visual design from Campsite, but built with native
Borrowed the visual design from Campsite, but built with native
The web platform has supported keyboard shortcuts for over a decade! Say hello to criminally overlooked `accesskey` attribute.
Add it to an interactive element like a button, link, or input so users can fire its default action via keyboard shortcut, no JS required!
Add it to an interactive element like a button, link, or input so users can fire its default action via keyboard shortcut, no JS required!
December 22, 2025 at 10:57 AM
The web platform has supported keyboard shortcuts for over a decade! Say hello to criminally overlooked `accesskey` attribute.
Add it to an interactive element like a button, link, or input so users can fire its default action via keyboard shortcut, no JS required!
Add it to an interactive element like a button, link, or input so users can fire its default action via keyboard shortcut, no JS required!
I spent way too long perfecting animations for my post on crafting stylish
December 21, 2025 at 7:00 PM
I spent way too long perfecting animations for my post on crafting stylish
December 20, 2025 at 8:00 PM
I'm crafting a novel tool that uses keyboard usability as the ultimate test for page accessibility, while also diving deep into the a11y tree.
Excited seeing it take shape! 👀
Excited seeing it take shape! 👀
December 19, 2025 at 4:00 PM
I'm crafting a novel tool that uses keyboard usability as the ultimate test for page accessibility, while also diving deep into the a11y tree.
Excited seeing it take shape! 👀
Excited seeing it take shape! 👀
Breadcrumb separators belong in CSS, not HTML. Just use the `::after` pseudo-element.
nav > ol > li:not(:last-child)::after {
content: " / ";
color: lightgray;
padding: 0 0.5em;
}
The `:not(:last-child)` ensures no trailing separator after the final item.
#StylishHTML
nav > ol > li:not(:last-child)::after {
content: " / ";
color: lightgray;
padding: 0 0.5em;
}
The `:not(:last-child)` ensures no trailing separator after the final item.
#StylishHTML
December 19, 2025 at 11:00 AM
Breadcrumb separators belong in CSS, not HTML. Just use the `::after` pseudo-element.
nav > ol > li:not(:last-child)::after {
content: " / ";
color: lightgray;
padding: 0 0.5em;
}
The `:not(:last-child)` ensures no trailing separator after the final item.
#StylishHTML
nav > ol > li:not(:last-child)::after {
content: " / ";
color: lightgray;
padding: 0 0.5em;
}
The `:not(:last-child)` ensures no trailing separator after the final item.
#StylishHTML
I think @trycampsite had some of the most elegant UI on the web, especially for modal dialogs, but it was all React components rendering
s inside
s.
So I stole their design and rebuilt it with semantic HTML and CSS. 😅
fractaledmind.com/2025/12/18/...
So I stole their design and rebuilt it with semantic HTML and CSS. 😅
fractaledmind.com/2025/12/18/...
December 18, 2025 at 11:00 AM
I think @trycampsite had some of the most elegant UI on the web, especially for modal dialogs, but it was all React components rendering
s inside
s.
So I stole their design and rebuilt it with semantic HTML and CSS. 😅
fractaledmind.com/2025/12/18/...
So I stole their design and rebuilt it with semantic HTML and CSS. 😅
fractaledmind.com/2025/12/18/...
SVG icons have been "solved" myriad ways, but I find them all lacking.
Inline SVGs? Bloated DOM.
<img> tags? Can't change colors.
Icon fonts? Blurry at certain sizes, a11y issues.
CSS background-image? Still can't change colors.
But, today there's actually a perfect solution...
Inline SVGs? Bloated DOM.
<img> tags? Can't change colors.
Icon fonts? Blurry at certain sizes, a11y issues.
CSS background-image? Still can't change colors.
But, today there's actually a perfect solution...
December 17, 2025 at 7:21 PM
SVG icons have been "solved" myriad ways, but I find them all lacking.
Inline SVGs? Bloated DOM.
<img> tags? Can't change colors.
Icon fonts? Blurry at certain sizes, a11y issues.
CSS background-image? Still can't change colors.
But, today there's actually a perfect solution...
Inline SVGs? Bloated DOM.
<img> tags? Can't change colors.
Icon fonts? Blurry at certain sizes, a11y issues.
CSS background-image? Still can't change colors.
But, today there's actually a perfect solution...
The Tailwind community has become too dogmatic about utility-only.
Tailwind is utility-FIRST, not utility-ONLY. And @utility and @apply are criminally underused. And here is why this matters...
Tailwind is utility-FIRST, not utility-ONLY. And @utility and @apply are criminally underused. And here is why this matters...
December 16, 2025 at 2:21 PM
The Tailwind community has become too dogmatic about utility-only.
Tailwind is utility-FIRST, not utility-ONLY. And @utility and @apply are criminally underused. And here is why this matters...
Tailwind is utility-FIRST, not utility-ONLY. And @utility and @apply are criminally underused. And here is why this matters...
Tab testing doesn’t find accessibility issues.
It finds usability issues that happen to block keyboard users first.
Broken focus order, invisible states, unreachable controls—these aren’t “accessibility bugs.” They’re just bugs. Keyboard users hit them before anyone else notices.
It finds usability issues that happen to block keyboard users first.
Broken focus order, invisible states, unreachable controls—these aren’t “accessibility bugs.” They’re just bugs. Keyboard users hit them before anyone else notices.
December 15, 2025 at 5:56 PM
Tab testing doesn’t find accessibility issues.
It finds usability issues that happen to block keyboard users first.
Broken focus order, invisible states, unreachable controls—these aren’t “accessibility bugs.” They’re just bugs. Keyboard users hit them before anyone else notices.
It finds usability issues that happen to block keyboard users first.
Broken focus order, invisible states, unreachable controls—these aren’t “accessibility bugs.” They’re just bugs. Keyboard users hit them before anyone else notices.
Tab through any site for 30 seconds and you’ll know more about its real accessibility than an hour with a linter.
Focus disappears? Problem.
Can’t reach the nav? Problem.
Trapped in a modal? Problem.
It’s a stress test for your whole UI in one keystroke.
Focus disappears? Problem.
Can’t reach the nav? Problem.
Trapped in a modal? Problem.
It’s a stress test for your whole UI in one keystroke.
December 15, 2025 at 2:02 PM
Tab through any site for 30 seconds and you’ll know more about its real accessibility than an hour with a linter.
Focus disappears? Problem.
Can’t reach the nav? Problem.
Trapped in a modal? Problem.
It’s a stress test for your whole UI in one keystroke.
Focus disappears? Problem.
Can’t reach the nav? Problem.
Trapped in a modal? Problem.
It’s a stress test for your whole UI in one keystroke.
Your accessibility audit says you’re compliant.
Your keyboard users can’t complete your signup flow.
These aren’t contradictory. We’ve just been measuring the wrong thing.
Your keyboard users can’t complete your signup flow.
These aren’t contradictory. We’ve just been measuring the wrong thing.
December 14, 2025 at 5:59 PM
Your accessibility audit says you’re compliant.
Your keyboard users can’t complete your signup flow.
These aren’t contradictory. We’ve just been measuring the wrong thing.
Your keyboard users can’t complete your signup flow.
These aren’t contradictory. We’ve just been measuring the wrong thing.
Accessibility tools ask “does this image have alt text?” The actual question is “can someone navigate your interface?” One is compliance. The other is usability.
We’ve been testing the wrong thing.
We’ve been testing the wrong thing.
December 14, 2025 at 3:03 PM
Accessibility tools ask “does this image have alt text?” The actual question is “can someone navigate your interface?” One is compliance. The other is usability.
We’ve been testing the wrong thing.
We’ve been testing the wrong thing.
I cloned @laravel.com's Cloud breadcrumbs as a simple
December 14, 2025 at 12:04 PM
I cloned @laravel.com's Cloud breadcrumbs as a simple
Try this: Tab through your homepage without touching your mouse.
Can you tell what’s focused? Can you reach the main CTA? Can you get back out of the menu?
That 30-second test tells you more than your lighthouse score ever will.
Can you tell what’s focused? Can you reach the main CTA? Can you get back out of the menu?
That 30-second test tells you more than your lighthouse score ever will.
December 13, 2025 at 8:32 PM
Try this: Tab through your homepage without touching your mouse.
Can you tell what’s focused? Can you reach the main CTA? Can you get back out of the menu?
That 30-second test tells you more than your lighthouse score ever will.
Can you tell what’s focused? Can you reach the main CTA? Can you get back out of the menu?
That 30-second test tells you more than your lighthouse score ever will.
The fastest accessibility audit: Tab through your site.
Where does focus land? Can you see it? Can you reach everything? Can you escape that modal?
Your linter can’t answer these. They’re also the only questions that matter.
Where does focus land? Can you see it? Can you reach everything? Can you escape that modal?
Your linter can’t answer these. They’re also the only questions that matter.
December 13, 2025 at 7:34 PM
The fastest accessibility audit: Tab through your site.
Where does focus land? Can you see it? Can you reach everything? Can you escape that modal?
Your linter can’t answer these. They’re also the only questions that matter.
Where does focus land? Can you see it? Can you reach everything? Can you escape that modal?
Your linter can’t answer these. They’re also the only questions that matter.
This is the page it built base on that simple prompt. Yes, I tailored it with specific inspiration and specific base HTML. But this is so much better than I ever expected. See the full page link in the quoted post.
December 13, 2025 at 7:11 PM
This is the page it built base on that simple prompt. Yes, I tailored it with specific inspiration and specific base HTML. But this is so much better than I ever expected. See the full page link in the quoted post.
The prompt:
Here are three of my favorite landing pages that use the TUI aesthetic:
* openstatus
* turbopuffer
* planetscale
screenshots attached. I want you to redesign the HTML I've attached to get something that both feels unique and familiar with these.
➡️ gemini.google.com/app/f1ee065a...
Here are three of my favorite landing pages that use the TUI aesthetic:
* openstatus
* turbopuffer
* planetscale
screenshots attached. I want you to redesign the HTML I've attached to get something that both feels unique and familiar with these.
➡️ gemini.google.com/app/f1ee065a...
December 13, 2025 at 7:10 PM
The prompt:
Here are three of my favorite landing pages that use the TUI aesthetic:
* openstatus
* turbopuffer
* planetscale
screenshots attached. I want you to redesign the HTML I've attached to get something that both feels unique and familiar with these.
➡️ gemini.google.com/app/f1ee065a...
Here are three of my favorite landing pages that use the TUI aesthetic:
* openstatus
* turbopuffer
* planetscale
screenshots attached. I want you to redesign the HTML I've attached to get something that both feels unique and familiar with these.
➡️ gemini.google.com/app/f1ee065a...
English
300
Connect Bluesky
Enter your Bluesky handle and app password to unlock posting, likes, and your Following feed.
Need an app password? Open Bluesky, go to Settings > App passwords, and create a new one.
Connect with Bluesky
Sign in with your Bluesky account to unlock posting, likes, and your Following feed.