VC Pattern Library

The VC Pattern Library was used to deliever front-end components across multiple products and services for different sectors and audiences.

HTML
CSS Experience
Sass
Accessibility
Design
Documentation
Coaching

The challenge

Working at Virtual College the product and development team were running into issues of inflated CSS files, inconsistent application of front-end code and trouble identifying and resolving issues quickly and effectively.

Researching different best practices of how to resolve this, I settled on creating a frontend pattern library.

Research

To help solve the common design and development problems, I first investigated what solutions could and would work for the current development team and how best to integrate into existing projects and ensure that it would be reusable for future work. Reviewing some of the more popular and seeing how they were put together from both a design and development perspective.

Breaking down the components

Once I settled on creating the pattern library, the first task was to break down the UI into separate components. This involved reviewing the existing views and identifying the shared elements across different applications and understanding all the use cases and states they could be in. Starting with the most basic elements such as buttons, inputs, typography, I defined, designed and documented each in HTML and CSS.

Screenshot of the Pattern Library

Accessibility

One of the key benefits of the pattern library was the ability to decouple the front-end from back-end code. This allowed me to test each component for accessibility and ensure it met the Web Content Accessibility Guidelines (WCAG) AA 2.1 standard.

As well as meeting the accessibility standards, I also worked to ensure browser compatibility by testing components and layouts across multiple devices and browsers, identifying and resolving issues efficiently.

Methodology

As well as researching pattern libraries, I also looked into different front-end methodologies. Experimenting with Atomic, OOCSS and SMACC, I settled on using Block Element Modifier. This gave me a flat CSS structure which was performant, stopped CSS conflicts and helped with code readability.

Build

To help with the maintainability of the pattern library, I used Sass to help manage consistent colours, sizes, breakpoints and more across the patterns. As well as building the deliverable code which was passed onto other developers, I also produced a documentation site, which detailed each of the available components, explaining what they are used for, code examples and the different modifiers available.

Practice & Adoption

Once the pattern library was in a deliverable state, I facilitated the move from the legacy front-end system. I ran workshops with other developers, explaining the principles of the pattern library and how to get the best out of it. I also worked directly on applications to ensure the smooth deployment of new components.

© Louis Frankland 2023