Pattern Libraries

Creating reusable, responsive components with HTML, CSS, JavaScript and PHP.

Introduction — background and aim of the project

Everchanging technology required web developers to quickly adapt to current trends and make the best use of available resources to speed up the development. With the multitude of libraries, plug-ins and pre-processors, along came the concept of pattern libraries. It enabled web design project to become an assembly of premade components rather than a long journey through creating new tailor-made solutions. In his publication Paul Boag remarks that making use of ready libraries can drastically speed up final product delivery to the market. As he points out, pattern libraries cover three very important aspects, such as consistency, reusability and maintainability of projects.

Having in mind benefits of pattern library usage, the aim of this project was to research best practices and create a new Pattern Library, containing six components:

  • Navigation Bar
  • Header
  • Range of six button types
  • Jumbotron
  • Footer
  • Component of Choice


FCreating Pattern Library from scratch should start with definition of common patterns in the application, as suggested in Johnston’s article. According to his principles, components should be styled in isolation and should not depend on each other. He also mentions that component naming should be consistent and decided beforehand to encourage clear documentation. Brüning’s presentation however argues that it might be more beneficial to have as little documentation as possible. Instead, he suggests that minimalistic documentation should be included only where problems might occur, in complicated components. Kholmatova acknowledges this practice and in her article on creating a new pattern library she starts with combining all the needed components and then categorising them, rather than creating a documentation brief.

In terms of infrastructure, Debenham, working with PHP based library, advises that all pattern files should be placed in a designated folder. Adding another component in that folder will simply add it to the pattern library.

Currently there is a number of pattern library frameworks, such as Fractal, Pattern Lab or Astrum. Bradley’s take on pattern libraries suggests that use of a framework can ensure design consistency and speed up development, however Petricek’s article argues that frameworks might not be the best tool due to less control over your code, resulting in diminished understanding of pattern library’s structure.

Pattern library development should follow a set of best current web development practices. Tom Ewer stresses that some rules should not be neglected at the cost of overall trendiness. His list of irreplaceable practices covers those which could also be applied while developing components for pattern library, such as keeping typography readable, creating and testing fall-back solutions or presenting calls to actions clearly and intuitively.

Summarising, pattern library should include independent components, styled in isolation. Documentation, based on mark-up, examples or snippets might be easier to understand for new users. Components should have consistent naming and ideally be categorised by their complexity. Use of framework is a personal preference and does not determine pattern library’s quality, however it might speed up development.


Time allocated for project completion was 65 working hours. It was possible to distinguish six project life cycle phases and allocate certain amount of time, depending on a task difficulty.

  • Research (16hrs)
  • Design (8hrs)
  • Development (24 hrs)
  • Testing (8hrs)
  • Evaluation ( 8hrs)
  • Maintenance (1hr)

Methodology used in this project was a standard Waterfall.

Project Objectives:

  • Research good practices in the context of pattern libraries’ development.
  • Based on previous research, create project’s infrastructure and apply all the component fuctionalites.
  • Style components based on current web design practices.
  • Conduct technical and user testing to gather feedback and identify any issues


Two versions of pattern library were developed using object-oriented PHP, JavaScript, HTML and CSS. During development and testing it was hosted locally using XAMPP. NetBeans, offering a clean project structure and syntax support, was an IDE of choice for this project.

Each version consists of six fully responsive and standalone components: navigation bar, header, range of six button types, jumbotron, footer and switches (first version)/ feedback classes (second version), being a component of choice.

  • Navigation:

PL (Pattern Library Version 1.0): Navigation object allows converting an associative array of field names and links into several navigation buttons.

LiBee (Version 2.0): There are three types of navigation in total: horizontal, vertical and tabbed. Each one of them uses styled button components.

  • Header:

PL: Header functionality enables adding a custom text and converts it to an upper-case to upkeep typographical consistency.

LiBee: supports three types of headers: vertical, horizontal and slide show. Slide show can contain either plain pictures or have text added to it.

  • Buttons:

PL: PHP Button object takes type of a button (primary/secondary), its value and script location. Based on that information it generates input field. Each button has three states: static, hover and active, which equals a total six button variations.

LiBee: Any button, input or link can be styled as a button, with use of respective attributes. There are three main button styles (primary, active, alert) in three sizes (small, regular, long). Any combination can be used and will produce unified buttons.

  • Jumbotron:

PL: Fully responsive field with a call to action in a form of a button. It enlarges any valid HTML within. Jumbotron object takes in a header and paragraph as variables. It also generates a button, making use of a Button object via include function.

LiBee: Tackles call to action as a responsive div with optional text, input field and/or button. It has its own form styling, which makes it possible to personalise without breaking any other existing forms.

  • Footer:

PL: Responsive 2-coulmn box, where any content can be placed. It accepts valid html and/or content for each column.

LiBee: Footer is a simple div with optional contact form and space for extra information.

  • Compontent of choice:

PL: Switches are small components utilising CSS transitions. They can be used instead of standard checkboxes.

LiBee: Feedback classes are responsive divs fixed to the top of the window, providing users with feedback on actions taken. Those also support adjustable close button.

Additionally, first version of pattern library features four dynamically changing colour schemes, making use of lightweight JavaScript function altering DOM infrastructure. Each component can be viewed in an isolated environment, with various anomalies implemented as a part of testing.

Design, Experimentation & Implementation

Pattern Library — Version 1.0

T o begin with, pattern library’s design was a basic HTML document, with simple tree structure. Idea was to add components in the respective boxes as they were created. File infrastructure, thanks to this approach, was clear and tidy.

This basic structure was all the HTML markup needed to create a pattern library, thanks to use of PHP include function. Each component would be created as a separate .php file and then added to the library. Benefits of this approach is very clear file structure, where all similar file types can be kept in separate directories. Reusability, a main feature of a pattern library, is easily achieved by separating components from project’s infrastructure.

Project’s infrastructure

When it comes to the structure of a component, each one is a PHP Class, with properties and methods processing specified variables. This makes components reusable, since any valid data can be used and the output structure will remain unchanged. Example below presents a structure of a component. It is considered a good practice to name the call as the file, therefore Navigation.php contains Navigation class.

Structure of Navigation component

Function __construct() executes whenever an object of this class is constructed. This example was provided with an associative array of links for the testing purposes. Normally, within the class file there should be no variables declarations, unless they are global constants or class properties. This development method assumes that user has no access to class files, therefore changing any variables within class files would be impossible, compromising reusability of the component.

The flexibility of object-oriented approach showed when some classes required access to other classes’ methods. For example, Jumbotron would reuse already existing class Button. Instead of creating a new button, it was possible to apply a ready solution. In case buttons would have to be updated, it would require updating only one Button class instead of all button method within various classes.

Jumbotron making use of Button class

When referring to another class, there are certain rules to follow. There is no need to include class file and doing so will result in error informing that class redeclaration was attempted. A __construct() method cannot be called in as a static method. Generating a static method, executing the same code can be used as a simple fix, however it is not recommended for a large-scale projects as it contradicts the DRY (Do not Repeat Yourself) principle. After creating each component, pattern library’s infrastructure was ready for styling with JavaScript and CSS.

Pattern Library structure

Design begun with researching CSS typography effects that could be used in the pattern library. Slashed Text effect by Robert Messerle was particularly interesting. It could be used in a header component, with eye-catching typography and colours.

Slashed Text

Attempt to apply this effect to the Header component required use of Node.js package manager (npm) in order to install Stylus and Nib mixin.

LiBee — Version 2.0

After more research done about pattern libraries it was apparent that the approach in the first example was not quite what was required in this assignment, therefore it was decided upon creating another pattern library. LiBee, as it was named, was another set of components, this time properly organised on separate pages.

Use of PHP was found to create more problems than it solved in the long run, with confusing use of include() and not a large range of options to optimise components. This time, LiBee would be based mostly on HTML and CSS, with minor JavaScript functionalities. This would ensure that code is clean and understandable even if users do not have vast knowledge about programming languages. This approach was focused on using absolute minimum to create component’s structure. Each component would use HTML tags as a starting point. General styles stylesheet and js script would then provide extra functionality and make sure all components adhere to good web design practices.

This time, library’s structure was cleaner and more compact as illustrated in the picture below.

Simple Project Structure

There is no way of telling browsers not to parse html tags, therefore to include code snippets without them being executed, it was necessary to substitute angle brackets with escaped characters before inserting code blocks into <code> tags.

Code block with pre-formatted code.

Each component has an Example, Code and Notes section in order to support proper documentation, which was determined as a good practice in the research. Also CSS document is divided and commented such as each element has its own dedicated section. To make CSS code readable it was helpful to use CSS Beautifier — an online tool that allows to clear up messy and inconsistent code. It helped to reduce whitespaces, adjust tabs, and unify bracket styles. Makin your code clean is a general good practice and thanks to tools such as this one, it helps to speed up development without compromising its quality.

Testing and Feedback

Both libraries were tested in Mozilla Firefox, Internet Explorer and Google Chrome. Most of the components were working as intedended, however there were few issues encountered:

Version 1.0 Issues:

  • Horizontal Navigation made elements end up in disarray as the window was scaled down. This is an issue with display attribute and could be fixed by adding a media query breakpoint.
Broken Navigation in mobile view.

Version 2.0 Issues:

  • Similar issue with navigation occurred in this version and could also be corrected by adding a media query breakpoint, which would change navigation style to vertical on a small screen. This would unify button’s length, which was needed in this case.
Navigation in mobile view.
  • In the slideshow header, text would be place out of the box and buttons were relatively large. This could be fixed by adding media query to reduce the text and button sizes on a small screen.
Overflowing text in a Header.

User Feedback

It was possible to collect user feedback via social media. There were some issues while pattern library was viewed on a mobile device, including ones described above. Also, it was suggested that CSS source code should be included in the library, which was added later on.

User Feedback P1
User Feedback P2


Summarising, LiBee is a pattern library that follows good development practices for developing a pattern library in more detail than the first version. It provides both code snippets and notes for the code, it has clearly defined sections and each component is standalone and reusable. There were still few issues identified, as per browser testing and feedback, about mobile version, mostly with overflowing elements, which could be easily fixed with adding correct media queries. CSS code link was added, as requested in the feedback. Overall list of objectives defined in this project was completed on time, which was one of the criteria for its success. This project was a major contribution to better understanding not only the impact of pattern libraries on project’s lifecycle but also to good range of current development practices.

Both versions of pattern library can be found here: