Pattern Library

By Robert Evans

Southampton Solent University

Link to Pattern Library: https://revans72.github.io/Pattern-Library/

Link to Medium Report: https://medium.com/@robme772/pattern-library-854b32680dd7

Introduction

Pattern libraries are a collection of user interface elements showcasing elements styled in a certain way. They are mainly used as style guides for sites showcasing how elements look on their site.

However different sites showcase pattern library's in different ways so it would be a good idea to create a pattern library and look into what is the best way to showcase a pattern library. The main aim is to find out what is the best way to create a pattern library.

Research

To know the best way to create a pattern library you must know what a pattern library is. “A pattern library is a collection of user interface design patterns. It showcases a number of web elements that me be styled in a certain way. This could be for a specific brand or just as a baseline style to showcase elements.

Bristol city pattern library http://style.bristol.gov.uk

Most of the elements on a pattern libary include buttons, colour palettes, forms and navigaion bars

Button example http://style.bristol.gov.uk/patterns/buttons/
Colour pallettes http://style.bristol.gov.uk/patterns/colours/
Form element http://style.bristol.gov.uk/patterns/forms/
Navigation example http://style.bristol.gov.uk/patterns/navigation/

Pattern libaries are a good way to showcase how a site is styled and how each element looks in contrast. Where some pattern libaries are for a particular brand some just showcase web elements with minimal styling.

The Buffer Style Guide https://buffer.com/style-guide

Some compaines and groups just create basic pattern libaries that showcase what you can do with basic web element telling us that having minial styling can also be quite effective.

The most common way a pattern libary is creating a site or a page on a site that showcases a pattern libary.

CodePens Pattern Libary page on their main site: http://codepen.io/guide/

This is one of the most common ways a pattern libary is presented. Most uses their own in house created branding and styling as it helps give customers an idea of who they are. Having a pattern libary on your own site shows the thought and ideas around how and why the site looks like it does. As well as their are other reasons why sites have their own pattern libaries.

“The library has helped us to organize all of the essential elements of our website redesign into one central repository where related groups can pull information that is crucial to their work.”

Compines uses them as a reference point for all their future work on the site. If they need to make a new page or a product that’s web based they can refer back to their pattern library as a guide to how elements on the site should look.

Another benefit of presenting a pattern library like is it helps keeps it organised and and elements can be stored into section. This allows easy navigation in the library so it someone is looking for a particular element they can easily navigate to it.

Barricade style guide navigation https://styleguide.barricade.io/styles.html#icons

Makes a pattern library easy to view and look through since each section is labeled. Choosing to create a pattern library like this give it a professional feel and shows that the library has been designed and applied well. The main issue which creating a pattern library is this format it that it can take a lot of time because your essentially creating a webpage.

“Most web projects should allow for 12 to 16 weeks from the time that the project kicks off”

Granted it may not take as long as a full site but it can still take time to create a pattern library this way.

Another way a pattern library could be created is using GitHub to show a pattern library.

“From open source to business, you can host and review code, manage projects, and build software alongside millions of other developers.”

GitHub is a website that allows users to create repositories containing various files that the author or other collaborators can edit. It main used is for software development from websites to applications. GitHub can also be used to showcase pattern libraries .

Airbnb pattern library https://github.com/airbnb/javascript

Airbnb uses GitHub to showcase their JavaScript style guide. They give a list of what the style guide contains and then for each section gives a function along with code samples for each function.

Airbnb code example https://github.com/airbnb/javascript

Its a very simple type of pattern libary as most of the styling is coming from Github. It would be quite easy to build a pattern library this way because its one long readme file but it does require some syntax to apply certain elements.

Headings on Github readme’s https://help.github.com/articles/basic-writing-and-formatting-syntax/

This type of pattern library is quite effective but it’s not best suited showing HTML elements because Github can only display certain HTML elements which might affect the library. It would mean that you could not display certain elements in your pattern library which is a major drawback.

“Github’s markdown interpreter can include HTML. However, there is only so much you can do in HTML.”

It would seem that creating a pattern library in Github is better suited to showing Javascript/back-end code so for this project it would be better do created a pattern library on a website. Creating it on a site gives a lot of freedom with what you can show and how elements ares styled where as Github it quite restrictive.

To create a pattern library by coding it from scratch is the most common approach as it’s basically like building a website. However their are frameworks avalible out there that help people create pattern libraries.

Pattern Library frameworks https://www.sourcetoad.com/web-design/pattern-library-framework-astrum/

These frameworks gives users a lot of tools and guides on how to create a pattern library. Using these frameworks can prove to be more successful than handcoded a pattern library because it gives a user a base to work from which means allows more time to be spent on create pattern library elements rather than making sure the overall site it working.

One such framework is Pattern Lab:

Pattern Lab http://patternlab.io

Pattern Lab at its core a static site generator that helps create site components. It includes a lot of tools such as intergrating responsive frameworks like Bootstrap or Foundation, provide annotaions for elements which allows more detailed documentation and allows full customisation of library files such as renaming element catagories.

Pattern labs library demo http://demo.patternlab.io

The main issue with Patten Labs is that it takes some time to set up because it uses PHP and complex back-end functions but does have alot of documentation.

One other framework is Astrum.

Astrum Site http://astrum.nodividestudio.com/#feedback

Astrum is more lightweight that pattern labs as it doesn't use as much back end funtionallity. Its used command line functionalliy to add components to the library as well as generate a site to house it. The pattern library can also be styled as well.

Astrum pattern library example http://astrum.nodividestudio.com/pattern-library/

It’s quite a clean and simple site but look very proffesional, much better looking than Patten Labs. A drawback of Astrum is that elements can’t be previewed on a example page. This means that Astrum just builds the library by itself.

From this, Astrum seem to be the best solution for creating a pattern library as it provides alot of features and seems developer friendly since most of the coding done by the user is front end. Astrum helps build the site around the components created as a way to save time while also looking professional.

To summaries from this research a pattern library need to

  • Showcase a good number of web elements.
  • Have some form of styling to show how elements will look in context.
  • Must provide sample code for each element.
  • Must be created in a website format.

Method and Specification

For the patern library to be successful it must meet these requirements

  1. Have a select number of elements including:
  • Navigation Bar (Nav)
  • Header Element (carousel or just static)
  • A range of six button types
  • Jumbotron (call to action)
  • Footer possibly incorporating social media icon links etc.
  • Colour palettes including hex codes.

2. Must be created on a website.

3. Must use HTML and CSS to create the components.

4. Must included documentation, code snippets and examples of each element.

To create this pattern library it must use HTML and CSS as per the spec which complies with web standards. However some back end code such as Javascript might be used to give more advanced features.

To help create the library Astrum will also be used to help create the pattern library as it has feature that will help set the layout of the library as well as keep everthing in order.

Astrum Documentation: https://github.com/NoDivide/astrum

Astrum is downloaded as a packadge then the documentation states how its applied. Astrum will also be referenced appropriatetly to make sure of fair use.

To help create the pattern library a time plane was made to ensure enough time was spend on each section to make sure the quaility is up to standard.

Time plan for project (64hrs + 1hr for debugging)

A set amount of time has been alocated to each part of project which is around 8hrs per section plus 1hr for debugging and quality checking. However some extra time might be used if certain parts of the project take longer than expected.

To make sure that the pattern library works as intended a test plan will be used to check certain elements. This plan is based of the specifiction as each requierment states what the project must do.

The plan included:

  1. Make sure each web element is created with documentation and code snippet's.

2. The library work on most web browsers: Edge, Firefox, Safari and Chrome

3. The pattern library works on smaller screens ie. responisve.

4. The library complies with W3C standards.

Testing the project against each requierment will ensure it meets what is asked of it.

Design, Planning, Experimentation & Implementation

To begin with some low fidelity wireframes were created to generate some ideas for how the pattern library would look as well as each web element.

Low fidelity wireframes:

Medium fidelity wireframes:

The medium fidelity wireframes were created on Moqups.com.

“A streamlined web app that helps you create and collaborate on 
wireframes, mockups, diagrams and prototypes.”

It allows uses to created wireframes online for free so it was used to create some higher qaulity wireframes.

Only some design ideas were picked from the low fidelity wireframe

Implementation:

Each pattern library component created with HTML and CSS then put together using Astrum. First Astrum needed to be installed which is done using command line.

This installs Astrum on a machine then creates a public folder so components can be added. Also to host the site MAMP was installed to host Astrum on a web server to it could be accessed.

MAMP site and application. https://www.mamp.info/en/

How Components were made:

To add components to Astrum library it has commands to add new component groups:

Commands to add new components: https://github.com/NoDivide/astrum

After this, a new component is added to the public folder which contains a group folder with each indiviual component. Each component has a description file and a markup file:

The description file adds a an excerpt stating component type and use:

Description file and output.

The markup file is where each component is built using HTML. The CSS for components is contained in stylesheet added to the app folder. Each component is displayed in the library along with code snippets.

HTML markup file and the outcome on the library. The code snippet can be hidden.

To edit the main site style their is a .json file that has links to each colour being used. These can be changed if so desired.

One thing to note is that the footer and the nav-bar components uses icons from a website called Iconfinder.

Nav-bar and footer using icons
Iconfinder site: https://www.iconfinder.com

Iconfinder allows users to download a large selection of paid and free icons for use in development. This was ideal for the library as some components needed icons to show how they would look and since they were free it was just a case of downloading them.

Final Library:

Introduction page.
Library containing all components. The side nav footer being repeated is a result of the screenshoting.

Conclusions

Checking the library agasint the spec will make sure it meets whats required.

1.The required components have been created using a basic styling so that users get a general sense how the element would look. A more specific brand styling could be used show how each component would look but the minial style works just as well.

2.The library was created using Astrum which creates a site for library components. This saved alot of time when creating the site since it wasn't made form scratch. However using this framework does increase the size of the site but the payoff is justified.

3. Each component was created using HTML and CSS since Astrum has its markup files for each component and the ability to add a custom stylesheet helps with adding different CSS.

4. Each component has a visual example, a short line or so explaining what the component is and where to use it as well as code snippets for the HTML and CSS.

As an extra feautre the library is also responsive so it scales down.

Library scaled down

Its not a necessary feature but its nice to have their to make it more accessible. The only issue is that some of the components aren’t responisve.

The jumbotron and the header element dont scale so these could be changed to scale as well.

To summarise using Astrum to create the library turned out very well and would be highly recommended if someone would want to create a pattern library. However creating a library from scratch does allow more control rather then using a package but Astrum does have a lot of freedom.

One clap, two clap, three clap, forty?

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