This post is part of Intuitive+Learn, an exclusive series on That HTML Blog available with your Intuitive+ membership. Sign up here, or sign in to obtain your unlock key.
Design systematize: is that a phrase I made up? Perhaps so!
My thesis is a lot of folks these days “get” thinking in terms of design system components—at the “design system” level of course. You’ve got your buttons, your dialogs, your form inputs, and—of course—the humble card. All good stuff.
But what happens when you’re not working in your design system itself, but out in the “real world” where the shit hits the fan and you’re suddenly having to deal with all of the problems you didn’t think you’d have when you were working in the pure landscape of the system?
CSS has always acted as a blunt instrument where, sure, you can override a bunch of crap and brute force your way to an updated design solution quickly. But as we regularly end up learning the hard way, that quickly devolves into an unmaintainable spaghetti mess.
Modern CSS provides the ability to work with much more nuance, to think in a more modular and—dare I say—object-oriented fashion. You now have the ability to create component APIs which are blessed paths for downstream users of components to customize their appearance at the template or feature level.
In a past course for The Spicy Web, CSS Nouveau, I unpacked many of these concepts in an introductory fashion. In this tutorial, I now would like to zero in on a particular component tree, and consider a number of ways we might want to change the styles of these components without needing to brute force much at all (or mess around with the internals of the components).
Let’s get started!
Included in this tutorial when unlocked:
- A detailed explanation of several plausible “bespoke” styling contexts.
- Demos of standard card component and array of template-related variations.
- Working through the scenarios in a methodical manner and explaning the process along the way.
- Helpful guidance on appearing like a genius as new design requirements arise.
- You’re encouraged to ask follow-up questions in the Human Web Collective Discord.
🙏 I’m excited to offer this new series in conjunction with Intuitive+, and I hope you enjoy it!