Warhol

Breakpoints

The field breakpoints in your configuration tells Warhol about the breakpoints that 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 same size as the width for each snapshot. If you do not provide breakpoints, Warhol will default to taking one set of snapshots at a screen width of 1000 pixels.

Always remember that Warhol will collect snapshots at the precise screen widths that are defined in your configuration and that both the media queries min-width and max-width will apply depending on that screen size. You can use the “Patterns” tab in Warhol's browser extension to inspect the media queries that apply to the current page and compare them to the media queries that were in use when Warhol collected data from the patter library.