TRMD3

Tiny React Material Design 3

❤️ You like Figma? ❤️
❤️ You Like Material Design 3? ❤️
❤️ You like React? ❤️
Then you love Tiny React MD3!

Figma Material Design 3 Kit 🤝 React.ts = Tiny React MD3

• Quickly transform your design kit prototypes into stunning and modern web applications
• A set of easy-to-use, high-performance and customizable components that follow the Material Design 3 principles and aesthetics
• Developer handoffs made easy with ensured parity between the Figma material Design 3 Kit and React

🌐 Home Page

The Official TRMD3 home page

https://trmd3.com/

❓ How to get started?

• Running your first development environment
• Documentation

📚 Resources

• https://m3.material.io/
• https://materialpalettes.com/
• https://www.figma.com/community/file/1035203688168086460
• https://www.figma.com/file/new/Material-Symbols?node-id=0%3A1&t=RzoSzcWGopbfCZRs-0
• https://fonts.google.com/icons
• https://www.figma.com/community/plugin/1034969338659738588
• https://developer.okta.com/blog/2022/03/14/react-vite-number-converter
• https://colornamer.robertcooper.me/

👆 Installing TRMD3

There are two options to start development with TRMD3, you can clone the main TRMD3 repository and transform it into your own website, or you can use the trmd3components npm module, This npm module contains all components required to start developing with the TRMD3 styled components.

To begin installation, run the command: npm i trmd3components

visit the trmd3components npm module here: https://www.npmjs.com/package/trmd3components

visit the trmd3components github repository here: https://github.com/highnet/TRMD3Components

🤖 Test Area

The TRMD3 Component Test Area is an auxiliary application, which is used for for testing UI components in a vacuum for the Tiny-React-MD3 project. The Test Area repository can be found here: https://github.com/highnet/TRMD3ComponentTestArea/tree/main

🔥 Deploying a TRMD3 project with Firebase

1. Go to https://firebase.google.com/ and start a Firebase project.
2. Navigate to the root folder and type npm install -g firebase-tools into the terminal.
3. Type firebase login and follow the instructions to log in using the google account that created the Firebase project.
4. Type firebase init hosting into the terminal. Select Use an existing project and choose the Firebase project from the list.
5. Use dist as your public directory
6. Configure the project as a single-page app by typing y when prompted.
7. Type npm run deploy into the console to build and deploy the app using Firebase.
8. (Optional) Configure "Firebase Storage" inside your Firebase project to host and serve any static assets.

👥 Collaborators:

• Joaquin 'Highnet' Telleria
  • highnet.xyz
• Maria 'Uebersetzerin' Palma
  • mariapalma.at
• Manuel 'Manucapo' Telleria
  • manucapo.me

🛎️ Feedback

If you have any feedback, please reach out to me at [email protected]. I hope you find this project useful and interesting. If you have any feedback, suggestions, or questions, please feel free to contact me.

If you read this far, here is a cookie! 🍪 Write me a private message and let’s talk! 😊 I hope to hear from you soon!