Welcome to Warhol! Warhol helps you to make sure that your web project looks right. Warhol takes a pattern library as input and turns it into tests for your production web page. You can run the tests in a browser extension while developing or you can use Warhol's automated services to test all of your pages in multiple browsers at all kinds of screen sizes (at least that's the plan). Warhol does not rely on screenshots like many visual regression testing tools, but analyzes HTML and CSS instead. This allows Warhol to take examples with placeholder content as input and use it to verify production web pages with real content.
This documentation explains how Warhol works, how you can set up your accounts, pattern libraries and projects, what the browser extension can do for you, what can go wrong and what kinds of design problems you can expect Warhol to detect.
Starting with Warhol is quite easy. You just need three things:
- A Warhol Account
- The Warhol Browser Extension (currently only available for Google Chrome)
- A pattern library (either on the web or on your local machine) that implements (parts of) your components and theme with web technologies. It does not need to be comprehensive and can use any underlying technology or framework as long as the output is sort-of reasonable HTML and CSS.
The "getting started" section in the docs walks you through each step. If you have any questions, check out the FAQ, join our Slack community, contact @wearewarhol on twitter or write an email to firstname.lastname@example.org.
Table of Contents
- Basic concepts • Get familiar with Warhol-specific terminology
- Register an account • How and why to get a Warhol account
- Get the browser extension • How to install and set up Warhol's browser extension
- Create a pattern library • Create and set up a basic pattern library
- Debug with the extension • Learn how to use the browser extension to hunt design bugs
- Define a component • Learn how to configure your first component
- Component variants • Configure Warhol to deal with several variants of the same component
- Component content • Learn how to define component children and directives
- Define typography rules • Introduce typography rules for components and non-components
- Create utilities • Learn about two different ways to build flexible style utilities
- Putting everything together • Combine everything we learned in one big example
- Get help and support • Contact us and connect with the community