A newsletter dedicated to all things related to design systems, style guides, and pattern libraries.
Susan describes the process behind creating Bocoup’s style guide…
Here’s a fun game to help practice those CSS selectors.
A wonderful deep dive into the history of styling languages before CSS. I love spelunking down these internet history potholes—fascinating stuff!
Ensure that your class names never go out of sync with your style declarations with this one simple trick:
Take any CSS rule you want to apply, replace : by -, and dots by -dot-, and you get the name of the corresponding universal css classname.
The only thing missing is immutability, so I would suggest also putting
!important after each declaration in the CSS. Voila! No more specificity battles.
As well as compèring the event, Chris took the time to make notes at the Clarity conference, dedicated to all things patterny.
You know that front-end pattern libraries have hit the mainstream when the Nielsen Norman Group get in on the action.
As ever, I’m not sure their sweeping generalisations can be applied to every project, but their checklist approach makes for a good starting point.
Enduring CSS (not int the sense of “put up with” but in the sense of “long-lasting”) is a new book by Ben Frain all about writing and maintaining modular reusable CSS.
You can read the whole thing for free online or buy an eBook.
Jon outlines his technique for keeping “the 30,000 foot” view when patterns are coalescing during a project.
See also: Andy P.’s experience of working with Jon this way.
A pattern library of Walmart’s front-end code.
Linting CSS seems like a very good idea, especially if you’re not the only one writing the CSS. This guide is going to come in very handy when I give it a try.
We tend to use a variant of BEM in our CSS at Clearleft. Glad to see that when we’ve hit these issues, we’ve taken the same approach.
A nicely documented pattern library.
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.
A nice combination of style guide and pattern library, with plenty of documentation.
An old-school styleguide.
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.
Huge have released their tool for generating front-end style guides.
A really nicely-documented pattern library.
I had a lot of fun chatting with Brad and Anna for the final episode of their small batch podcast on style guides and pattern libraries.
Here’s a really nifty use of the
:checked behaviour pattern that Charlotte has been writing about—an interface for choosing a note from a piano keyboard. Under the hood, it’s a series of radio buttons and labels.
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).
Slides of really great practical advice on writing clearly.
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.
A handy starting point for creating a front-end styleguide: a single document of HTML elements.
A very handy collection from Anna: articles, books, talks, podcasts, and examples of front-end style guides. If something’s missing, feel free to add it.
A self-describing list of cursors available through CSS.
This was a fun podcast—myself and Cyd from Code For America talk to Karen and Ethan about how we worked together. Good times.
The audio is available for your huffduffing pleasure.
Wonderfully creative use of CSS gradients, borders, box-shadows, and generated content.
I very much agree with Orde’s framing here: I don’t think it makes much sense to talk about “above the fold” CSS …but it makes a lot of sense to talk about critical CSS.
And, yeah, it’s another example of progressive enhancement.
Remember when I was talking about refactoring the markup for Code for America? Well, it turns out that Heydon Pickering is way ahead of me.
He talks about the viewpoint of a writer (named Victoria) who wants to be able to write in Markdown, or HTML, or a textarea, without having to add classes to everything. That’s going to mean more complex CSS, but it turns out that you can do a lot of complex things in CSS without using class selectors.
There are slides.
The challenges of maintaining a living breathing front-end style guide for an always-evolving product (the Lonely Planet website in this case).
Greg isn’t just lamenting a perceived “sameness” in web design here. He’s taking a long-zoom view and pointing out that there’s always a sameness …and you can choose to go along with it or you can choose to differentiate.
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.
A useful text editor that analyses your writing for excess verbiage and sloppy construction. It helps you process your words, as it were.
A reusable set of responsive patterns and templates for UK councils.
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.
Some great thoughts in here about web development workflow and communication between designers and developers.
I believe that the solution is made up of a variety of tools that encourage conversation and improve our shared lexicon. Tools such as styleguides, pattern libraries, elemental and modular systems that encourage access not only by developers, but by designers, shareholders and editors as well.
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!
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.
Maciej’s talk from this year’s XOXO—excellent stuff!
A very handy starting point for creating a front-end style guide.
A terrific quiz about browser performance from Jake. I had the pleasure of watching him present this in a bar in Amsterdam—he was like a circus carny hoodwinking the assembled geeks.
I guarantee you won’t get all of this right, and that’s a good thing: you’ll learn something. If you do get them all right, either you are Jake or you are very, very sad.
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.
This is handy: a look at which DOM properties and methods cause layout thrashing (reflows).
This is a well-reasoned, thoughtful article on avoiding class names in CSS …but I don’t agree with it. That said, perhaps there’s a reasonable middle ground to be found between this extreme stance and the opposite (but in some ways just as extreme) stance of OOCSS.
Single-direction margin declarations — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts
Some smart thinking from Harry Roberts on standardising the direction of your margins in CSS i.e. all top-margin or all bottom-margin declarations.
Some sensible ideas about having a consistent CSS writing style.
Paul has open-sourced his front-end style guide and put it up on Github. It’s a very handy starting point for making your own.
Samantha does an excellent job of explaining how useful style tiles can be for visual design and iteration.
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.
Samantha put together this handy one-page site to explain Style Tiles as part of her South by Southwest presentation.
An excellent piece by Stephanie on how to approach print stylesheets. I’ve always maintained that Print First can be as valid as Mobile First in getting you to focus on what content really matters.
Some thoughts on structuring your CSS for responsive designs.
David gives a quick rundown of some of the selectors we can expect to see in CSS4.
This presentation from Lea contains some CSS gems (and it’s all delivered in HTML).
Samantha gives the rundown of a hands-on use of Style Tiles.
Bootstrap is Twitter’s CSS and markup style guide—very similar to the pattern portfolios that we often provide as deliverables at Clearleft.
Use strong, definite language in your writing. Make that sentence your bitch.
A handy little GUI for generating CSS declarations for shadows, gradients, opacity and border radius.
An excellent design technique from Samantha that allows you to nail down a visual vocabulary without using something as wishy-washy as a mood board or as rigid as a fully-blown comp. Brilliant!
The style tile is not a literal translation of what the website is going to be, but a starting point for the designer and the client to have a conversation and establish a common visual language.
Paul has created a site for tracking usage of the BBC’s GEL (Global Experience Language) visual design language. Nice’n’responsive it is too.
Paul gives an excellent and thorough explanation of why systems thinking is important in web design.
Mozilla aims to plug the :visited/getComputedStyle bug/feature.
This is an interesting idea: paste in some markup and this will automatically generate CSS selectors based on your classes and IDs.
A CSS gallery with a difference. This one highlights sites with good print stylesheets.
Scroll to the bottom to see a nice robots-into-zomies effect.
A really nice stylesheet for sitemaps represented as nested unordered lists in HTML.
Typographically thoughtful themes for NetNewsWIre. Even if you don't use the RSS reader, check out the gorgeous design of this site.
Kai has written a handy little CSS diagnostic script to help you identify problems with your markup.
Stuart has an interesting take on ARAI attributes. Why can't they be set declaratively in an external file in the same way as we set styles?
This article is an oldie but a goodie. I find myself referring to it all the time: "Beating typographic correctness out of (X)HTML: more than you ever wanted to know about dashes, spaces, curly quotes, and other vagaries of online typography."
Jon's helvetican theme for Google Reader.
Rachel and Kevin's new book looks very interesting indeed. It is about just one thing: CSS tables.
A handy little tool that's beautifully designed. View typeface/style/size combinations and then grab the CSS.
A wonderfully informative and useful look at paragraphs styles ...in history and in CSS.
About freakin' time! The FONT element, whose presence until now in HTML5 was an utter embarrassment to all concerned, is finally gone. Thanks, Hixie.
The Economist style guide: the "dos and don'ts" section is particularly useful.
Jina has put together an excellent series of steps you can take to keep not just nice, but downright sexy.