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
Cherry provides a Sketch library, mapping the same variables / naming-conventions from design to code. Helping with a smooth transition, implementation and planning.
- 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.
To use NPM, you need Node installed, click here to download.
- 💾 Repository - 📦 NPM Package
- 📂 CSS Grid Docs - 📂 NPM Grid Docs
Read what's 📦 new, 👌 improved, 🐛 fixed, and if 📖 docs got updated.
👉 Read the entire changelog at the GitHub Release page.