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
• 💅 - Styled components
• 🚀 - React components

---

PostCSS Main Styling Files

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

---

PostCSS Plugins

• postcss-preset-env
• postcss-import
• postcss-for
• postcss-mixins
• postcss-calc
• postcss-flexbugs-fixes

---

NPM Libraries

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

🍒 Cherry Grid

• 💾 Repository - 📦 NPM Package
• 📂 CSS Grid Docs - 📂 NPM Grid Docs

---

Changelog

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

👉 Read the entire changelog at the GitHub Release page.