Rockets of Awesome Pattern Library V1

Live Demo of the Pattern Library

The Rockets of Awesome Pattern Library (RoA PL) is an organized set of interactive, reusable components that can be used to build out more complicated modules, pages, and templates. Pattern libraries often include example elements,sample code, variations, use cases, and considerations.

When building a pattern library, you should consider the following for each pattern you add:

Pattern name: Giving each pattern a name makes it easier to discuss and reference them. Meaningful names help people quickly grasp what the pattern may look like and how it may be used.

Visual representation: What does the pattern look like? An interactive visual representation of the pattern can show different states (like active, focus, hover) and include other variations.

Design elements: Add a downloadable design file that can be easily edited. Designers can then incorporate the pattern into their workflow more quickly. Code samples: Sample code includes the code that defines the semantic structure, visual style, and behavior for each pattern. For web-based libraries, this would be the HTML, CSS, and Javascript. In most cases, the CSS and Javascript should already be defined in existing stylesheets and scripts. Sample code should document how to apply those styles and behaviors.

Variations: Some patterns have multiple variations. Show each of the visual variants, how to implement them, and what problems they are intended to solve. Use cases: Use cases define where and how to use patterns most effectively. They may even suggest alternative patterns for specific circumstances, good pattern combinations, and examples of when NOT to use the pattern.

Considerations: Even the best patterns have tradeoffs or potential pitfalls. Including considerations can help tell your team why (or more importantly why NOT) to use a pattern in certain circumstances. Related elements: What patterns are similar to this pattern? What patterns commonly accompany this one? Is this pattern a part of a larger component?