CategoryPattern Libraries

May 28, 2019 — A successful design system needs to become part of an organization’s DNA that help your team produce more consistent user experiences, and it also builds bridges between design and development, and help you improve your design process without exposing your orgchart. In this article, Nick Babich will talk about things you can do to set up your organization for long-term success with your design system. Read more…

July 9, 2018 — CSS can be hard to manage across a project, especially when you need to include media queries for various breakpoints and fallbacks for older browsers. In this article, we will take a look at using Fractal to manage components which use CSS Grid. Rachel Andrew is going to describe a method of working that she’s adopted over the past two years that helps her to manage CSS across her projects. Read more…

October 10, 2017 — What are the key qualities of a well-functioning, enduring design system? Throughout the book, Alla will share an approach that will help you every day with your work. Read more…

October 9, 2017 — We’ve been closely working with Maya on this article, and we’re happy to see the final result now being published on 18F. We highly encourage more teams to share the lessons they learned when building design systems or pattern libraries, and we’re always happy to support them in writing, editing and shaping that article. This post is a re-post of Maya’s final article. In this article, Maya will shed some light on how to built tools to leverage industry-standard best practices and produce a design system with reusable components. Read more…

July 11, 2017 — Some people hate writing documentation, and others just hate writing. I happen to love writing; otherwise, you wouldn’t be reading this. It helps that I love writing because, as a design consultant offering professional guidance, writing is a big part of what I do. But I hate, hate, hate word processors. When writing technical web documentation (read: pattern libraries), word processors are not just disobedient, but inappropriate. Ideally, I want a mode of writing that allows me to include the components I’m documenting inline, and this isn’t possible unless the documentation itself is made of HTML, CSS and JavaScript. In this article, I’ll be sharing a method for easily including code demos in Markdown, with the help of shortcodes and shadow DOM encapsulation. Read more…

December 6, 2016 — In this chapter, Brad Frost will tackle all that goes into selling, creating, and maintaining effective design systems. What begins as a giant slab of rock can turn into a finely polished sculpture, thanks to a ton of hard work, genuine collaboration, constant communication, and plenty of iteration. If you like what you read, we’ve got you covered! The print version of Smashing Book 5 (including the eBook) bundled with the Atomic Design eBook is available today for just $29 — down from $49. Get the bundle now. You ready? Let’s go. Read more…

October 13, 2016 — When building a pattern library, we tend to focus too much on the modules, providing a structural view of the system, rather than showing how it can be used effectively — thereby undermining its usefulness to most team members. Finding the right way to architect a lasting pattern library is difficult. This article highlights some practical techniques and strategies to establish a pattern library that will be actively and consistently used by the entire team. Read more…

July 13, 2016 — The benefits of UI design systems are now well known. They lead to more cohesive, consistent user experiences. They speed up your team’s workflow, allowing you to launch more stuff while saving huge amounts of time and money in the process. They establish a common vocabulary between disciplines, resulting in a more collaborative and constructive workflow. They make browser, device, performance, and accessibility testing easier. And they serve as a solid foundation to build upon over time, helping your organization to more easily adapt to the ever-shifting web landscape. This article provides a detailed guide to building and maintaining atomic design systems with Pattern Lab 2. Read more…

March 5, 2015 — In this article, Varya Stepanova & Juuso Backman will talk about style guides that are generated directly from the style definition sources — i.e. CSS and its modern variants. Style guides are useful in many aspects of development and maintenance, so it’s little wonder that developing them has become a highly popular practice. But even with the clear benefits, taking the necessary steps to start using them is easier said than done, as quite often the challenge is cultural, requiring changes in people’s mindsets. We encourage everyone to try it! Read more…