Basic concepts

Warhol is a tool unlike any other, so we need to make sure that we all speak the same language. This page introduces you to Warhol's fundamental concepts and all warhol-specific lingo that you will come across.

Pattern library #

A pattern library is a web page that contains interactive example implementations of styles and components. The pattern library is the single source of truth that Warhol analyzes to build its knowledge about your design system.

It is not to be confused with the term style guide, which may also refer to some PDF that defines abstract rules for design in words or images. In contrast, a pattern library in Warhol's world is always an interactive web page that uses HTML and CSS.

(Production) Web Page #

The term production web page refers to any page that implements the styles and components that are defined in a pattern library. A production web page is where you use Warhol to find design errors. The page does not need to be “in production” in the traditional sense, it is just the part of your project that is not the pattern library. The distinction between pattern library and production web page is important, so be sure that you know what you are dealing with whenever you come across an error message or read documentation!

Project #

A project is a specific production web page that you manage in the web app. A project links a pattern library to a URL for a production web page and provides a few configuration options that control how Warhol runs tests on pages that belong to the project.

Theme #

The theme consists of the colors, typography and icons defined in your pattern library. It constitutes basic style invariants that apply to all components and all non-components as well.

Component #

A component is any standalone building block used for a web project, built with markup and CSS styling. Examples for components are buttons, teasers or even more complex UI objects like a modal dialog. If you know the CSS methodology BEM, components are the B in BEM. From the perspective of Atomic Design, components may be atoms, molecules or sometimes even organisms.

The term “component” usually refers to the component as a whole, including any elements the component may contain. Elements inside a component are called component children. Components in the pattern library are called component definitions, components in production web pages are refereed to as component implementations. A component definition defines the exact styles and child elements that a component implementation must implement. Warhol will complain about any deviation in a component implementation from the component definition.

Snapshot #

Snapshots are data about components and component children that Warhol extracted from a pattern library. When Warhol checks your production web page for errors, the page is actually compared to the snapshots that were created from the pattern library.

Non-Component #

Every element that is neither a component nor a component child is a non-component, also sometimes just called an “element”. Non-components don't have any canonical implementation in the pattern library but must instead follow the broader style rules laid out by the theme.