Designing and Coding for Patterns

About the Presentation

After building lots of libraries, I started to recognize what design treatments work well for modularizing, and which ones don’t. As a front end developer who primarily builds pattern libraries, I’ve also learned a lot about how to code patterns in a modular and scalable way.

This talk shares these design and development strategies for planning, growth, and adoption of pattern libraries.

This talk was originally scheduled to be presented at the OmniUpdate User Training Conference in March 2020, which was postponed due to the COVID-19 virus.


  • OUTC20 - Universal City, CA

Slide downloads for this talk will be uploaded soon.

Summary and Abstract

An atomic design pattern library could be the perfect way to get your sprawling site under control. How do you ensure your library is designed and coded in a way that best fits your organization’s needs? And how do you get people to actually use it? This talk covers strategies for visual designers and front end developers to build atomic design patterns for code flexibility, visual interest, and long-term growth.

Learning Objectives

  • Plan and code atomic design patterns in a flexible, extendable way
  • Create visual designs that translate easily into atomic design libraries
  • Develop functional pattern libraries that your team will actually use

Target Audience

  • Front end developers
  • Visual designers
  • Anyone who manages or contributes to a pattern library for their organization
  • Anyone who wants to create a pattern library.


  • Knowing what a pattern library/atomic design is (although I provide a quick overview).
  • Having built, attempted to build, or contributed to, or planning to build a front end pattern library (helpful, but not required).
  • Having designed components for a front end pattern library (helpful, but not required).