According to the #key# official website: https://m2.material.io/design/introduction #key#; "**Material Design** is a visual language that synthesizes the classic principles of good design with the innovation of technology and science." 

Google created with these design guidelines to ensure that all its products have a consistent user interface, and to share its knowledge in the domain of user experience design.

![](/api/edpresso/shot/5072109321584640/image/5920838580699136)


# Principles of material design

1. Using realistic shadows and lighting to convey the hierarchy of elements on the screen.
2. Using bold colors to make elements more appealing.
3. Incorporating feedback. For instance, animating a button to convey that it was pressed, and including a confirmation message to show that an action was performed.

#key# **Materialize CSS**: https://m2.material.io/design/introduction #key# is a framework based on Google's material design.

<br>

## Setting up materialize:

In order to set up materialize, the following code can be copy and pasted into your application.

<!DOCTYPE html>
  <html>
    <head>
      
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      
      
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
      
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
  </html>

## Using materialize

The following code shows how easy it is to style elements using materialize:

<!DOCTYPE html>
  <html>
    <head>
      
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      
      
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
      
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
        
        <button class = "btn">Click me</button>
        <br></br>
        
        <a class = "btn-floating btn-large cyan pulse"><i class="material-icons">edit</i></a>
        <br></br>
        
        <nav>
            <div class="nav-wrapper blue">
                <div class="input-field">
                    <input id="search" type="search">
                    <label class="label-icon" for="search"><i class="material-icons">search</i></label>
                    <i class="material-icons">close</i>
                </div>
            </div>
        </nav>
        
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
  </html>


// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

codemirror

What is material design in CSS?

Material Design synthesizes classic design principles with technology to ensure a consistent, appealing user interface using shadows, bold colors, and feedback.