Appearance

Style Guide: benefits ​

The Style Guide is a development tool rather than a storefront feature. It puts the whole Venta design system on two pages so a team building or reviewing a child theme can see what the base theme provides and what their overrides changed.

Key business benefits ​

  • Child theme regressions show up in one place - Open the page on the child theme and compare it against the base theme. A broken button state, a lost shadow, or a colour override that leaked further than intended is visible on the page.
  • Copy instead of hunting - Class names, colour values, icon calls, and whole button and input markup are all click-to-copy. A developer building a template does not have to search the existing templates for the right markup.
  • The icon set is browsable - 48 icons rendered side by side with their PHP call. Finding the right icon by looking at it is faster than grepping the SVG directory for a name.
  • Design review without a build - A designer or reviewer can check spacing, type scale, and colour usage against the implementation in a browser, at real breakpoints.
  • Onboarding shortcut - A developer new to a Venta project learns the naming conventions, the seven-step title scale, and the container-over-gray rule from one page instead of from code review comments.
  • Image Resizer options made visible - The second page renders each resizer option applied to a real image, so keepFrame, keepAspectRatio, and setObjectFit can be compared side by side on the same image.

Example use cases ​

  • Handing a child theme to a client's own developers - The style guide is the reference for what they may reuse and what the theme already solves.
  • Reviewing a theme colour change - A brand refresh touching the primary ramp is checked across every state and component at once.
  • Debugging a Tailwind purge - If a utility disappeared from a production build, the style guide is where a missing class shows up as unstyled output.
  • Choosing resizer settings for a new image slot - Compare the framing and quality options against the actual image before writing the template call.

What to weigh first ​

The pages have no ACL and no login check, so this belongs in development and staging environments only. Install it with --dev and keep it out of production builds. It also carries no admin configuration and changes nothing about how the storefront behaves.