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 pattern
library.