Getting Started with Material Design in Web Development

You are currently viewing Getting Started with Material Design in Web Development

Getting Started with Material Design in Web Development

Material Design is a design language developed by Google that combines principles of classic design with innovation and technology. It offers a set of guidelines and components for creating modern, intuitive, and visually appealing user interfaces. In this tutorial, we’ll explore Material Design concepts and show you how to implement them in web development using HTML, CSS, and JavaScript.

Prerequisites

  • Basic knowledge of HTML, CSS, and JavaScript
  • A text editor
  • A modern web browser

Step 1: Include Material Design Components

1.1 Link Material Design CSS

First, include the Material Design CSS file in your HTML file. You can do this by adding the following link in the <head> section:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

1.2 Include Material Design JavaScript

Next, include the Material Design JavaScript at the end of the <body> tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Step 2: Create a Material Design Card

Let’s create a simple Material Design card. This is a common UI element used to display content in a structured way.

2.1 HTML Structure

<div class="row">
  <div class="col s12 m6">
    <div class="card blue-grey darken-1">
      <div class="card-content white-text">
        <span class="card-title">Card Title</span>
        <p>This is a sample card. You can put any content here.</p>
      </div>
      <div class="card-action">
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
</div>

2.2 Explanation

  • We use the row and col classes from Materialize CSS for a grid layout.
  • Inside the col div, we have a card with a dark background color (blue-grey darken-1).
  • The card-content class is used for the main content of the card.
  • The card-action class is used for additional actions, such as buttons or links.

Step 3: Create a Material Design Button

Material Design offers stylized buttons with animations and effects.

3.1 HTML Button

<a class="waves-effect waves-light btn">Button</a>

3.2 Explanation

  • The waves-effect class provides the ripple effect animation.
  • The waves-light class adds a light background to the ripple effect.

Step 4: Create a Material Design Form

Forms in Material Design are sleek and easy to use.

4.1 HTML Form

<form class="col s12">
  <div class="row">
    <div class="input-field col s6">
      <input id="first_name" type="text" class="validate">
      <label for="first_name">First Name</label>
    </div>
    <div class="input-field col s6">
      <input id="last_name" type="text" class="validate">
      <label for="last_name">Last Name</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input id="email" type="email" class="validate">
      <label for="email">Email</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <textarea id="message" class="materialize-textarea"></textarea>
      <label for="message">Message</label>
    </div>
  </div>
  <button class="btn waves-effect waves-light" type="submit" name="action">Submit</button>
</form>

4.2 Explanation

  • We use the row class for each row in the form.
  • The input-field class is used for input fields, and we use validate for basic input validation.
  • For textareas, we use the materialize-textarea class.
  • The submit button is styled with btn, waves-effect, and waves-light for the Material Design effect.

Step 5: Initialize Materialize Components (JavaScript)

Materialize CSS has some components that need JavaScript initialization, such as dropdowns, modals, and tabs.

5.1 Initialization Script

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
  });
</script>

5.2 Explanation

  • We use the DOMContentLoaded event to ensure the DOM is fully loaded.
  • We initialize the sidenav component with the M.Sidenav.init() function.

Full Example: Material Design Page

Putting it all together:

<!DOCTYPE html>
<html>
<head>
  <title>Material Design Example</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>

  <div class="row">
    <div class="col s12 m6">
      <div class="card blue-grey darken-1">
        <div class="card-content white-text">
          <span

 class="card-title">Card Title</span>
          <p>This is a sample card. You can put any content here.</p>
        </div>
        <div class="card-action">
          <a href="#">Read More</a>
        </div>
      </div>
    </div>
  </div>

  <a class="waves-effect waves-light btn">Button</a>

  <form class="col s12">
    <div class="row">
      <div class="input-field col s6">
        <input id="first_name" type="text" class="validate">
        <label for="first_name">First Name</label>
      </div>
      <div class="input-field col s6">
        <input id="last_name" type="text" class="validate">
        <label for="last_name">Last Name</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <input id="email" type="email" class="validate">
        <label for="email">Email</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <textarea id="message" class="materialize-textarea"></textarea>
        <label for="message">Message</label>
      </div>
    </div>
    <button class="btn waves-effect waves-light" type="submit" name="action">Submit</button>
  </form>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.sidenav');
      var instances = M.Sidenav.init(elems);
    });
  </script>
</body>
</html>

Explanation

  • We’ve added a simple navigation bar (nav) with links.
  • There’s a Material Design card, a button, and a form with input fields and a submit button.
  • The JavaScript at the end initializes the sidenav component (though we haven’t used it in this example).

Running the Example

Save the HTML code in an index.html file and open it in your browser. You should see a Material Design-styled page with a navigation bar, a card, a button, and a form. Interact with the elements to see the Material Design effects.

Conclusion

In this tutorial, we’ve covered the basics of implementing Material Design in web development using HTML, CSS, and JavaScript with the help of the Materialize CSS framework. Material Design offers a clean and modern look to your web applications with ready-to-use components and styles. You can further explore the Materialize documentation for more components, customization options, and advanced features to enhance your web projects.

Leave a Reply