Warhol

Create a pattern library


A pattern library defines the color palette, the typography and the components for your web project's design. It serves as the single source truth for anything related to design, but it does not necessarily have to contain the whole truth - you can start with a very basic pattern library and slowly introduce Warhol's style checking to your project

The simplest possible pattern library defines just a color palette with some super-simple HTML:

<div class="colorExample" style="background: navy">Primary color</div>
<div class="colorExample" style="background: #EEE">Secondary color</div>
<div class="colorExample" style="background: rgba(255, 0, 0, 0.5)">Error color</div>

To make a pattern library useful for your Warhol (and your team) it needs to be hosted somewhere. This, again, does no require any bells and whistles. For a start we can simply store the pattern library page on a code sandbox like CodePen.

Finally we need to tell Warhol where to find the pattern library and how to identify the color elements:

  1. Go to app.warhol.io and log in
  2. Navigate to the Pattern Libraries Tab and click Add a new Pattern Lib
  3. Fill in a name for your new pattern library and select an organization.
  4. Fill in https://codepen.io/SirPepe/full/mdyGwmm as the pattern lib URL

The other fields contain the finer details of pattern library configuration and can all be set to null for now… apart from the theme field! To point Warhol in the general direction of the color examples we can paste the following JSON there:

{
  "colors": {
    "sources": ".colorExample"
  }
}

This instructs Warhol to source the color palette from elements that match the CSS selector .colorExample on the pattern library URL codepen.io/SirPepe/full/mdyGwmm.

Congratulations - you have just set up your first pattern library for Warhol! This is all we needed to start debugging!