What is Material-UI? Get an overview of what it has to offer
Check out the course on Material-UI at http://bit.ly/2SZDYyw Watch the course trailer at https://youtu.be/hhZ6yFvCWho
The focus of this video is to shed some light on the capabilities of Material-UI and I will cover some of the most common questions that are asked every week in some form or the other.
If you are new to Material-UI and looking for an overview of what this library does and is it for you? then hopefully you will find answers to some of the questions that are in your head right now.
Material-UI responsive: https://material-ui.com/guides/responsive-ui/#responsive-ui Comparison between Material Design and Material UI: https://youtu.be/I1dqDr0KGHM Material-UI grid: https://youtu.be/9207OppzJU0 Material-UI Roadmap: https://material-ui.com/discover-more/roadmap/
Full Transcript
Hey! this Deeksha from bonsaiilabs and welcome to today's video on Material-UI overview. The focus of this video is to shed some light on the capabilities of Material-UI and I will cover some of the most common questions that are asked every week in some form or the other.
If you are new to Material-UI and looking for an overview of what this library does and is it for you? then hopefully you will find answers to some of the questions that are in your head right now. So let's start.
The first question is What does Material-UI do?
Well.. Material-UI is open source library with an MIT license that gives you an ability to implement a design system for your applications. Material-UI library implements Google Material Design which is a design system from Google and Material Design is heavily used in all Google applications you use everyday including Maps, Calendar, Firebase site, Google Chrome site and many others. Material Design provides guidelines and specifications for everything needed in your app including Buttons, Typography, Color theme, spacing and much more. Material-UI library implements those guidelines and gives you back these ready to use components that you can hook into your React apps. You just need to use Material-UI in your project & import components you need..
Next popular question Is Material-UI and Material Design same?
No, they are not same. From the previous point, you may have already figured out that Material Design is a spec that defines how to create good visual designs that are consistent across various platforms or devices. It also covers how to design can be customized so that a brand can be communicated to the end users. The job of Material-UI is to use those guidelines from Material Design and create UI components that can be plugged into React applications. I have an entire video on comparison between Material Design and Material UI. Feel free to watch that video.
Alright next Can Material-UI be used with React Native?
No Material-UI library can only be used to add Material components in React Applications. In fact they are not even planning to create components for React Native as per their roadmap
Next question Why should I use Material-UI?
Well! if you are developer who, you should seriously think about being fast at what you ship. If you are too busy re-inventing the wheel, it probably needs some thinking. Material-UI as I mentioned is open source library with a permissible license. They have dedicated team of developers who are working to create new components frequently and provide support on GitHub and Stackoverflow. In fact Material-UI 4 which is an upgrade from version 3 and came out in 2019 has over 1 million weekly downloads on npm. You should also consider using Material-UI if you are a solopreneur who wants to develop everything right from front end to the back end. You don't want to work on every single animation, hover or ripple affect and instead leverage the work from open source community.
Another question How to install Material-UI?
It's super easy. I hope you are installing the latest version which you should
if you are starting the project from scratch.
It's available as an npm package that you can install using these
commands
If are inheriting the codebase in your company using an older version. You
can install a specific version as well.
But make sure you have the appropriate version of react and react-dom
as mentioned on their website.
Next question Is Material-UI responsive?
Well..if you are already using a grid system, you know how to adapt to any screen size. Material-UI additionally provides a Grid, Container, Breakpoints, CSS media query to help you build responsive user interfaces
Next Does google use Material-UI?
Not really! Teams at Google provide guidelines and specifications which are turned into implementations by Material-UI library.
Google has their own implementation of the Design System and have a React component library for React applications.
And finally What is Material-UI Grid?
Material-UI Grid is a grid system from Materail-UI library itself. It can be imported as a React Component and gives you flexibility to build consistent and responsive layouts for the user interfaces. I have already created a video in detail that covers a code example on how Material-UI grid works and how to leverage the breakpoints to cater to all screen sizes.
All the links are in the description below. So feel free to check them out.
I hope this video was useful for you and if it was then please consider subscribing. I will see you in the next video.