TRMD3
Tiny React Material Design 3
❤️ You Like Material Design 3? ❤️
❤️ You like React? ❤️
Then you love 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
❓ How to get started?
📚 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
- Go to https://firebase.google.com/ and start a Firebase project.
- Navigate to the root folder and type
npm install -g firebase-tools
into the terminal. - Type
firebase login
and follow the instructions to log in using the google account that created the Firebase project. - Type
firebase init hosting
into the terminal. SelectUse an existing project
and choose the Firebase project from the list. - Use
dist
as your public directory - Configure the project as a single-page app by typing
y
when prompted. - Type
npm run deploy
into the console to build and deploy the app using Firebase. - (Optional) Configure "Firebase Storage" inside your Firebase project to host and serve any static assets.
👥 Collaborators:
🛎️ Feedback
If you have any feedback, please reach out to me at joaquintelleria@gmail.com. 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!