Rocketbelt

Rocketbelt is a UX-focused, responsive, and mobile-first pattern library collaboratively assembled at Pier 1 Imports.

rocketbelt.io | Rocketbelt on GitHub

Introduction

Rocketbelt is a pattern library that addresses recurring design problems across the ecommerce landscape.

It strives to be a comprehensive, living document that serves the clarity of design decisions. It facilitates a shared vocabulary and therefore a shared understanding of user interfaces.

The pattern library guarantees consistency in the online experience--critical since the experience is the brand.

Rocketbelt ensures UI components are reusable, efficient, and easily maintained. It accelerates UI development by providing building blocks to quickly build potentially complicated interactions. The pattern library allows rapid prototyping to also be high fidelity.

Features

• SASS-based patterns
• Auto-updating, inline code snippets
• Flexbox grid & component layouts
• Responsive & mobile-first
• User-definable browser support & prefix-free development
• Easy cross-browser/cross-device testing via BrowserSync
• Coming soon: Automated visual regression tests of all patterns

Getting Started

Browse the pattern library at rocketbelt.io or fork the GitHub repo! Then build your fork and run a local instance by running npm install && gulp.

Contributing

Rocketbelt is a collaborative, living document and your contributions are valued--please submit GitHub issues and pull requests.

Acknowledgements

BrowserStack generously supports Rocketbelt's goal of cross-browser & cross-device compatibility.