If we describe patterns also in terms of content, context, and contrast, we are able to define more precisely what a specific pattern is all about, what its role within a design system is, and how it is defined and shaped by its environment.
A nice rundown of some of the fun you can have with viewport units.
Dan describes his approach to maintainable CSS. It’s a nice balance between semantic naming and reusable styles.
Warning: the analogies used here might make you very, very hungry.
Surprisingly, it helps clients understand the HTML content prototype better. They now clearly see the difference and the relationship between content and design. In general it helps me explain the content-first process better and it helps them make more sense of it.
Harry clearly outlines the performance problems of Base64 encoding images in stylesheets. He’s got a follow-up post with sample data.
A comparison of a few different tools for generating pattern libraries.
In this particular case, Fractal comes out on top:
It has the features we need, and I’m happier than I should be with how simple the directory and file structure is. The documentation has also been super helpful thus far. We’ve customized it with our client’s branding and are ready to roll.
Having spent half a decade encouraging people to make their pattern libraries public and doing my best to encourage openness and sharing, I find this kind of styleguide-shaming quite disheartening:
These all offer something different but more often than not they have something in common. They look ugly enough to have been designed by someone who enjoys configuring a router.
If a pattern library is intended to inspire, then make it inspiring. But if it’s intended to be an ever-changing codebase (made for and by the kind of people who enjoy configuring a router), then that’s where the effort and time should be concentrated.
But before designing anything—whether it’s a website or a pattern library—figure out who the audience is first.
Anna has just published a lovely new version of her excellent little book on pattern libraries. EPUB, MOBI, and PDF versions are yours for a mere $8.
The styleguide, design principles, and pattern library for British Airways. It’s the “global experience language” for BA …so it’s called BAgel.
CSS Shorthand Syntax Considered an Anti-Pattern – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
Sensible advice from Harry—only style what you mean to style.
This quick dip into Fractal was in last month’s Net magazine.
It’s very gratifying to see how much Fractal is resonating with people—Mark has put so much hard work into it.
This is a very thoughtful analysis of different approaches to writing maintainable CSS, which—let’s face it—is the hard bit.
I often joke that I don’t want to hire a code ninja. Ninjas come in the middle of the night and leave a bloody mess.
I want a code janitor. Someone who walks the hallways of code, cleaning up pieces, dusting up neglected parts, shinning up others, tossing unnecessary bits. I prefer this gentler, more accurate analogy. This is the person you want on your team. This is a person you want in your code reviews.
Also, can I just say how refreshing it is to read an article that doesn’t treat the cascade like a disease to be wiped out? This article even goes so far as to suggest that the cascade might actually be a feature—shock! horror!
The cascade can help, if you understand and organize it. This is the same as any sophisticated software design. You can look at what you’re building and make responsible decisions on your build and design. You decide what can be at a top-level and needs to be inherited by other, smaller, pieces.
There’s a lot of really good stuff in here to mull over.
My hope for this article is to encourage developers to think ahead. We’re all in this together, and the best we can do is learn from one another.
A nicely-documented styleguide from Atlassian. It’s not a component library, though—there’s no code here.
Alla looks at a few different ways of organising the contents of a pattern library, based on her experience with the FutureLearn team.
Here’s an epic brain dump by Vitaly on the challenges of putting together a pattern library and then maintaining it.
Sacrificing consistency for usability is fine. A slightly open-ended, inconsistent but heavily used pattern library is better than a perfectly consistent pattern library that is never used.
This slide deck is a whistle-stop tour of all things styleguide and pattern-library related. Nice to see Charlotte’s excellent exercise get a shout-out.
Another style guide generator that parses comments in CSS.