5 Simple Steps to use Warhol in Your Project

Published on 23.09.2019 by Hans Christian Reinl and Peter Kröner

Warhol helps you to create web-based user interfaces with a more consistent look and feel. In our last article we explained how Warhol works from a technical point of view and what it does to identify design deviations in your project. This post shows what using Warhol actually feels like and how five simple steps are enough to turn your existing pattern library from wishy-washy guidelines into a solid test suite.

Step 1: Create a Pattern Library

Warhol consumes a Pattern Library that implements the components and theme of your projects and turns it into a test suite. You can create the pattern library with whatever technologies and tools you prefer as long as the end result is a web page that renders in the browser.

The pattern libraries for Warhol itself or our Bootstrap-based demo project are examples for simple single-page pattern libraries. Warhol can of course also deal with pattern libraries that span multiple pages or use iframes to demonstrate responsive components.

Step 2: Write your Configuration in the Warhol App

The next step is to set up your pattern library configuration and project in Warhol's web app. You just have to configure a few things that tell Warhol about the basic parameters of your pattern lib:

  • URLs and breakpoints
  • Component names and selectors
  • Selectors for color swatches and typography examples
Screenshot of the dashboard page in Warhol's web app

For a real-world example take a look at the configuration for the aforementioned bootstrap-based demo project.

The pattern library does not have to contain every component or every aspect of your theme. If you just want to test two components, simply configure Warhol to only test the two of them. If you only want to make sure that the color scheme and typography are on point, you can skip components altogether. Warhol only tests what it is configured to test.

Step 3: Warhol learns your Pattern Library

Once you've created a pattern library and configured your project in Warhol's web app it's time to lean back and let the machines to the hard work. Warhol's fleet of browsers visits the pattern library and record the styles and behaviors of your components, typography rules, icons and color scheme for every breakpoint in every browser.

Warhol's core design principle is that you should not have to change anything about your pattern library just to make it work with Warhol. The only caveat to this is that most pattern libraries are not as comprehensive as their authors think they are - so you might have to add a few things to make your pattern libraries consistent within itself. Warhol will let you know if there's inconsistencies in your pattern library.

Once Warhol has learned all the intricacies of every color and every component it's time to put your production web page to the test.

Step 4: Use the Browser Extension to find Issues

Warhol's most powerful tool is its browser extension. It can instantly tell you if the implementation of a component looks even slightly wrong or if some tiny line of text uses a color that is not allowed by the pattern library. And you get precise diagnostic feedback that enables you to fix bugs without having to look at the pattern library itself.

Screenshot of Warhol's browser extension in action

Depending on your perspective this enables you to identify and fix bugs before any pesky designers open niggling tickets for you or it helps to all those sloppy developers (that think that every shade of gray looks the same) in line. When Warhol turns your pattern library into a solid test suite, everyone becomes more productive.

Step 5: Use Warhol to check your whole Web Site

Warhol's browser extension helps humans to find design bugs on web pages, but humans don't scale well. If you want to verify the design for every page in your online publication you need Warhol's testing services. A swarm of browsers crawls every URL on your production page and aggregates the test results for you.

More to come

We are still working on some of the insides of Warhol and it will take some time to make it ready for a public release. If you want to check out Warhol right now, we are looking for interested developers as testers. If you want to be among the first to try Warhol and help us to shape the final product, please write to hello@warhol.io!

Written by

Hans Christian Reinl

Software Architecture and Development is my passion. I love agile methodologies. Co-hosting @workingdraft


Written by

Peter Kröner

Trainer for frontend technologies, podcaster @workingdraft.


More from the blog