Material Design with ReactJS using Material UI
Material Design is well known these days because of its deep design principles. Coming to the history, It is a design language that Google developed in 2014. It uses grid-based layouts, responsive animations, transitions, padding, and depth effects such as lighting and shadow.
I remember playing with Material examples and implementing them myself. It’s really smooth and gives you a sense of achievement especially in UI/UX.
Few examples
If we try to observe deeply and go through the documentation, We can sense the perfection, consistency, and clarity on how the design can be taken care of. It is inspired by the physical world and its textures.
Best parts
- Both for designers & developers
- Cross-platform (Web, Android, IOS, etc.)
- Saves time
Now we know the importance of Material Design. Let’s find how we can use it with ReactJS.
Material Design + ReactJS
After some geeky research, I finally landed on the Material UI, Dam this is what I am looking for.
After React released this open-source Material Kit also released in 2014 and in a short time has grown popularity with over 60k stars, It is one of the top user interface libraries for React out there.
A perfect library with everything power-packed covering almost all the UI components that can be flexibly used with React web or mobile application.
Material-UI components work in isolation. They are self-supporting, and will only inject the styles they need to display.
Getting Started
Once installed relatively simple to use.
Material-UI was designed with the Roboto font in mind. We need to include this font CDN file in the index, If we want to use the different font we can plan accordingly.
Material SVG Icons
In order to use these Icons, We need to install them separately.
Usage,
Components
Components are divided into few categories as per their functionalities.
Layout
All the layout items like Box, Container, etc.
Inputs
All the input components — Form components, Slider, Switch, etc.
Navigation
Components like Bottom Navigation, Breadcrumbs, Menu, link, etc.
Surfaces
App bar, Paper, Card, Accordion were the surface components. For the Paper the best part is Elevation.
Feedback
Progress bars, Backdrop, etc.
Data Display
Components for displaying data like List, Table, Tooltip, Typography, etc.
Utils
Furthermore, components like Popover, Slide, Portal, Modal, etc.
Lab
As the name itself explains to us — It is a Laboratory.
This package hosts the incubator components that are not yet ready to move to the core.
Component API
Every component usage is explained in detail. More about props and CSS customization points.
Material UI/Styles
We can use material styling without using Material UI Components as well.
- Blazing fast
- It’s extensible via a plugin API
- It uses JSS as its core
- < 15kb gzipped
Usage,
Lots more to dive into styles.
https://material-ui.com/styles/basics/
Material UI/System
A powerful design system. It provides low-level utility functions called style functions for building powerful design systems. Some of the key features
- Access the theme values from the component props
- UI Consistency
- Responsive Styles
- Work anywhere irrespective of theme object
- Work with CSS in JS Solutions
- < 4kb gzipped
- Fast enough
We can create a component with the Material system.
Few more interesting things to cover
Style Library Interoperability
Material UI — Let us use the JSS based styling. But at the same time, we can different ways as well
- Plain CSS
- Global CSS
- Styled Components
- CSS Modules
- Emotion
- React JSS
This is one of the best parts of flexibility.
Bundle Size
This is one of the most crucial. Without knowing how to optimizing or How efficiently we can use the library, Then it would be a failure at the end.
Bundle Size Matters
Material UI contains a lot of amazing stuff at the same time, It will be a bottleneck, If we don’t know how to reduce the size. Few tools can help us to inspect the overall bundle size as well.
As we know we all have 2 options to import Material-UI components
Option 1 (Direct import) is much faster BUT. You need to configure stuff in Babel. Because it won’t use the exports in @material-ui/core/index.js like option2.
More details: https://material-ui.com/guides/minimizing-bundle-size/
Design Stuff
Till now we have gone through a lot of DEV stuff. Now coming to Design.
Yep, It’s great that we can get both Figma & Sketch UI Kit of the entire material design.
Figma
Sketch
A lot more to dig and play with, But for now, I am much convinced to adopt this into our Tech.
Both Design & Dev can speak the same language with consistency across the products.
Go through and comment on your views on this.
Stay tuned!
