15th May 2018

Material Design

What is Material Design?

Material Design is a design language developed by Google in 2014. It brings a cleaner design and consistent look to mobile apps and Web pages across different platforms, using bold and colorful graphics.

It is a combination of the classic principles of good design with the addition and possibility of technology and science.

Other competitive design languages are metro design, flat design, realism design etc. It differs from them on the basics of color schemes, patterns, textures, shapes or layouts.

Materialize, MUI, Surface, Material Foundation, Material Design Lite and Material Components for the Web these all are the popular material design CSS frameworks.

In this tutorial, I will explain Materialize CSS Frameworks.

What is Materialize?

Materialize is a modern responsive front-end framework based on Material Design.

The difference between Materialize, Bootstrap, and Foundation is that Materialize is based on Google’s Material Design language whereas bootstrap and foundation are based on the mobile first design language and flat design language, respectively.

Setting up the basic Materialize Templates

You can download Materialize CSS and JS files from the here

After that, you create the index.html and css/style.css file and create an images folder.

In index.html  I have import CSS and JS files. You can use the below code.

index.html

Now I will explain how to use materialize framework in websites.

1.Materialize Color

Materialize provides classes to provide those colors to font and background.

Example:

See the Pen odyJXg by Janki Gandhi (@jankiatyantik03) on CodePen.dark

For more classes of colors and background-colors you can refer the below link.

Materialize  Color Palette

2. Materialize Grid

Materialize uses the standard 12 column fluid responsive grid system.

.s , .m  and .l  classes are used to define the width of columns for small, medium, and large screens.

Example:

Result:

Large Device:

Medium-device:

Small-device:

3. Materialize Buttons

Here I explain different types of the buttons.

Raised Button:  It is a standard button that signifies actions and seeks to give depth to a mostly flat page.

Large Buttons:   .btn-large  class is using in button has a larger height for buttons.

Small Buttons:  .btn-small  class is using in button has a smaller height for buttons.

Floating Button:  It is a meant for very important functions.

Flat Button:  It is usually used within elements that already have depth like cards or modals

Submit Button: When you use a button to submit a form, instead of using an input tag, use a button tag with a type submit

Disabled Buttons: A disabled element is unusable and un-clickable. Disabled elements are usually rendered in gray by default in browsers.

Example:

See the Pen RyJEpo by Janki Gandhi (@jankiatyantik03) on CodePen.0

4.Cards

Here I explain different types of Cards.

1) Basic Card

Example:

See the Pen rvKobN by Janki Gandhi (@jankiatyantik03) on CodePen.dark

 

2) Images In Cards

In this example, I have explained an image card with a Floating Action Button.

Example:

See the Pen aGYzGW by Janki Gandhi (@jankiatyantik03) on CodePen.dark

 

3) Card Sticky

Here you can add a card that reveals more information once clicked. You can make your card-action always visible by adding the class to .sticky-action   the overall card and the div .card-reveal  with a span class .card-title  inside to make this work. Add the class t0   .activator  an element inside the card to allow it to open the card reveal.

Example:

See the Pen OZvPVw by Janki Gandhi (@jankiatyantik03) on CodePen.0

5.Forms

Here I explained different types of forms elements.

Checkbox And Radio-buttons

Example:

See the Pen JvZxdE by Janki Gandhi (@jankiatyantik03) on CodePen.0

Chips And Switches

Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.

Switches are special checkboxes used for binary states such as on / off.

Example:

See the Pen aGKXYw by Janki Gandhi (@jankiatyantik03) on CodePen.0

Text-input And Icon-prifix

Icon-prefix

You can add an icon prefix to make the form input label even more clear. Just add an icon to the class .prefix before the input and label.

Example:

See the Pen mLKvvv by Janki Gandhi (@jankiatyantik03) on CodePen.0

 

For more components, you can refer this site Materialized framework.