We developers spend the majority of our time interacting with the world through screens and pixels, which means it is more important than ever to have a stunning and immersive interface. Google takes care of this with its beautiful and clean Material Design, which offers simple yet delightful visual details and UI components that lead to a great user experience.


Material Design is a visual language designed with a mobile-first approach and an increased use of grid-based layouts, responsive animations and transitions, padding, and depth effects. Material Design has been growing in popularity and has plenty of frameworks like Materialize, Angular Material, Material Design Lite, Material UI, and many more.


Frameworks:


Materialize

A modern responsive front-end framework. Materialize was designed as an easy to work with framework that speeds up development while still focusing on user experience. Materialize has many UI components that were created with mobile in mind.


Take Materialze’s Toast, for example. Toast, albeit a funny name, is an easy way to send users unobtrusive alerts and is placed and sized responsively. This, along with sleek drag out menus, makes Materialize a great choice for any developer.


Angular Material

Makes using Material Design in your Angular application effortless. Angular Material provides a set of reusable, well-tested, and accessible UI components based on the Material Design System.


Polymer

Polymer’s paper elements collection implements Material Design for the web in a fast and efficient way. The Polymer core elements collection provides a number of unthemed elements that you can use to achieve material design app layouts, transitions, and scrolling effects.


Material Design Lite

Lets you add a Material Design look and feel to your static content websites without relying on any JavaScript frameworks or libraries. Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go.


A Deeper Leap into Lite Design:

Material Design Lite, is extremely light (27kB gzipped), and a great place to start if you want to try out Material Design in your project.


You can include Material Design Lite in your application by including the following <link> and <script> elements in your HTML pages:

   

  <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

 

There’s a large number of color combinations for you to choose from for you color scheme. You can specify a color scheme in the CSS file name by following the pattern:

 

material.{primary}-{accent}.min.css

(e.g. material.indigo-pink.min.css)

 

Some Cool Components

The Fab Buttons Material offers are simple, yet get the point across, and comes in multiple sizes and colors.

 

Screen Shot 2015-07-14 at 12.08.16 PM.png


You can include a Fab button in your project with the following code:


<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>













You can add a ripple effect to your Fab by simply adding mdl-js-ripple-effect

to the button class


MDL’s Badge icons follow this “less is more” pattern, letting you display different numbers and designs above badges to get your point across


Screen Shot 2015-07-14 at 12.10.10 PM.png


And the code for these badges:


<!-- Number badge on icon -->
<div class="icon material-icons mdl-badge" data-badge="1">account_box</div>
<!-- Icon badge on icon -->
<div class="icon material-icons mdl-badge" data-badge="♥">account_box</div>













Google’s self-contained cards give developers a way to add smooth aesthetics to various forms of information, ranging from pictures to event invites.


Screen Shot 2015-07-14 at 12.09.49 PM.png

 

 

<!-- Image card -->
<style>
  .demo-card-image.mdl-card {
    width: 256px;
    height: 256px;
    background: url('../assets/demos/image_card.jpg') center / cover;
  }
  .demo-card-image > .mdl-card__actions {
    height: 52px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
  }
  .demo-card-image__filename {
    color: #fff;
  }
</style>

<div class="mdl-card mdl-shadow--2dp demo-card-image">
  <div class="mdl-card__title mdl-card--expand"></div>
  <div class="mdl-card__actions">
    <span class="demo-card-image__filename">Image.jpg</span>
  </div>
</div>
<!-- Event card -->
<style>
  .demo-card-event.mdl-card {
    width: 256px;
    height: 256px;
    background: #3E4EB8;
  }
  .demo-card-event > .mdl-card__actions {
    border-color: rgba(255, 255, 255, 0.2);
  }
  .demo-card-event > .mdl-card__title,
  .demo-card-event > .mdl-card__actions > .mdl-button {
    color: #fff;
  }
</style>

<div class="mdl-card mdl-shadow--2dp demo-card-event">
  <div class="mdl-card__title mdl-card--expand">
    <h4>
      Featured event:<br>
      May 24, 2016<br>
      7-11pm
    </h4>
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Add to Calendar
    </a>
  </div>
</div>













More Fun with Mobile:

MDL's layout principles simplify the creation of scalable pages by providing reusable components and encourage consistency across environments by establishing recognizable visual elements, adhering to logical structural grids. The Layout components of MDL comprises navigation, tabs, and footers–which have each been optimized for varying viewport sizes and are a key set of features for all mobile developers to add to their arsenals.


Responsive Grid

The responsive grid in MDL is perfect for maintaining appropriate spacing across multiple platforms and screen sizes. MDL's grid is extremely powerful and dynamic, allowing for great consistency in outward appearance and behavior while maintaining development flexibility and ease of use.


Screen Shot 2015-07-14 at 12.46.09 PM.png


Tabs

The Tab component is a user interface element that allows different content blocks to share the same screen space in a mutually exclusive manner. MDL Tabs can shrink and stretch to fit any screen size, whether it be a huge monitor, an iPad, or a smart-phone, so you can always share your latest Game of Thrones conspiracies with friends. (Is Ned Stark really dead?)

Screen Shot 2015-07-14 at 12.48.34 PM.png


Footers

The Material Design Lite (MDL) footer component is a comprehensive container intended to present a substantial amount of related content in a visually attractive and logically intuitive area. Although it is called "footer", it may be placed at any appropriate location on a device screen, either before or after other content.

 

Screen Shot 2015-07-14 at 1.01.57 PM.png

 

There are different footer options, ranging from the "Mega Footer" above to a small and to the point "Mini Footer" (code below).

 

<footer class="mdl-mini-footer">
 <div class="mdl-mini-footer--left-section">
  <div class="mdl-logo"> More Information </div>
   <ul class="mdl-mini-footer--link-list">
    <li><a href="#">Help</a></li> <li><a href="#">Privacy and Terms</a></li>
    <li><a href="#">User Agreement</a></li> </ul> </div>
    <div class="mdl-mini-footer--right-section">
    <button class="mdl-mini-footer--social-btn"></button>
   <button class="mdl-mini-footer--social-btn"></button>
  <button class="mdl-mini-footer--social-btn"></button>
 </div>
 </footer>




 


Using MDL on Dynamic Websites

Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. But in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function. Here is how you can dynamically create a raised button with ripples:

<div id="container"/>
<script>
  var button = document.createElement('button');
  var textNode = document.createTextNode('Click Me!');
  button.appendChild(textNode);
  button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
  componentHandler.upgradeElement(button, 'MaterialButton');
  document.getElementById('container').appendChild(button);
</script>














Make the Most of Your Material

Material Design helps make otherwise complicated designs straightforward. Stop pulling your hair out over interface issues, and reconsider what you’ve been using for your web apps and websites. Material design may be just the solution to your development problems, and relieve a lot of the headache that comes along.