O'Reilly logo

Responsive Web Design Patterns by Chelsea Myers

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Building a home for your patterns

Simply put, a pattern library is a home for your patterns. It acts as a point of reference for designers and developers to view the pieces that make up a design system. A good pattern library illustrates how to implement the patterns making up a website. In a responsive pattern library, every pattern should be accompanied with:

  • An example: The actual pattern embedded, showing off its design and functionality on small to large screens
  • The code: How the patterns can be implemented (that is, what is the HTML and CSS? Is JavaScript needed?)
  • The usage: When and where should the pattern be used (that is, what templates can it appear on? Where can it not appear?)

For example, if I were adding Disney's video gallery module ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required