In this series of posts we are going to drive you through the process of rapid prototyping a web site with Material design, give it some functionality consuming a RESTful API and automate the build process with Gulp.js
What is Material Design?
Material Design is a new design language created by Google. It was announced for the first time in June 2014 at the Google I/O conference and has been slowly implemented in all the Google Applications and web sites since then.
This new design language is called Material as a metaphor – where each component of a web site or application is an object with its own attributes to make it feel realistic and tactile, ensuring that any interaction is instinctive and enjoyable by the user.
“Unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch.”
Matias Duarte, Vice President of Design at Google
We can find more information in the official Material Design Web site along with examples of their implementations, including:
In “material” everything is extremely well defined, even the animations are following the basic laws of physics to achieve the sensation of authentic motion, almost like the 12 principles of animation found in the book “The Illusion of Life: Disney Animation” written by two Disney animators.
Then… What is Material Design Lite?
After announcing Material Design, Google released something called Web Starter Kit. A complex library ready to create webs with material design in place.
Months later they realised that many developers only wanted to apply Material Design to their web sites without all the complexity of the Web Starter Kit so they created Material Design Lite (MDL).
Material Design Lite (MDL) is a library released by Google recently where they have encapsulated the basics of material design ready to be used by developers to build web sites. This lets us adapt Material Design style to our web site with the minimum effort.
Prototyping our first web site with Material Design Lite
Now that we know what Material Design is and the difference with Material Design Lite is time to get our hands on the library and start building.
We are going to do a quick prototype of a web application where users can see a wall of pictures taken from Instagram and filter them by any word. In this post we will build only the front end of this (HTML and CSS). We will give it some functionalities in future posts.
Getting Started
The first thing is to create our “index.html” file and linking the CSS and JS files required by Material Design Lite.
<html>
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
</head>
<body>
Hello World!
</body>
</html>See the Pen OVvKEx by Israel Martinez (@isramartinez) on CodePen.
Now is time to create the basic layout. Google already provides the HTML template for a few basic layouts here. They fit in a lot of different scenarios but for our first web app with MDL we will create our own template.
<html>
<head>
<!-- Material Design Lite -->
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">World Photo Wall</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon" for="waterfall-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp" />
</div>
</div>
</div>
<!-- Bottom row, not visible on scroll -->
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="waterfall-demo-header-nav mdl-navigation">
<a class="mdl-navigation__link" href="">London</a>
<a class="mdl-navigation__link" href="">New York</a>
<a class="mdl-navigation__link" href="">Paris</a>
<a class="mdl-navigation__link" href="">Tokyo</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Settings</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Option 1</a>
<a class="mdl-navigation__link" href="">Option 2</a>
<a class="mdl-navigation__link" href="">Option 3</a>
<a class="mdl-navigation__link" href="">Option 4</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<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-user_name">Image.jpg</span>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">favorite</i>
</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<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-user_name">Image.jpg</span>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">favorite</i>
</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<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-user_name">Image.jpg</span>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">favorite</i>
</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<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-user_name">Image.jpg</span>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">favorite</i>
</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<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-user_name">Image.jpg</span>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">favorite</i>
</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<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-user_name">Image.jpg</span>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">favorite</i>
</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<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-user_name">Image.jpg</span>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">favorite</i>
</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<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-user_name">Image.jpg</span>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">favorite</i>
</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<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-user_name">Image.jpg</span>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">favorite</i>
</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<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-user_name">Image.jpg</span>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">favorite</i>
</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<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-user_name">Image.jpg</span>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">favorite</i>
</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<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-user_name">Image.jpg</span>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">favorite</i>
</button>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>See the Pen OVvKBO by Israel Martinez (@isramartinez) on CodePen.
There we just added a few MDL components
- Waterfall header for the collapsible header including the lateral “hamburger” menu and a search box
- mdl-grid for the basic grid layout with just three columns defined by the class mdl-cell mdl-cell–4-col
- a few image cards with placeholders that we will replace in the following post with popular images coming from Instagram
In just a few minutes we have created a basic layout for our web app. In this case if we wanted to add more components or change the layout we can check the documentation to find examples and possible solutions. And of course we can use CSS to change whatever we want.
See you in the next post where we will populate this web app with real data/images coming from the Instagram API. We will learn how to consume a RESTful API.