Introduction

Cherry is a live inventory of definitions for the UI components, design patterns, naming conventions, brand assets and code guidelines.

Cherry is technology agnostic – meaning that it can be applied independently of the technology stack. It defines the underlying design philosophy of your project and serves as the bridge between design and code. It is bundled with all the right tools you need to get started as fast as possible.

🍒 Cherry can be used as:

• ⚖ - A design philosophy
• 💎 - Sketch library
• 🎨 - PostCSS variables and mixins
• ✍ - Single purpose CSS classes
• ⚛ - React components

PostCSS

• Styles - Main entry point with all imports.
• Variables - Variable definitions.
• Mixins - Chunks of reusable css.
• Globals - Appying the cherry variables to the global styles.

NPM Libraries

To use NPM, you need Node installed, click here to download.

• 🍒 Cherry Grid - 💾 Repository - 📦 NPM Package

Changelog

Read what's 📦 new, 👌 improved, 🐛 fixed, and if 📖 docs got updated.

👉 Read the entire changelog at the GitHub Release page.

Browser Support

Chrome	Firefox	IE / Edge	Safari	Opera
last 2 versions	last 2 versions	IE11, Edge	last 2 versions	last 2 versions