X Stats

Login Sign Up
@fractaledmind

Stephen Margheim

@fractaledmind

699 Tweets
1,303 Following
4,462 Followers

Modern CSS • Web Platform APIs • Rails + SQLite

Date ↓ Tweet ❤️ 🔄 💬 👁 📝
Jan 04 Who's building a design system or component kit using Tailwind, fully leveraging its features? Others must be doing more than just applying styles. I'm creating custom utilities, modifying built-ins, adding layers, and defining properties. If you’re doing the same, let’s connect. 0 1 1 72 280 .
Jan 04 RT @fractaledmind: If you button component styles can't work on input[type=submit] or input[type=reset], where ::before/::after pseudo-elem… 0 1 0 0 140 .
Jan 04 RT @fractaledmind: A hot take after seeing yet another fancy tabs design: the classic "tab component" is over-engineered for 90% of use ca… 0 1 0 0 140 .
Jan 04 If you button component styles can't work on input[type=submit] or input[type=reset], where ::before/::after pseudo-elements aren't present, then you have an undercooked component IMO. So, a challenge for HTML UI has been getting the subtle 3d effect I want without pseudos. 8 1 0 1.2k 275 .
Jan 03 Before reaching for a tab library, ask: is this really a tab interface? Or is it content that could just... be on the page or navigated to on another page with shared structure and styling. 7 0 1 1.4k 189 .
Jan 03 Since that's all you need, simpler patterns exist: 1. Anchor links + scroll-snap: Just link to sections. CSS handles the rest. 2.
elements with [name] attr: Accordion pattern. Native, accessible, less complex. 3. Just… show everything. 4. Just… put it on another page.
8 0 1 1.6k 279 .
Jan 02 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 https://t.co/YVieqip1pk 7 0 0 834 217 .
Jan 02 There are two types of developers: “Least power devs” — What’s the simplest tool that solves my problem today? “Maximum optionality devs” — What tool handles every problem I might have in 5 years? I know which camp I’m in. 3 1 0 858 223 .
Jan 02 I’m building HTML UI—a bodiless component kit. Affordance utilities for the modern web platform. Tailwind-native. Zero JavaScript. ui-button, ui-dialog, ui-menu, ui-badge… Styling that works with any semantic element. Follow along. More soon. 7 0 0 714 242 .
Jan 02 The future is both: Use headless when you need behavior the platform doesn’t provide. Use bodiless when the platform handles behavior and you just need polish. Stop shipping JavaScript for things CSS can do. Stop shipping divs for things semantic HTML can do. 4 0 1 863 261 .
Jan 02 Headless UIs (Base UI, Headless UI, React Aria): • Give you: accessibility, keyboard nav, focus management, state • You provide: all the styling The “head” is the behavior. They ship the head. You style the body. 3 1 1 543 213 .
Jan 01 Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 0 0 0 1.4k 113 .
Jan 01 What UI component should I rebuild in pure CSS next? I'd love to see your suggestions below 👇 2 0 2 1.8k 94 .
Jan 01 Full code playground: https://t.co/0uYUgdMpqC 60 lines of CSS. No dependencies. Works everywhere. Follow @fractaledmind for more CSS that replaces JavaScript. 19 0 3 2.2k 160 .
Jan 01 .star-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; } DOM order: 5★ → 0.5★ Visual order: 0.5★ → 5★ Now `~` selects the "previous" stars visually. 4 0 2 2.1k 194 .
Jan 01 The key insight comes from a constraint: CSS can only select elements AFTER the current one (with ~). But star ratings need to highlight stars BEFORE the hovered one. The fix? Reverse the DOM order and use `flex-direction: row-reverse` to flip the visual. 11 0 1 2.2k 257 .
Dec 31 Yes, yes it is. Join us. https://t.co/fKWDTTxklN 9 1 0 1.7k 49 .
Dec 31 cc @petersuhm and @aarondfrancis who enjoy reading such posts. Enjoy. 0 0 0 514 69 .
Dec 31 Wild looking back at this year. So much has changed, so much has stayed the same. But one of my absolute favorite years ever. https://t.co/yAAnafxff9 https://t.co/XfNDxlRJoO 17 0 1 2.2k 174 .
Dec 31 Amdahl's Law hits hard: Postgres plummets from 13k to 660 TPS with just 10ms latency in serializable transactions. Adding hardware won't help; the network bottleneck remains. SQLite avoids this with its embedded nature, achieving 100k+ TPS on a laptop. 🔥 https://t.co/139NGbePnz 5 0 1 1.6k 279 .
Dec 30 And follow @fractaledmind for more CSS deep dives. 1 0 0 797 50 .
Dec 30 Full series: Part 1: Horizontal trees Part 2: Vertical trees Part 3: Inverse directions Part 4: Centered brackets Part 5: Experiments Write up on the experiments and full tree code: https://t.co/cTgSV1VYAq 4 0 1 965 207 .
Dec 30 Because the modifiers are scoped to their containers, they compose naturally. The CSS doesn't fight itself. But, getting things *just right* is quite tricky. 0 0 1 430 157 .
Dec 30 Experiment 2: different orientations for SUB-trees. Main tree horizontal, but one branch vertical. <ul class="tree -horizontal"> <li> <ul class="-vertical">...</ul> </li> </ul> https://t.co/cbqe6xXxzB 2 0 1 450 245 .
Dec 29 Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 2 0 0 1.2k 113 .
Dec 29 The fuull system has 6 tree variations from ~150 lines of CSS. Horizontal (LTR, RTL, centered) Vertical (TTB, BTT, centered) Final post tomorrow: experiments with mixed orientations... 1 0 0 485 186 .
Dec 29 Now we have bracket-style trees. Same base CSS. One -centered modifier. Full write-up on the blog: https://t.co/N5jpoLLREu 0 0 1 520 123 .
Dec 29 Tournament brackets. Org charts with a CEO in the middle. Decision trees that branch both ways. These need CENTERED trees — children on both sides of the parent. Here's the CSS trick: 🧵 https://t.co/dycehI98pa 17 0 1 2k 211 .
Dec 29 If you tried semantic classes in the Bootstrap era and swore them off, it's time to revisit. We can now write affordance classes that compose cleanly with utilities. The old problems are solved, so let's build the missing layer! 9 0 1 2.4k 228 .
Dec 29 RT @strzibnyj: Are you going to experiment with SQLite in 2026? https://t.co/kxMyvGiRPY 0 2 0 0 88 .
Dec 28 4 directions from one codebase. Next up: centered "bracket" trees for tournament-style layouts. Full write-up: https://t.co/mMbAw0ijlI 6 1 0 741 136 .
Dec 28 I'm using BEM-style modifiers: <ul class="tree -horizontal"> <!-- → --> <ul class="tree -horizontal -inverse"> <!-- ← --> <ul class="tree -vertical"> <!-- ↓ --> <ul class="tree -vertical -inverse"> <!-- ↑ --> Composable. Predictable. 3 0 1 752 323 .
Dec 28 Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 1 0 0 710 113 .
Dec 27 Find the full write up on this at https://t.co/WTZbm6A8GS 12 0 0 1.4k 57 .
Dec 27 The pattern: HORIZONTAL trees: * Nodes flow left→right * Connectors are vertical between siblings VERTICAL trees: * Nodes flow top→bottom * Connectors are horizontal between siblings Swap axes, swap borders. 2 0 1 1.6k 218 .
Dec 27 Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 0 0 0 899 113 .
Dec 26 For the full write-up on this tho, head to: https://t.co/GJ8rzxQcur 8 1 0 1.4k 68 .
Dec 26 78 lines of CSS. That's it, and we have a fully rendered tree graph. But this is just horizontal, left-to-right. What about vertical? Right-to-left? Centered brackets? That's parts 2-5 of this series. 😉 Stay tuned. 6 1 1 1.4k 216 .
Dec 26 Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 0 0 0 485 113 .
Dec 26 RT @pinzonjulian: I’ve been struggling for a while to convey this concept but @fractaledmind nailed the naming and the concepts beautifully… 0 1 0 0 140 .
Dec 25 Names carry history. .btn carries trauma. If you're building an affordance layer, start fresh. Use ui-*. Your future self (and your team) will thank you. 1 0 0 1.6k 154 .
Dec 25 For variants, I simply add a slash, so `ui-button` becomes `ui-button/subtle`. One class, easy to author: @​utililty ui-button/subtle { @​apply ui-button; @​apply bg-transparent ...; } 6 0 1 1.7k 189 .
Dec 24 This setting will finally let me continue listening to podcasts while I doomscroll! Find it here: Settings and Privacy > Accessibilty, Display, and Languages > Accessibility > Motion You’re welcome 😇 3 1 0 948 211 .
Dec 23 Here is one hint: The "tabs" affordance is simply an alternative visual representation of the "accordion" affordance. How do we build accordions in pure HTML? 0 0 1 500 159 .
Dec 23 The pattern is quite flexible as well. Here's I've made a more traditional "tabs" interface, but again with *only* HTML and CSS. https://t.co/wBqCUWFPe5 2 0 1 490 152 .
Dec 23 @trycampsite Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 0 0 0 361 126 .
Dec 23 This required some manual tweaking, but only 5 minutes of work. https://t.co/u0zarqtSMG 3 0 0 402 87 .
Dec 23 You can then tweak the font-size, letter-spacing, and positioning to have it line up as well as possible with the stylized content. For example, the demo above looks like this when the fill is red. https://t.co/aXmSjmPoTs 3 0 1 433 221 .
Dec 22 Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 3 0 0 681 113 .
Dec 22 And showing the full shortcut label like above means users always know how to activate the shortcut, even if they change browsers or operating system. I for one love this hidden gem. MDN docs: https://t.co/OMPP33cNBx and https://t.co/6inI6RAAYA 8 0 0 1k 246 .
Dec 22 And, for nonsensical to me reasons, most docs about `accesskey` warn against using it, tho the reasons given apply to any implementation of keyboard shortcuts. And the modifier variability is a minor inconvenience in reality; most users use 1 browser on 1 OS consistently. 3 0 1 1.1k 272 .
Dec 21 So much nuance to nail all of the details! 0 0 0 433 42 .
Dec 21 The debugging trick that saved me: multiply all your transition timings by 10x. Once you can actually watch each frame in slow motion, the problems become obvious. 0 1 2 904 163 .
Dec 21 CSS transitions animate the shortest path between states. You can't have asymmetric entry/exit animations (like slide-up in, scale-down out) with transitions alone—exit always reverses the entry. 0 0 1 161 195 .
Dec 21 The backdrop has its own `overlay` and `display` properties that need `allow-discrete` transitions. If their durations don't match the dialog's, you get backdrops that linger after close or vanish too early. 0 0 1 195 207 .
Dec 21 `@​starting-style` nested inside the base `dialog` selector does nothing. It needs to be inside `dialog[open]`, since it defines where to animate from when entering that specific state. 2 0 1 698 185 .
Dec 21 I spent way too long perfecting animations for my post on crafting stylish <dialog>s. So, I compiled all my mistakes so you can nail it on the first try. Check it out or pass it along to your coding agent 😉 https://t.co/M6GWsIMBIZ 24 0 1 2k 237 .
Dec 21 Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 1 0 0 558 113 .
Dec 20 PS. As always, if you want to learn how to make beautiful popover menus like in the GIF with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏 2 0 0 763 200 .
Dec 20 Each breadcrumb segment can have its own popover for switching between items at that level—organizations, projects, environments—without any JavaScript toggle logic. Combine with CSS anchor positioning and position fallbacks for pixel-perfect dropdown placement. 4 0 1 838 263 .
Dec 19 If this is something you would be interested in, DM me to get in early and check it out. 2 0 0 356 88 .
Dec 19 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! 👀 https://t.co/H9yX0tYqSM 20 0 3 1.3k 199 .
Dec 19 I've had very similar experiences, which is why I turn to @GeminiApp now for all of my 0→1 design explorations. Have it spin up 3 distinct designs; each will be truly unique. Mix and match the parts you like best and iterate on a single design. Works like ✨ 5 0 0 1k 257 .
Dec 19 Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 1 0 0 832 113 .
Dec 19 PS. As always, if you want to learn how to make beautiful breadcrumbs like in the image with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏 4 0 0 1.1k 200 .
Dec 19 This pattern works for any horizontal list needing separators—breadcrumbs, tag lists, or inline metadata. 2 0 1 1.1k 105 .
Dec 18 @trycampsite Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 0 0 0 422 126 .
Dec 18 @PixelJanitor @ryannystrom @brian_lovin this is the first of my love letters to Campsite’s components and the modern web. Thank you so much for open sourcing your lovely lovely work. 3 0 1 710 182 .
Dec 18 RT @rails: Secret mission: To present this year's Rails Luminary award to @marcoroth_ in person, Rails Core member @fxn traveled to the Rai… 0 18 0 0 140 .
Dec 17 RT @rails: Congratulations @marcoroth_! The Rails Core team has announced Marco as the 2025 Rails Luminary. The Luminary award exists to ce… 0 29 0 0 140 .
Dec 17 Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 2 0 1 651 113 .
Dec 16 I've written a blog post on the concept of "affordance utilities" here, if you want to read more: https://t.co/WcpwBA0Nm3 17 2 3 1.3k 121 .
Dec 16 Stop feeling guilty about @​apply. Start building affordance utilities for your UI primitives. Keep the contract. Lose the dogma. 7 0 1 1.3k 131 .
Dec 15 The #lowbuild principle: Minimal dependencies. Maximum leverage. One build tool that solves a real problem, with escape hatches that scale to your needs. #nobuild is ideological. #lowbuild is pragmatic. 4 0 1 472 205 .
Dec 15 "But utility-only is limiting!" Yes. That's why Tailwind lets you write custom @utility classes that get tree-shaken just like the built-ins. Semantic affordance classes AND dead-code elimination. It's not 2015 anymore. https://t.co/WcpwBA0Nm3 1 0 1 465 245 .
Dec 15 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. 0 1 0 608 281 .
Dec 15 Did a collap with @_swanson and got a retweet from one of my favorite Rubyists and follows, @kwuchu! Here's to hoping he likes the article 🤞 https://t.co/K82IREisPd 7 0 1 1.8k 164 .
Dec 15 RT @_swanson: Last week on the TL, I saw: - PR in Fizzy to upgrade the `data-turbo-confirm` dialog - Browser native dialog opening, light-d… 0 7 0 0 140 .
Dec 15 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. 3 1 0 548 256 .
Dec 15 @laravelphp Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 0 0 0 382 125 .
Dec 14 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. 3 0 0 660 171 .
Dec 14 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. 2 0 1 869 198 .
Dec 13 Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 3 0 0 536 113 .
Dec 13 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. 6 0 0 915 226 .
Dec 13 Note: I am *not* building an NPM package or a CLI. I *am* building a browser extension. But, accessibility is usability, and we _should_ test it that way! 1 0 0 653 156 .
Dec 13 RT @fractaledmind: The prompt: Can you "see" webpages if I give you links? Here are three of my favorite landing pages that use the TUI ae… 0 1 0 0 140 .
Dec 13 This is the page it built based on that simple prompt. Be sure to check out the full page in the link in the quoted tweet https://t.co/UYcfrsnkOv 2 0 0 1.5k 145 .
Dec 13 And: ``` dialog::backdrop { background-color: rgb(0 0 0 / 0.5); transition: background-color 0.2s ease-out, overlay 0.2s ease-out allow-discrete, display 0.2s ease-out allow-discrete; @starting-style { background-color: rgb(0 0 0 / 0); } } ``` https://t.co/pJL3CbGEeq 2 0 0 433 292 .
Dec 13 CSS snippet: ``` dialog { opacity: 1; scale: 1; transition: opacity 0.2s ease-out, scale 0.2s ease-out, overlay 0.2s ease-out allow-discrete, display 0.2s ease-out allow-discrete; @starting-style { opacity: 0; scale: 0.95; } } ``` https://t.co/RFtt7O5Mq3 2 0 1 519 290 .
Dec 12 RT @Una: Safari 26.2 (a selection): - command invokers - field-sizing: content - sibling-index() & sibling-count() - anchor improvements l… 0 31 0 0 144 .
Dec 12 Plus there is a whole lot more, and lots of features I'll be writing more about and demoing soon. Upgrade and checkout all of the goodness! 0 0 0 258 139 .
Dec 12 Safari 26.2 is here and full of features I've been writing about lately, like • `command` and `commandfor` invoker attributes • `field-sizing: content` for auto-expanding <textarea>s • improvements to Anchor Positioning • `scrollbar-color` styling https://t.co/OWExHhZOip 10 1 1 1.1k 278 .
Dec 12 You can animate the backdrop too 😉 ``` dialog::backdrop { background-color: rgb(0 0 0 / 0.5); transition: background-color 0.2s ease-out; @starting-style { background-color: rgb(0 0 0 / 0); } } ``` https://t.co/asLTXZn3x5 1 0 0 284 234 .
Dec 12 Learn more at MDN: https://t.co/ygVj0SUSwv 0 0 1 307 42 .
Dec 12 Want smooth fade-in animations when your `<dialog>` opens? The `@starting-style` CSS rule defines the initial state when an element first appears—no JavaScript needed. 23 1 1 1.1k 173 .
Dec 11 You can subscribe at this landing page I whipped on with the help of @kit. I have so much more cool stuff planned to write about, record videos about, and build. If you love the web, SQLite, HTML, CSS, and/or Ruby, I genuinely think you should join. https://t.co/6wVEE5RLWL 2 0 0 258 274 .
Dec 11 After years and years and years, I *finally* have added a newsletter sign up to my blog! If you love building beautiful and high-leverage things on and for the web, I think we would get along swell. So come join my journey as I chase my own sense of perfection. https://t.co/1hCFQp2jWE 7 0 3 520 286 .
Dec 11 PS. As always, if you want to learn how to make beautiful <dialog>s like in the GIF with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏 2 0 0 197 202 .
Dec 11 I absolutely love the new Invoker Commands API and what it does for the power of declarative HTML. Learn more at MDN: https://t.co/PTQVxTlgAE https://t.co/I1Ysb67W05 2 0 1 218 166 .
Dec 11 In addition to closing <dialog>s, the `command` and `commandfor` attributes are wonderful for opening dialogs. You can open dialogs in either a modal (`show-modal`) or non-modal (`show`) state. #StylishHTML https://t.co/bGUcPYdnST 25 1 3 1.8k 237 .
Showing 1-100 of 568 tweets
← Prev 1 2 ... 6 Next →