Part one of a deep dive by Nathan into structuring design system documentation, published on Ev’s blog.
It’s really heartwarming to see this idea resonating.
There’s something quite Bridlesque about these lovely books that Brendan is generating from git commits.
Great advice on writing sensible comments in your code.
Alla looks at ways of documenting animations into a pattern library. I tell ya, her book is going to be unmissable!
Once again, we can learn from Christoper Alexander’s A Pattern Language when it comes to create digital design systems, especially this part (which reminds me of one of the panes you can view in Fractal’s default interface):
- Each pattern’s documentation is preceded with a list of other patterns that employ the upcoming pattern
- Each pattern’s documentation is followed by a list of other patterns that are required for this pattern
A nicely-documented styleguide from Atlassian. It’s not a component library, though—there’s no code here.
An in-depth look at the current Shadow DOM spec. It’s well-written but I don’t think this will really click with me until I start playing around with it for myself.
It’s good to see that the examples have some thought given to fallback content.
There’s also a corresponding tutorial on custom elements
I think Tyler’s onto something here:
I noticed three qualities that recurred in different combinations. Without at least two, the projects seemed doomed to failure.
I certainly think there’s a difference in how you approach a pattern library intended as a deliverable (something we do a lot of at Clearleft) compared to building a pattern library for an ongoing ever-evolving product.
If you don’t comment your CSS, you’ll confuse other people looking at your code, and, more embarrassingly, you’ll confuse future you. If you do comment CSS, everybody will be less confused, and things will be accidentally broken less often. You will be popular and generally well-liked, and people will remember to send you cards on your birthday. Comment more.
Some good advice here on how to write better comments in CSS.
A pattern library of Walmart’s front-end code.
A nicely documented pattern library.
A nice combination of style guide and pattern library, with plenty of documentation.