The main goal of this style guide is providing the contributors a set of instructions about how he should approach writing codes and what are the excepted when a PR has been placed. This guide will walk you through the codebase, conventions, and principles we are currently following. We, the mumble community, do not want to enforce with all kinds of code conventions to anyone, but as the project gets larger, and there are many contributors are joining each days, it'll get quiet messy very quickly unless there is a set of instructions to follow for maintaining the consistency and improving the code readability. We also believe that, having some kinds of conventions to follow is much better than having no conventions at all; without some kinds conventions 100 different people can write code 100 different ways, which will be results in messy codebase. That's why, we are introducing you to the Mumble Style Guide. We highly recommends you to go through the guideline time to time. We will keep this file up to date with any changes in projects.
⚠ THIS DOCS IS CURRENTLY WORK-IN-PROGRESS. LOOKING FOR CONTRIBUTORS TO COMPLETE THIS GUIDELINE, ANY QUESTIONS AND SUGGESTIONS JOIN OUR DISCORD SERVER.
-
🗂 Directory Structures
-
🎭 Mumble CSS Style Guide
- 🎹 Pattern and Naming - 📦 Modularity - 🎨 Colors - ✍ Fonts - 🧰 UI Kits -
⚛ Mumble React/JSX Style Guide
- 📖 Basic Rules - ⛑ Function Components vs Class Components - 🎯 Importing and Exporting Modules - 🎏 Declaration - 🔺🔻 Ordering - ➰ Naming - ⭕ Parentheses, Spacing and Quotes - 🔯 Props and PropTypes - 🪁 JSX
| Folder | Description |
|---|---|
| .github | GitHub related stuff |
| frontend | The frontend development folder |
| frontend > cypress | The Cypress folder |
| frontend > public | contains the HTML file, the icons for all devices |
| frontend > src | The development folder ! |
| images | contain images used in ".md" files |
---> The website has two themes :
- Light Mode
- Dark Mode
---> For the Light Mode :
-> Preview :
-> Colors for the light mode :
| Types | Informations |
|---|---|
| main | #5aa5b9 |
| main-light | #e1f6fb |
| sub | #3f4156 |
| sub-light | #51546e |
| text | #737373 |
| gray | #8b8b8b |
| light | #e5e7eb |
| light-gray | ##767676 |
| bg | #f8fafd |
| white | #fffefd |
| white-light | #fafafa |
| success-msg | #5dd693 |
| error-msg | #fc4b0b |
-> Light Mode Pallette:
---> For the Dark Mode :
-> Preview :
-> Colors for the Dark Mode :
| Types | Informations |
|---|---|
| main | #71c6dd |
| sub-light | #3f4156 |
| sub | #696d97 |
| main-light | #3f4156 |
| text | #f5f5f5 |
| gray | #c5c5c5 |
| light | #313131 |
| light-gray | #bbb |
| bg | #2d2d39 |
| white | #1f1f1f |
| white-light | #1f1f1f |
-> Dark Mode Pallette :
| Types | Information |
|---|---|
| font-base | - Poppins - Arial - Helvetica - Segoe UI - Roboto - Ubuntu - sans-serif |
| font-monospace | -Fira Code -Courier New -Courier -monospace |
| font-regular | 300 |
| font-medium | 500 |
| font-bold | 700 |
---> Here is a preview ! 👇
---> Visit the Mumble UI Kit 👉 website