Pattern Library



A Pattern Library is a collection of design elements that feature heavily throughout across a website, for example this will include: Navigation Bar, Social Media Features etc .

They are used for a point of reference for all the patterns so that everyone internally in a company can refer to it. This allows for a more cohesive working environment where teams can create in an efficient manner.

While pattern libraries are closely related to style guides, pattern libraries cater more towards front end developers, as they provide more UI elements. Whereas a style guide is generally used for a company’s branding. Hence why pattern libraries are becoming more prevalent.

Project Aim

The aim was to create a fully accessible and easy to use pattern library that was hosted on Github. The Github repository will feature a file that will display the content of the pattern library while there will be sub folders that house the HTML code for each of the six different


In order to get the pattern library done on time a methodology was created to keep on track of the work that was being done. Therefore, a mutation of the waterfall method was envisaged.

Waterfall Method

Referred to a linear-sequential life cycle model. The main aspect is that each section must be completed before the next phase is started. These are used for projects that are relatively small in size and have no consequences if not completed fully.

Waterfall Method

The advantages of using such model are as follows:

· Easy to use and understand

· Easy to manage and follow

· No overlapping of phases due to the build of the model

While the disadvantages are:

· Very difficult to go back after completing a phase

· Software won’t be created to late in the system

Created Method

Now for the created method the best aspects of the waterfall will be incorporated into it. The phases will be done in the order of hardest to easiest. Therefore, the first parts to be completed will be the design process of the pattern library and from then onwards testing the pattern library. Then being finished by writing the report.

This way of doing the method will eradicate the negative where the software or final output is done last, ensuring that the output is of a higher standard than what it would have been leaving it till last.

Time Spent

In order to keep up to date with what section should be done at any given time a Gantt chart was created to help with the balance of what section to do each day that the pattern library was worked on.

gantt chart


What is a pattern library for?

A patter library at its most simplest is the foundations of an interface broken down into reusable ‘Building Blocks’ where they are arranged and grouped while establishing the rules of each element .

For the majority of the pattern libraries, they are created for a number of reasons. Some of these being: using an agreed upon vocabulary. Which allows a clean and consistent creative process for all employees in a company, therefore, all by products of the business will be the same and follow all the rules set up from the pattern library that instantly offers an identity to the company.

The next being to provide guidance of the correct usage of patterns. This is important as it stop any anomalies when designing an app or website. As with the reason previous this is to just have a continuality of the elements on the different sites and sub sites. The final reason is to encourage the reuse of code. This would help tackle any errors on the coding sides of things. Ideally this would reduce redundancy in the coding environment allowing for a more efficient output of work.

Pattern Library or Style Guide?

As stated earlier in the background, a pattern library is a collection of design elements that feature heavily throughout across a website. Whereas Style guides offer you the chance to present your brand in a consistent way. They help to ensure that multiple authors use one tone. And they help save time and resources by providing an instant answer when questions arise about preferred style.

A style guide can often be used to understand the branding of a business which could be the logo or colour palletes used in the overall design of the company and most importantly given out to people who do not work in the company itself, for example contractors.

Whereas a pattern library cares about the everyday elements that are being used in websites like navigation bars and dropdown menus which style guides don’t really cater towards.


A framework is known as a standardized set of concepts, practices and criteria for dealing with problems, which in turn can be used as a reference to help approach and resolve new problems.

Therefore, a framework is essentially a pattern library but open source and available to everyone to use and implement. Using a framework instead of designing one from scratch has its benefits, the first being to save time. As the framework will give a basic outline of standardized code which can be altered to the developers choosing. It’s easier to add extra components, with the code already available there is no need hand write the code. The third and final reason to using a frameworks is knowing that the code is up to date and error free. This gives the developers piece of mind to be more creative without having to necessary worry about if the code is correct or not.


Bootstrap is the brainchild of the designer and developer of twitter, and is now one of the world’s leading front end frameworks and open source projects. It happens to come with the option of pre-processors like SASS and LESS, which can boost the average CSS capability by having the option of mixins and variables in a compiled CSS.

Bootstrap can be used to create a company’s pattern library, for example, the USPTO design use bootstrap as the main framework for the business. The main reason why company’s like USPTO use bootstrap as the main framework is that the majority of people will have heard of it and/or use it on a daily basis. This way there is no need to retrain people into learning a different front-end framework or possibly create a new one which will take time to learn and implement. It purely stems from a convenience stand point.


Foundation a by-product of Zurb which like Bootstrap offers semantic html with compiled CSS like SASS. Created to be the worlds most advanced responsive front-end framework in the world. Offering completely customisable html templates that the developer can use eliminates any errors that can happen when coding from scratch, which as previously mentioned is one of the biggest advantages when using a framework. This frame-work offers suitable documentation that can be useful when not being entirely sure how to implement a certain function or feature, and can always be something that can be referred to in the future, i.e. when updating the pattern library.

Semantic UI

Semantic UI labels itself as a modern front-end framework powered by LESS and JQUERY.

Its main point of it is to be a more user-friendly framework compared to the more traditional frameworks like Bootstrap and Foundation.

Pattern Library Example — Airbnb

While many pattern libraries have their designs on a webpage connected to their main website, Airbnb chose to host their pattern library on GitHub while putting all the code on the readme markdown. While this isn’t the flashiest way of presenting a pattern library due to not being able to incorporate CSS, it is the most simplest way. As time is saved in not making a webpage and it is incredibly easy to style the markdown document. This allows the company to focus more important matters at hand.

airbnb pattern library

Pattern Library Example — MailChimp

MailChimp have gone down the more traditional route of displaying their pattern library. The layout is perhaps the most user-friendly pattern library seen to date, as everything has a well thought out and easy to follow section. It really caters towards any new employees that have to use the pattern library.

mailchimp pattern library


In order for the pattern library to be a success the following objectives have been set which need to be implemented into the pattern library.

· Navigation Bar

· Header Element (in this case a slider was used)

· Jumbotron (in this case a callout was used)

· Footer incorporating social media

· Progress Bar

· Six button types

o Anchor button

o Action button

o Button groups

o Close button

o Split button

o Dropdown button

Test Plan

The pattern library is actually on the GitHub readme markdown file, the same as the Airbnb pattern library. Therefore, there is very little need to test the pattern library in a number of browsers. Thus, only desktop browsers will be used for testing purposes as Github itself is fully responsive, so out of good practice the browsers that are being tested in are Safari and Google Chrome.


As expected the pattern library performs perfectly normal and to a high standard.

safari testing

Google Chrome

The same as the safari test proved to be normal and seemed to be working at a high standard.

google chrome testing


To get a minimal understanding of what the pattern library was going to look like a low fidelity drawing was made to help with the design process at a later date.

Low Fidelity

The hand drawn wireframe displayed the main content that will be in the main pattern library. For example, the pattern library will display the header with a contents list that houses a link to the part of the library where that element is. Each element will have a brief description with an image of the final output that code given will look like. Underneath the image is the embedded code which the user can copy. After that the content is copied but for different elements and functions.

Low Fi wireframe

Medium Fidelity

The medium fidelity wireframe goes into a more detail about what is being put into the pattern library. As shown by the image below.

medium fidelity wireframe


To begin with the main idea for the pattern library was to create a website very similar to the MailChimp pattern library, however the online coding editor that was being used called Cloud9 was too unpredictable with how it would react and what would break during the coding process and with past experiences with Cloud9 losing code it became a wiser choice to sought a different option to create the pattern library.

Final Pattern Library

As the image below shows the pattern library was created on time and to an acceptable standard.

Final pattern library


In conclusion, the pattern library was a success as the main objectives have been completed. The pattern library features elements for the navigation bar, header element, the six button types, Jumbotron, footer and the progress bar.

All featuring the final output as a photo with a code snippet to allow users to experiment with the code. The images were sent to the github issues tab which at the time were the easiest and most convenient way to out images in the markdown file. The feedback that was given back gave an overall accepting feedback of the pattern library which can be seen by the feedback image below.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.