389 private links
Following https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/
More thoughts about utility classes (only utilities and not a core use anymore), :has(),
What fascinated me most was watching the architecture evolve across releases.
Campfire: OKLCH colors, Custom properties for everything, character-based spacing, flat file oranization, View Transitions API
Writebook (2nd): COntainer queries for component-level responsiveness, @starting-style for entrance animations
Fizzy (3rd release): CSS Layers, color-mix() and complex :has() to replace JS.
37Signals share their product codes in Open Source. That's awesome because we can learn from it:
/* Fizzy's layer architecture */
@layer reset, base, components, modules, utilities;
@layer components {
.btn { /* Always lower specificity than utilities */ }
}
@layer utilities {
.hide { /* Always wins over components */ }
}
A CSS only spinner under 30 lines of CSS code. "Pure creativity".
A better <mark> that draws a hand-drawn circle around matched terms.
They also created dialog animations in CSS only.