Two of my favourite things together at last: pattern libraries and service workers. Infusion is a tool for generating pattern libraries that also work offline.
Thinking about it, it makes total sense that a pattern library should be a progressive web app.
Alla looks at ways of documenting animations into a pattern library. I tell ya, her book is going to be unmissable!
Here’s Zach’s style guide. But the real reason I’m linking to this is his lovely description of having a personal website that grows over time:
As my own little corner of the web unceremoniously turned ten years old this year, it’s really starting to feel more like a garden than a piece of software. I certainly enjoy tending to it. I can plant what I like and with proper care it can grow into something useful.
A starter kit of CSS that gives you some basic styles that you can tweak with custom properties.
For when you don’t need the whole boot.
Also:
Shoelace doesn’t ship with a grid system because you don’t need one. You should use the CSS Grid Layout instead.
I approve this message!
Riffing on Rachel’s talk at Patterns Day:
At the Patterns Day conference last month, Rachel Andrew mentioned something interesting about patterns. She said that working with reusable interface components, where each one has its own page, made her realise that those work quite well as isolated test cases. I feel this also goes for some accessibility tests: there is a number of criteria where isolation aids testing.
Hidde specifically singles out these patterns:
Thanks to jQuery, you probably don’t need jQuery. Just look at all these methods that started life in jQuery, that are now part of the standardised DOM API:
remove()prepend()before()replaceWith()closest()Ah, the age-old question!
The Venn diagram here pretty much maps to how I think about these different terms, and how they relate to one another.
A nice little pattern library from Rachel and Drew for the Perch admin interface. Within folders, they’re using Brad’s atomic design nomenclature, and the whole thing is managed with Fractal.
Here’s the website for Alla’s forthcoming book. You can sign up to a low-volume mailing list to get notified of updates.
The World Wide Web was forged in the crucible of science. Tim Berners-Lee was working at CERN, the European Centre for Nuclear Research, a remarkable place where the pursuit of knowledge—rather than the pursuit of profit—is the driving force.
I often wonder whether the web as we know it—an open, decentralised system—could’ve been born anywhere else. These days it’s easy to focus on the success stories of the web in the worlds of commerce and social networking, but I still find there’s something that really “clicks” with the web and the science (Zooniverse being a classic example).
At Clearleft we’ve been lucky enough to work on science-driven projects like the Wellcome Library and the Wellcome Trust. It’s incredibly rewarding to work on projects where the bottom line is measured in knowledge-sharing rather than moolah. So when we were approached by eLife to help them with an upcoming redesign, we jumped at the chance.
We usually help organisations through our expertise in user-centred design, but in this case the design and UX were already in hand. The challenge was in the implementation. The team at eLife knew that they wanted a modular pattern library to keep their front-end components documented and easily reusable. Given Clearleft’s extensive experience with building pattern libraries, this was a match made in heaven (or whatever the scientific non-theistic equivalent of heaven is).
A group of us travelled up from Brighton to Cambridge to kick things off with a workshop. Before diving into code, it was important to set out the aims for the redesign, and figure out how a pattern library could best support those aims.
Right away, I was struck by the great working relationship between design and front-end development within eLife—there was a great collaborative spirit to the endeavour.
Some goals for the redesign soon emerged:
That led to some design principles:
Those design principles then informed the front-end development process. Together we came up with a priority of concerns:
It’s interesting that maintainability was such a high priority that it superseded even performance, but we also proposed a hypothesis at the same time:
Maintainability doesn’t negatively impact performance.
The combination of the design principles and priorities led us to formulate approaches that could be used throughout the project:
Then we dived into the tech stack: build tools, version control approaches, and naming methodologies. BEM was the winner there.
None of those decisions were set in stone, but they really helped to build a solid foundation for the work ahead. Graham camped out in Cambridge for a while, embedding himself in the team there as they began the process of identifying, naming, and building the components.
The work continued after Clearleft’s involvement wrapped up, and I’m happy to say that it all paid off. The new eLife site has just gone live. It’s looking—and performing—beautifully.
What a great combination: the best of the web and the best of science!
eLife is a non-profit organisation inspired by research funders and led by scientists. Our mission is to help scientists accelerate discovery by operating a platform for research communication that encourages and recognises the most responsible behaviours in science.
The really nicely documented design system for Lost My Name.
They’ve also written up the process of creating the design system which includes a refreshingly honest account of missteps made along the way—very valuable!
If you want to understand the thinking behind this style guide guide, be sure to read Brad’s style guide guide guide.
A smart approach to creating patterns as symbols in Sketch. Sounds like diligence and vigilance is required to make it work, but then, that’s true of any pattern library.
Another instance of Fractal in the wild, this time for the Federalist design system.
Why Fractal?
- It’s open source.
- It’s easy to use.
- It generates standalone HTML previews of each component.
- It uses or supports many of the technologies we use already.
- Fractal offers a customizable theme engine.
Design-system builders should resist the lure of the new. Don’t confuse design-system work with a rebrand or a tech-stack overhaul. The system’s design patterns should be familiar, even boring.
The job is not to invent, but to curate.
Interesting thoughts from Josh on large-scale design systems and how they should prioritise the mundane but oft-used patterns.
When the design system is boring, it frees designers and developers to do the new stuff, to solve new problems. The design system carries the burden of the boring, so that designers and developers don’t have to.
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.
That library was a Pandorica of fabulous, interwoven randomness, as rich as plum cake. Push a seed of curiosity in between any two books and it would grow, overnight, into a rainforest hot with monkeys and jaguars and blowpipes and clouds. The room was full, and my head was full. What a magical system to place around a penniless girl.
A great new site from Heydon:
A blog trying to be a pattern library. Each post explores the design of a robust, accessible interface component.
The first component is a deep dive into toggle buttons.
Danielle and Mark have been working flat out on Fractal. Here’s the roadmap they’re working to.
The latest excellent missive from The History Of The Web—A Brief History of Hypertext—leads back to this great article by Alex Wright on Paul Otlet’s Mundaneum.