| 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 03 |
A hot take after seeing yet another fancy tabs design:
the classic "tab component" is over-engineered for 90% of use cases.
You probably don't need it...
|
29 |
1 |
4 |
10.8k |
155 |
. |
| 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 |
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. https://t.co/qoL1pXCegg
|
68 |
1 |
5 |
7.6k |
251 |
. |
| 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 02 |
Everyone knows “headless” UI libraries that offer behavior without styles. BYOCSS.
But we’re missing the inverse: “bodiless” UI.
Styles without behavior. You bring the HTML.
Here’s why we need both…
|
25 |
2 |
6 |
6.6k |
200 |
. |
| Jan 01 |
Yes, yes I did spend lots of time ensuring that the text always aligns with a grid line. Thank you for noticing.
It’s always all about the details 👌
|
23 |
0 |
0 |
3.3k |
150 |
. |
| 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 |
I'm planning to release the first version in a few weeks. Free and open source. If you want to help me kick the tires early, drop a comment—I'd love some beta testers.
|
16 |
0 |
10 |
3.6k |
167 |
. |
| Jan 01 |
I love that these affordance utility classes compose like any utility. `ui-button` is your baseline. Add `text-lg` or `px-6` when you need to. I fully embrace the utility-first approach, where we don't have to name every variant. No `.button--large--rounded--primary` hell.
|
1 |
0 |
1 |
3.8k |
273 |
. |
| Jan 01 |
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... https://t.co/tfmrbd1Avj
|
566 |
24 |
17 |
71.1k |
301 |
. |
| 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 |
. |
| Jan 01 |
Stop using rating libraries. I've created a CSS-only star rating component with half-star support in just 60 lines. No JavaScript. Fully accessible. Smooth hover interactions.
Here’s how it works: 🧵 https://t.co/IpihwCN6IE
|
283 |
10 |
11 |
30.1k |
223 |
. |
| Dec 31 |
Enjoyed this post?
Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content.
|
1 |
0 |
0 |
3.3k |
113 |
. |
| 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 |
Next time you reach for <select multiple>, stop.
Use a fieldset with checkboxes instead. Your users will thank you.
|
8 |
0 |
1 |
4.7k |
122 |
. |
| Dec 31 |
Since they are checkboxes, you can style them however you like:
- Chips/tags
- Cards
- Toggle switches
- Whatever fits your design
Try doing that with `<select multiple>`.
|
8 |
0 |
1 |
5.2k |
179 |
. |
| Dec 31 |
Stop using <select multiple> for "select many" UI. It's the worst form control in HTML. Luckily, there is a better pattern, and it isn't difficult or weird... https://t.co/GN6Sg9vYgd
|
381 |
11 |
14 |
64k |
188 |
. |
| 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 |
Plain HTML and CSS can be beautiful.
Stay tuned 👀 https://t.co/85p6xEK5K0
|
670 |
26 |
24 |
39.6k |
74 |
. |
| 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 30 |
After building a full CSS tree system, I wanted to push it further with two experiments:
1. Folder-style stacked trees
2. Mixed orientations in the same tree
Here's what I learned: 🧵
|
36 |
1 |
2 |
7.5k |
184 |
. |
| Dec 30 |
This is a valuable point and I appreciate Adam nuancing my language. I too often use the term "semantic class" to loosely describe "not one of Tailwind's utility classes", but this is lazy and incorrect. The critical distinction is between presentational classes and semantic classes, does it tell us what the screen will look like or name an abstract entity.
One of my strongly held beliefs is that there is now a common vocabulary of names for the core components of web applications that what may have previously been semantic names now carry presentational meaning. A "button" names a visual effect, a composition of utilities. It is just a higher-order utility. We need not shy away from such classes.
|
11 |
0 |
3 |
7.5k |
708 |
. |
| 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 |
Browser support for @layer: 95%+ globally. It shipped in 2022. It's not experimental. It's not a polyfill situation.
The reason "semantic CSS failed" is no longer true. The platform caught up.
|
9 |
0 |
2 |
2.6k |
194 |
. |
| Dec 29 |
This led to specificity wars.
`.btn-primary` beats `.btn`. `.btn-primary-lg` beats `.btn-primary`. Before long you're writing `.btn-primary-lg-outline-disabled` and praying nothing overrides it.
We threw out semantic classes because of this, and rightly so IMO.
|
2 |
0 |
3 |
3.6k |
263 |
. |
| Dec 29 |
The old problem with .btn:
```
.btn { background: blue; }
```
Specificity == 0,1,0
```
.bg-red-500 { background: red; }
```
Also specificity == 0,1,0
Which wins? Whichever comes last in the stylesheet, i.e. order-dependent chaos.
|
2 |
0 |
2 |
3.6k |
231 |
. |
| Dec 29 |
CSS cascade layers are the most underrated feature of modern CSS. They're why semantic classes work now when they failed before.
Here's the 2-minute explanation:
|
178 |
8 |
6 |
35.3k |
162 |
. |
| 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 |
CSS trees can flow in any direction. Sure, → left-to-right and ↓ top-to-bottom are most common, but a good tree component needs to support ← right-to-left and ↑ bottom-to-top as well
Building on our previous foundations, just one property change for each.
Here's how: 🧵 https://t.co/30WPyMixSm
|
61 |
4 |
1 |
5.9k |
295 |
. |
| 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 |
When you simply need to have a link look like a button, pretty pretty please do this instead 🙏 https://t.co/BKUYvjONPB
|
292 |
7 |
4 |
27k |
118 |
. |
| 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 |
Yesterday I showed how to build horizontal tree structures with just plain HTML and CSS.
Today: vertical trees (org charts, family trees, decision diagrams).
And the lovely detail is that it only takes one key change to make it all work: 🧵 https://t.co/NvA6SFiJ8P
|
176 |
7 |
3 |
21.4k |
265 |
. |
| Dec 27 |
Polymorphic components are a code smell that there is a missing layer in our stack. We need to revive well named classes, but with the wisdom gained from the utility-first movement: https://t.co/WcpwBA0Nm3
|
195 |
18 |
8 |
39.1k |
205 |
. |
| 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 |
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 ...
🧵 https://t.co/mLsIqH08aE
|
201 |
20 |
5 |
15.5k |
298 |
. |
| 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 25 |
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...
|
85 |
1 |
14 |
17.6k |
186 |
. |
| 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 24 |
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.
|
101 |
3 |
12 |
15k |
303 |
. |
| 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 |
👀 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. https://t.co/aqWxEYAqsa
|
29 |
2 |
1 |
3.5k |
285 |
. |
| 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 23 |
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! https://t.co/6cXk8DCchk
|
46 |
1 |
2 |
3.5k |
215 |
. |
| 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 |
Designer-quality dialogs with zero JavaScript 👀
Borrowed the visual design from @trycampsite, but built with native <dialog> and pure semantic HTML and CSS. Full walkthru at: https://t.co/54apoduCpi
Check it https://t.co/OVdSrLK8zw
|
125 |
8 |
4 |
5.4k |
239 |
. |
| 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 22 |
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! https://t.co/mM6mA4ZY33
|
292 |
19 |
8 |
16.5k |
290 |
. |
| 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 20 |
`popover` & `popovertarget` give you dropdown menus w/ light-dismiss for free.
<button popovertarget="menu">Options</button>
<nav id="menu" popover>
<ul>
<li><a href="/settings">Settings</a></li>
<li><a href="/profile">Profile</a></li>
</ul>
</nav>
#StylishHTML https://t.co/8GMeU4o41u
|
220 |
15 |
6 |
11.6k |
388 |
. |
| 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 19 |
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 https://t.co/BNdez46uac
|
608 |
38 |
13 |
22.9k |
307 |
. |
| 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 |
Today's <dialog> elements are your newest secret weapon—simple and powerful. In my latest post, I'll guide you through creating sleek, thoughtful UI with this full-featured, native hero. Dive into the future of stylish <dialog> experiences:
https://t.co/54apoduCpi
|
34 |
5 |
0 |
3.2k |
277 |
. |
