What is a Pattern Library?

You have to keep the look and feel of all of your business’s branded web assets consistent with one another.  It is wise to create a document that defines how this branding will continue to stabilize as your business offering change and as your staff (i.e. your graphic designer) turn over.

Related to this need, you might have heard of a “style guide.”  Even in literary fields there are guides such as the MLA Handbook or the Chicago Manual of Style.  There is something analogous to this in the web design world called a style guide, examples of which you can find on this post from Canva.

So What’s a Pattern Library?

A pattern library is like a style guide, but instead of it defining the elements which are outwardly facing, a pattern library is a repository of the way code should be written with consistency.  A couple of pattern libraries I like (oddly enough called Style Guides) have been created by AirBnB.  They describe, respectfully, how their programmers should write CSS and Javascript.  They are both available on GitHub at:



A pattern library is great because it allows developers working with you to reuse code without having to slow down to make these types of decisions all on their own. MailChimp has theirs, a much more visually useful pattern library here:


Very nice.

If you are serious about UX, you will want to start collecting all of your code snippets, primarily from those pieces of your web assets that are the cleanest and most compatible with the other development tools you are using.  Start organizing them, and create a living document that might change over time but at least will keep you on track as your business grows.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • CSS Styling the Audio Element

    There are a few things you can do with CSS to style the HTML audio element in various browsers.

  • How to Get WP RSS Aggregator Feed to Validate

    I’m using the plugin WP RSS Aggregator, and I couldn’t get the custom feed to validate in other places. The validator said that it was missing an <author> field. If an item doesn’t have an author, then the feed doesn’t even supply an empty one. The way to fix it is to go to wp-content/plugins/wp-rss-aggregator/templates/custom-feed/entry.twig ... Read more

  • How to Remove Rank Math Top Banner

    Rank Math has added an ugly top banner to the sites using its plugin. Here's how to hide it.

  • Fix for High CPU Usage on Siteground

    The MailPoet cron job on my website was triggered by Google Bot and caused my CPU seconds on Siteground to go over the quota. Here's how I fixed it.

  • Fast MIDI Song Starter

    Here is a really easy way to build MIDI chord progressions using iRealPro.

  • What is Full Kontakt Required?

    Perhaps you don't know what Kontakt is or how it works. Hopefully we can sort these things out and get you on your way to making some music.

  • How To Style a Range Input Slider

    If you are going to build a custom html audio player, you will need to know how to style a range input slider.

  • How to Build a HTML Audio Player with Vanilla JS (Part 2)

    Here is another tutorial on how to build a custom html audio player with vanilla js.

  • Coding a Custom HTML Audio Player (Part 1)

    Here is a starter tutorial on how to create a custom HTML audio player with HTML and JavaScript.