- Mirage-UI is a set of easily accessible, reusable, and composable design components and animations that make it super easy to improve the user experience of your websites and applications.
- Any design on a website that you see and like, just take a screen recording and raise an issue here. We'll get the design as a simple and reusable component for you to use.
:octocat: Introduction -
- Mirage-UI is the next stop for all your design and animation needs.
- We promote the community to contribute their designs and take designs from the repository for their community or personal projects.
- Our moto
No Contribution is smalland we appreciate each and every contribution from all of you.
:scroll: Instructions to follow while contributing -
-
Make sure that with every design/ component should be added to a separate folder.
-
Every folder should have its own
README.mdfile where instructions to setup environment should be there and a demo video in the form of a gif should be added. Refer to the README Template to make the README for the component you add. -
You can host the GIF on any website and insert the link in the
READMEfile to save space in the repository. Some useful links:- How to add GIF in README using markdown.
- Sample of how GIF is put in README
- Online Video to GIF converter
- Quick & easy trick for hosting GIFs (for this GIF needs to be less than 10mb)
- GIF optimizer in case you are using this trick ^ to host GIFs and it is more than 10mb.
-
Some hosting sites: (if needed)
-
Always update the table of contents in the parent folder where the new component is added.
-
Whether you are adding an animation or a design component or any other code, make sure to include all the additional scripts and CDN's within the file/ folder itself and with addequate documentation as required. The code must be extremely simple to understand such that it is ready for immediate use in some project.
-
Make sure to follow the Code of Conduct and be respectful towards others while contributing to the project.
:sparkles: Table of Contents -
:triangular_flag_on_post: How to get started ?
You can refer to the following articles on the basics of Git and Github or contact the Project Maintainers in case of any query:
:beginner: Basic Environment Setup -
-
Drop a :star: on the GitHub repository.
-
Download Git (when you install Git, Git Bash also gets installed by default)
-
Download and install a code/ text editor.
- Recommended-
-
VS Code extension recommended to work with the project-
-
Clone the repository by running command in your Git Bash:
git clone https://github.com/<your_GitHub_username>/Mirage-UI.git- Now open the project with the code/ text editor of choice.
Note -
- All CDNs and additional scripts are already there in the repo so it is ready to use immediately after cloning.
- Please follow best code formatting and linting practices to assure good code quality. You should use tools such as Prettier or Eslint for thy purpose.
Open Source Events Project is associated with:
1. PClub Summer of Code
- PSOC( PClub Summer of Code ) is the 2 month long Open Source program during summers conducted by Programming Club, UIET, with an aim to help beginners get started with Open Source Development while encouraging Diversity .
2. Let's Grow More Summer of Code
- LGM-SOC ( Let's Grow More Summer of Code ) is a one month long Open Source program organized by LetsGrowMore Community to encourage student participation in open source software development under the guidance of mentors from the open source community.
Maintainers ✨
 Pranav Mendiratta 💻📖 🚧 |
 Pranav Singh 💻📖 🚧 |
 Ayush Jain 💻📖 🚧 |
 Ria Tyagi 💻📖 🚧 |
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
Stargazers over time 🌟
