This style guide documents the Champion Power Equipment pattern library, including common front-end elements for CPE web properties.
This project was built using Drizzle. It includes tools for development and for rapid prototyping.
Where possible, we recommend integrating this pattern library as a submodule to promote ongoing maintenance.
For short-lived or proof-of-concept projects, you can download the current toolkit assets directly:
Be sure to also include our polyfill.io script to ensure our toolkit JavaScript runs correctly in older browsers.
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.from%2CArray.prototype.find%2CArray.prototype.includes%2CElement.prototype.remove%2CString.prototype.includes"></script>This polyfills the following features:
Array.from()Array.prototype.find()Array.prototype.includes()Element.prototype.remove()String.prototype.includes()When using polyfill.io in your app you can add additional polyfills, but be sure to include the above.
Artifacts of this project's design process, including in-browser prototypes as well as more static deliverables.
Patterns that directly reflect or represent the existing CPE brand.
The library's most basic (but essential) building blocks.
Patterns used to wrangle content, but otherwise invisible.
More complex recurring patterns, often created for specific interactions or use cases.
Recurring patterns that contain no new elements or components, but should be documented due to their frequency.
The last line of defense before writing new styles, these classes can be applied to other patterns to tweak aspects of their behavior.
Patterns included to satisfy requirements of third-party plugins and extensions.