Kevin Babbitt

@kevinbcmu.bsky.social

💡 CSS Tip! An old design pattern solved by a modern CSS feature. css-tip.com/responsive-s... Learn how Gap Decorations makes it easy to add a separator between items using simple code with no hacks. It works with different alignment settings, and you can easily adjust the shape as well.

CSS by T. Afif@css-only.dev · last mo.

📝 New CSS Article! I did a quick exploration of the new "Gap Decorations" thing, and I ended up doing a lot of fancy stuff except for decorating the gaps 😅 master.dev/blog/lets-pl... Read my latest article to learn a lot of nice tricks around this feature.

🚀 New article on gap decorations (coming soon) in CSS. I have a small obsession with clean layout lines, and this is the first time it feels easy to draw them without polluting the markup. Goes through the new properties, a playground, and some experiments... 👾 utilitybend.com/blog/css-is-...

CSS is filling the gaps with rules. A way to style gaps in grid and flex. | utilitybend

A practical walkthrough of CSS gap decorations: column-rule, row-rule, rule-break, rule-inset, rule-visibility-items, repeat(), and animation.

utilitybend.com

NAMING HELP NEEDED: Looking for single words, to be used in CSS property names, that distinguish between gap decoration ends that form intersections vs. those that don't. Best idea I've come across so far is "intersecting" and "dangling". Do you have other suggestions?

Example CSS Grid layout with gap decorations. Decoration ends that form intersections are circled and labeled "Intersecting?"; decoration ends that don't form intersections are circled and labeled "Dangling?".