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.

CSS > materialize.min.css > style.cssJS >materialize.min.jsimages/

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

index.html

<html>

  <head>
    <title>Materialize CSS Framework Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- for Icons -->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <!-- custom css -->
  </head>

  <body>
    <!-- jQuery is required by Materialize to function -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>
    <script type="text/javascript">
      //custom JS code

    </script>
  </body>

</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:
[codepen_embed height=”400″ theme_id=”dark” slug_hash=”odyJXg” default_tab=”result” user=”jankiatyantik03″]See the Pen <a href=’https://codepen.io/jankiatyantik03/pen/odyJXg/’>odyJXg</a> by Janki Gandhi (<a href=’https://codepen.io/jankiatyantik03′>@jankiatyantik03</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

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:
&lt;!DOCTYPE html>
&lt;div class="row">
  &lt;div class="red lighten-1 col s12 m6 l3"> 1 &lt;/div>
  &lt;div class="red lighten-2 col s12 m6 l3"> 2 &lt;/div>
  &lt;div class="red lighten-3 col s12 m6 l3"> 3 &lt;/div>
  &lt;div class="red lighten-4 col s12 m6 l3"> 4 &lt;/div>
&lt;/div>
Result:

Large Device:

Large-grid

Medium-device:

Medium-grid

Small-device:

Small-grid Material Design

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:

[codepen_embed height=”450″ theme_id=”0″ slug_hash=”RyJEpo” default_tab=”result” user=”jankiatyantik03″]See the Pen <a href=’https://codepen.io/jankiatyantik03/pen/RyJEpo/’>RyJEpo</a> by Janki Gandhi (<a href=’https://codepen.io/jankiatyantik03′>@jankiatyantik03</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

4.Cards

Here I explain different types of Cards.

1) Basic Card

Example:

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”rvKobN” default_tab=”result” user=”jankiatyantik03″]See the Pen <a href=’https://codepen.io/jankiatyantik03/pen/rvKobN/’>rvKobN</a> by Janki Gandhi (<a href=’https://codepen.io/jankiatyantik03′>@jankiatyantik03</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

2) Images In Cards

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

Example:

[codepen_embed height=”450″ theme_id=”dark” slug_hash=”aGYzGW” default_tab=”result” user=”jankiatyantik03″]See the Pen <a href=’https://codepen.io/jankiatyantik03/pen/aGYzGW/’>aGYzGW</a> by Janki Gandhi (<a href=’https://codepen.io/jankiatyantik03′>@jankiatyantik03</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

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:

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”OZvPVw” default_tab=”result” user=”jankiatyantik03″]See the Pen <a href=’https://codepen.io/jankiatyantik03/pen/OZvPVw/’>OZvPVw</a> by Janki Gandhi (<a href=’https://codepen.io/jankiatyantik03′>@jankiatyantik03</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

5.Forms

Here I explained different types of forms elements.

Checkbox And Radio-buttons

Example:

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”JvZxdE” default_tab=”result” user=”jankiatyantik03″]See the Pen <a href=’https://codepen.io/jankiatyantik03/pen/JvZxdE/’>JvZxdE</a> by Janki Gandhi (<a href=’https://codepen.io/jankiatyantik03′>@jankiatyantik03</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

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:

[codepen_embed height=”350″ theme_id=”0″ slug_hash=”aGKXYw” default_tab=”result” user=”jankiatyantik03″]See the Pen <a href=’https://codepen.io/jankiatyantik03/pen/aGKXYw/’>aGKXYw</a> by Janki Gandhi (<a href=’https://codepen.io/jankiatyantik03′>@jankiatyantik03</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

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:

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”mLKvvv” default_tab=”result” user=”jankiatyantik03″]See the Pen <a href=’https://codepen.io/jankiatyantik03/pen/mLKvvv/’>mLKvvv</a> by Janki Gandhi (<a href=’https://codepen.io/jankiatyantik03′>@jankiatyantik03</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

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