The patterns tab in the devtools extension is a not very polished overview of the patterns in your pattern library and the current page. It is only available when a pattern library is active.

  • Breakpoints lists the breakpoints that the current pattern library was configured to use and highlights the current breakpoint (which depends on the viewport width).
  • Media and feature queries compares the media queries and feature queries used by the pattern library with those used in the current page.
  • Colors compares the pattern library's color palette with the colors that are used in the current page at the current breakpoint.
  • Typography sets lists the valid typography property combinations according to the pattern library's configuration for the current breakpoint.
  • Components lists all components defined in the pattern library and counts the number of component instances in the current test result.
  • Utilities lists all utilities defined in the pattern library and shows the utility's styles.

Join our Slack Community

Any question not answered yet? You want to get the latest information on Warhol and discuss new features? Join our Slack Community.