Warhol

Breakpoints

---

The field breakpoints in your configuration tells Warhol about the breakpoints your responsive design implements. Warhol will take snapshots of your pattern library for each screen width defined in breakpoints. An example:

{
  "patternLibUrl": "https://warhol.io/patterns",
  "breakpoints": [800, 1000],
  "components": [
    { "source": ".button" }
  ]
}

This configuration will cause Warhol to take snapshots of the component .button at screen widths 800 and 1000. The screen height is set the the same size as the width for each snapshot. If you do not provide breakpoints, Warhol will take one set of snapshot at a screen width of 1000 pixels.