Material UI with React

What is Material Design ?

You might be hearing about material design frequently these days.What is material design?
According to material.io:

Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.

Material Design is this concept developed by Google which makes the design of our application neat,clean and highly attractive.It contains various rules for animation, style, layout, components, patterns and usability.It is a visual language to help designers create websites and apps that are accessible,practical and usable.This concept of design has highly influenced designers with an awesome documentation found here.

Advantages of material design

Components of Material UI

Material Design describes every element in detail.From how to create it,to where should the element be placed in the screen.Some of the common elements are:

Paper

Buttons

Cards

Dialogs

Dividers

Grids

Lists

Menus

Pickers

Progress bars

AppBar

Drawers

Snackbars

TextFields

Installation

Material Design can be integrated in various frameworks like React,Angular etc.This blog post mainly focuses on implementing Material-UI in a React application.Material-UI is a library that implements the google material design.To use Material-UI in an existing app,just install a npm package.

Layouts and Design

There are lots of components as mentioned earlier,but this blog post features only a few important ones.

Grid

Material Design’s responsive UI is based on a 12-column grid layout.The grid layout creates visual consistency between layouts while allowing flexibility accross all designs.The concept of Grid in material-ui is similar to bootstrap’s grid.

There are two types of layout in Grid layout: containers and items.Items widths are set in percentages so they always fluid and sized according to their parent element.Items resides inside containers.

Papers and Cards

Material design tries to translate the physical proporties of paper into the screen.Cards are generally taken as an entry point to something descriptive.Cards and Paper both can contain various elements whose size or actions can vary. A card may contain simple information,media,buttons(UI controls) etc. Using Paper and Cards is easy.

The pyhysical proporties of paper are translated to the screen.The background of an application resembles the flat,opaque texture of a sheet of paper, and an application’s behaviour mimics paper’s ability to be re-sized,shuffle,and bound together multiple sheets.

Dialog

Dialog informs user about a specific task and contains other elements and controls.They inform users about critical information, require users to make decisions,or involve multiple tasks.A simple alert dialog example is as follows:

TextFields

TextFields are the components for letting users input some value and usually appears in a form.Input fields may be of type text,numbers,dropdowns etc.

importReactfrom'react'importTextFieldfrom'material-ui/TextField'importButtonfrom'material-ui/Button'classAppextendsComponent{render(){return(<formclassName='formStyle'><TextFieldfullWidthtype='text'placeholder='What did you work on yesterday?'/><TextFieldfullWidthtype='text'placeholder='What are you planning to work on today?'/><TextFieldfullWidthtype='text'placeholder='Any impediments in your way?'/><Buttonraisedcolor='primary'type='submit'>Submit</Button>
</form>
)}}exportdefaultApp;

Colors,Icons and Typography

Color in Material-UI is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.
The material.io provides a powerful color-tool to create,share,and apply color palettes to your UI, as well as measure the accessibility level of any color combination.A palette is the combination of primary and accent colors.

PropTypes of the Components

PropTypes may vary from components to components.But proporties like classes and className is available in every components to customize the CSS.Any props can be passed to the components according to their API.React application nowadys,no longer report on incorrect props being passed to Components,it is important to pass valid propTypes.

We can pass propTypes like transition,open in the Dialog component whereas elevation,square to Paper.A textField can have error,defaultValue props and the list of props goes on and on.For more information about component proporties look at material-ui-next.

Other React Component libraries:

There are lots of alternatives out there to choose a material design based UI framework for react.Some of them are: