From a Front-End Developer’s POV: 
The Power of a Pattern Library

A Siteworx front-end developer shares how pattern libraries have transformed the front-end development process.

PatternLibrary(V3)_Hero.jpg

As a front-end developer, I have seen firsthand how pattern libraries streamline the process of bringing digital experiences to life.

After Siteworx integrated pattern libraries into our workflow, it strengthened cooperation between our user experience designers, visual designers and developers and empowered us to serve our clients even better. In addition to the invaluable teamwork benefits, the use of pattern libraries can also truly transform the front-end development process.

What is a Pattern Library?

This is how front-end developers used to work: When a new page had to be created, we would get static images (or, if we were lucky, the actual Photoshop files) showing what the page should look like.  After enough pages were designed, we’d eventually get a PDF “style guide,” which laid out global rules to follow regarding colors, font styles, button styles, and layouts when creating website.  The problem was that these PDFs never evolved with the project – so by the time we got these static guides, everything from branding requirements to back-end integration requirements – were already out of date. 

Enter the HTML “Pattern Library.”  A pattern library delivers the same information that static PDF style guides can, but in a much more useful and dynamic way. Pattern libraries do this by capturing ‘patterns,’ such as colors, font styles, button styles, and layouts, in HTML code instead of text – goodbye static, out of date documentation!

At Siteworx, to create our pattern library, we utilize a product called Pattern Lab.  It is an open source tool that generates a static site (using PHP or Node) that acts as a style guide for both designers and developers, and also helps developers to organize and reuse code patterns more effectively.  Additionally, it utilizes the workflow tools Grunt or Gulp to accelerate development time.  Pattern Lab allows developers to build pattern-driven user interfaces using atomic design principles.

What are “atomic design principles”?

In chemistry, atoms are the basic building blocks of all matter. Similarly, in atomic design, a website’s user interface can be broken down into small pieces, which build upon each other to create something larger.  “Atoms” are used to build “molecules.” Molecules are used to build “organisms,” which are then dropped into “templates.” Finally, templates are leveraged to build “pages,” which collectively form a website.

Atomic Design

Figure 1: Atomic design building blocks.

To recap:

Atoms are the smallest patterns and can be reused in molecules and/or organisms. For example: colors, fonts, links, input fields, buttons, images, etc.

Molecules are combinations of atoms. For example: forms, a menu, a search bar, a list of links, etc.

Organisms are a more complex combination of atoms and/or molecules.  For example, the header of the site could include links, buttons, and a search bar; a footer could include a list of links, buttons, and a form; a carousel could include images, links, and “accent” colors.

Templates define the layout of the page, and include a combination of multiple organisms and molecules. For example, a site might have an “article” template for pages with the global site header, a carousel, an article body, a sidebar with a list of links, a button, and the global site footer.

Pages utilize templates and fill them in with actual content. One or more pages can re-use the same template. At this point in our process, a page contains the same HTML that it will after backend integration, and will visually look identical. For example, a site might have articles about front-end design, the impact of typography on a site, and digital self-service – each one of these would be a “page.”  At Siteworx, because we create a lot of sites that live within a Content Management System (CMS), our pages are usually simply examples of what is possible.

Each of these “building blocks” is a pattern – a small snippet of HTML, which is reusable and consistent.  Because Pattern Lab utilizes Mustache, this small snippet can be represented in different states, simply by modifying the JSON-driven content.  For example, there could be a “link list” molecule with an optional title.  The Mustache template would contain simple logic to show the title if the title is provided in the JSON.  Since patterns can be reused, when, for example, a header organism utilizes this “link list”, it could not send in the title, but when the footer organism utilizes it, it could.  This reusability ensures consistency of our design and our code across a set of pages and it is easier to avoid duplication since the pattern can be broken down into such small pieces. 

What does the static site look like?

Once you have your code in place and the Grunt or Gulp task has run, Pattern Lab generates a static site.  This static site can be viewed either via your own server or in the built-in Browsersync integration.  This site displays all the patterns you have developed, organized by atomic delineation, and then by groups that you have defined. For example, you might organize your carousel, banner, and sidebar organisms into a “promos” folder.  Patterns (particularly templates and pages) can be viewed individually, or in a list.

Pattern Lab

Figure 2: Screenshot of a Pattern Lab page.

Pattern Lab provides easy access to a viewport resizer in the toolbar that enables you to test components/pages across different screen sizes.  This comes in handy when developing a responsive website, as we do frequently at Siteworx.

Additionally, Pattern Lab has a “pattern info” panel, which allows you to share lots of information to a variety of audiences.

  1. For your back-end integration team, content authors, and designers, there is a space to display documentation. Documentation can be simple text or markdown for communication of more complex information.
  2. Pattern Lab automatically links to whichever patterns were included to create the current pattern (for example, the header organism could link to the “link list” molecule, button atom, and search bar molecule), in addition to patterns that include the current pattern (for example, the article template).
  3. The Mustache template and rendered HTML are also available in this view, so you don’t have to dig through the source code to find it.

Pattern Info Panel

Figure 3: A Pattern Lab page with notes.

How does a Pattern Library fit into the flow of a project?

Pattern libraries can be used for any site, from a small proof-of-concept, to a large-scale enterprise website.  At Siteworx, we have successfully integrated Pattern Lab into our front-end development process for both content and commerce sites, as well on the back-end with Adobe Experience Manager, Hybris, and Episerver. In a project, the pattern library acts as an easy one-stop-shop for all departments and stakeholders involved to see the latest look and feel of the site, and the follow the progress of front-end and design teams. 

At Siteworx, we employ a process called Experience By Design™, which has allowed all of our departments to work concurrently and more closely together.  The concept of a pattern library has been integral to the success of this process, since it encourages front-end developers, back-end developers, content editors, and designers to work iteratively and avoid duplication, while collaborating to bring the best ideas and solutions to the table.

Also, since Pattern Lab is so easy to use, Siteworx designers with HTML and CSS knowledge (aka “Front-End Designers”) are now able to complete the “visual Quality Assurance” step, and sometimes even create their designs (skipping over the “static image” stage altogether) to coding right away.  Ultimately, pattern libraries have not only given designers the guarantee that the visual quality is preserved in the code implementation, but has allowed the developers to focus their time and energy on more challenging code issues. Indeed, pattern libraries provide a solid foundation for front-end development and are a great tool for front-end strategy.

Read more about how you can use pattern libraries to deliver value and Pattern Lab.

GET IN TOUCH

Send us a note. Drop by. Or give us a call. We would love to hear from you.

Say hello.
Send us a note.
We park here, but work globally.
11480 Commerce Park Drive, Fifth Floor, Reston, VA 20191
  • Chicago
  • DC
  • NYC
  • Raleigh
  • Rochester
Ring. Ring.
1.844.256.0329