A newsletter dedicated to all things related to design systems, style guides, and pattern libraries.
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.
Susan describes the process behind creating Bocoup’s style guide…
One more tool for making pattern libraries. This one looks fairly simple and straightforward.
A new pattern library tool, this time from the smart people at Cloud Four. It’s called Drizzle and it started life as a fork of Fabricator.
Here’s a handy directory of scripts that set out to solve one problem without any dependencies. Useful for poking at, picking apart, and learning from.
There’s a lot I disagree with here. I don’t think this pattern library process is very elegant or scalable, and it certainly wouldn’t work for me.
But I’m still linking to it. Why? Because I think it’s absolutely wonderful that people share their processes like this. It doesn’t matter one whit whether or not it would work for me.
Frontend development may have gotten a lot more complicated, but the simple premise of sharing what you’ve learned hasn’t.
I couldn’t agree more!
Rachel and Drew have been beta-testing Mark’s Fractal project for organising a library of components for Perch’s interface. Sounds like it’s working out very, very well indeed!
A profile of the Internet Archive, but this time focusing on its physical space.
The Archive is a third place unlike any other.
A pattern library of Walmart’s front-end code.
A nicely documented pattern library.
Brad follows up with his thoughts on Dan’s article, emphasising the importance of a developer’s role in not just slavishly recreating what’s in a static comp, but seeing through to the underlying pattern beneath:
It’s so incredibly crucial to treat development as a key part of the design process.
A really terrific article from Dan on building pattern libraries. In summary:
- Naming things is hard,
- Separation of content and presentation is A Good Thing.
There are some really good insights here into getting just the right level of abstraction for a component—not too tightly tied to a specific visual display, but also not too tightly tied to a specific kind of content type:
When thinking about patterns, content strategists are primarily thinking about Content patterns, designers are primarily thinking about Display patterns, and front-end developers are responsible for bringing the two together.
(And it’s great to see Charlotte’s excellent article get a shout-out in the “Related reading” section at the end,)
The new style guide and pattern library for Buzzfeed.
It all looks pretty reasonable on the surface but if you poke around in the CSS, you’ll find 1157 uses of
The whole point of having an agreed-upon codebase in a pattern library is so that developers need never reach for nuclear options like
!important, so I’m afraid, for me, this is a demonstration of what not to do (in terms of CSS—the output of the HTML in the styleguide looks perfectly fine).
Solid uses immutable, atomic CSS classes…
CSS is “mutable”. By design. I don’t think we should be working against that.
A tool for generating a pattern library from Markdown comments in CSS. This isn’t the way that I tend to work, but I can see how it would be quite handy.
The comprehensive style guide and pattern library for North Carolina.
I really like the way that you can literally flip between the source code and the output in this styleguide for The Toast.
John expands on just one part of his superbly dense and entertaining dConstruct talk.
A nice combination of style guide and pattern library, with plenty of documentation.
Alla has taken the ideas she presented in her superb talk at Responsive Day Out and published them as a great article in A List Apart.
This is simply wondrous! A microcosm of Borges’s story made real on the world wide web.
We do not simply generate and store books as they are requested — in fact, the storage demands would make that impossible. Every possible permutation of letters is accessible at this very moment in one of the library’s books, only awaiting its discovery.
Huge have released their tool for generating front-end style guides.
From the people who brought you youmightnotneedjquery.com comes youmightnotneedjqueryplugins.com.
Don’t get me wrong—jQuery is great (some of the plugins less so) but the decision about whether to use it or not on any particular project should be an informed decision made on a case-by-case basis …not just because that’s the way things have always been done.
These sites help to inform that decision.
A really nicely-documented pattern library.
Here’s a lovely project with an eye on the Long Now. Trees that were planted last year will be used to make paper to print an anthology in 2114.
Margaret Atwood is one of the contributors.
This is a fascinating bit of web archeology: John has annotated the code from one of the earliest versions of jQuery.
Hot on the heels of Github’s pattern library, here’s Heroku’s.
Github’s pattern library.
As always, it’s great to see how other organisations are tackling modular reusable front-end code (though I can’t imagine why anyone other than Github would ever want to use it in production).
I really like the self-examination that Ian and his team at Lonely Planet are doing here. Instead of creating a framework for creating a living style guide and calling it done, they’re constantly looking at what could be done better, and revisiting earlier decisions.
I’m intrigued by the way they’ve decided to reorganise their files by component rather than by filetype.
Brad’s writing a book.
Insert take-my-money.gif here.
Literally a library of patterns: y’know, for tiling background images. Old school!
A great article by Susan on getting started with creating a styleguide for any project.
I’ve seen firsthand how style guides save development time, make communication regarding your front end smoother, and keep both code and design consistent throughout the site.
Mike writes about what it was like being a client for a change. After working with him on the Code for America project, I can personally vouch for him as a dream client:
Clearleft’s pattern deliverables are the special-special that made the final work so strong. Jon Aizlewood’s introduction to the concept convinced me to contact Clearleft. Jeremy Keith’s interest in design systems kicked off the process, and Anna Debenham’s fucking rock star delivery brought it all home.
A great post from Anna on the front-end styleguides she’s worked on for A List Apart and Code for America. ‘Twas a pleasure working with her on the Code for America project.
A-mer-ica! Fuck yeah!
Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!
This is a wonderful addition to the already-wonderful Flickr Commons: over one million pictures from the British Library, available with liberal licensing.
Y’know, I’m worried about what will happen to my own photos when Flickr inevitably goes down the tubes (there are still some good people there fighting the good fight, but they’re in the minority and they’re battling against the douchiest of Silicon Valley managerial types who have been brought in to increase “engagement” by stripping away everything that makes Flickr special) …but what really worries me is what’s going to happen to Flickr Commons. It’s an unbelievably important and valuable resource.
Hot on the heels of the Mailchimp styleguide, here’s the collection of patterns used by Mapbox. I’m not keen on some of their markup choices, but again, it’s great to see organisations publicly documenting this stuff.
The markup for the patterns that Mailchimp use on their products. I love getting a glimpse of how companies handle this kind of stuff internally.
A profile in The Guardian of the Internet Archive and my hero, Brewster Kahle (who also pops up in the comments).
Jon gives some insight into how and why we use pattern portfolios as deliverables at Clearleft.
Here are some nice patterns that Paul uses for starting points in his own projects.
Anna goes through some of her favourite pattern libraries. It’s really, really great to see this stuff getting documented.
I met one of the guys from the Starbucks team at South by Southwest and he mentioned that they had a markup pattern library. I encouraged them to make it public, and it here it is!
I really hope that more companies and agencies will start sharing stuff like this.
A great pattern library from Dan.
There’s a whole series of sci-fi related events going on at the British Library.
You can now borrow HTML5 For Web Designers through the Open Library. Nice one, George!
One web page for every book. I love this project.
A framework for creating old-school arcade games in the browser, using HTML5.
A pattern library that considers colour blindness.
This looks like a nice book reading app.
The perfect person for the job—George will be working on the Internet Archive's Open Library project: a webpage for every book ever published.
The blog of the preservation officer at the University of California.
A handy cheat sheet of jQuery methods to print out and keep on hand.
Here's a fantastic collaboration with the Library of Congress. We are being asked to collectively tag historic pictures with no known copyright restrictions. Wonderful idea! Are you watching, British Library?
From the people who brought you jQuery comes a set of widgets built using jQuery complete with documentation and tutorials.
YUI Version 2.2.0 Released: Browser History Manager, DataTable, and Button Components, New Versioning, and More » Yahoo! User Interface Blog
Roll up and get it: hot off the presses; the new version of the Yahoo User Interface library. Happy birthday, YUI.
The Spry framework from Adobe looks like it could be worth further investigation. I certainly like the underlying philosophy: lightweight, standards-based, and declarative.