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

Your pattern library is not done yet!

We have gone over a lot so far in this book. Our job is not over yet. There are still other website elements we need to consider and include in our pattern library. Responsive pattern libraries are pretty much like style guides, but with responsive patterns included. Your RPL needs to include all the elements a regular style guide would include as well.

Colors

Your RPL should include swatches of the website's colors and their color value (hexadecimal, RGB, HSL, and so on). If you are using a CSS preprocesser, such as LESS or Sass, include the color's variable name as well. It is also important to know when and how to use these colors and which colors should never be paired.

Example: Google style guide (https://developers.google.com/web/fundamentals/resources/styleguide/index ...

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