Recently I had a chance to work on Project, Where I had to use aMaterial Designlook and feel. So I used Material Design Lite to accomplish that. I created a Login template using Material Design Lite for that project Which I would like to share here as small piece of Markup and CSS.
Material Design Lite lets you add a Material Design look and feel to your websites. Material Design Lite (MDL) is open source CSS framework and very easy to integrate into your HTML.
Create an index.html and write down the below markup. In the below markup we have added Material Icons, MDL theme and few custom styling.
index.html
<!--
Login template using Material Design Lite (MDL)
@author Shashank Tiwari
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite Login From</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-green.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="mdl-layout mdl-js-layout">
<div id="login-conatiner" class="mdl-card mdl-shadow--16dp">
<div class="mdl-card__supporting-text">
<div id="login-fab" class="mdl-color--accent mdl-color-text--white">
<i id="lock-icon" class="material-icons">lock</i>
</div>
<div id="card-heading">
User Login
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="username"/>
<label class="mdl-textfield__label" for="username">username</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="email"/>
<label class="mdl-textfield__label" for="email">Email</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="password" id="password"/>
<label class="mdl-textfield__label" for="password">Password</label>
</div>
<button id="login-button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-color-text--white">
Login
</button>
</div>
<div class="mdl-card__actions">
<button class="mdl-button mdl-js-button mdl-button--primary">Register</button>
<button id='forgotpassword' class="mdl-button mdl-js-button mdl-button--primary">Forgot Password</button>
</div>
</div>
</div>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>To add little bit extra sugar we have added CSS, so create style.css an add the below CSS.
style.css
/*
* Login template using Material Design Lite (MDL)
* @author Shashank Tiwari
*/
* {
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
body {
background-color: rgba(0, 0, 0, 0.0392156862745098);
background: linear-gradient(-45deg, rgba(16, 0, 78, 0.3686274509803922), rgba(20, 4, 81, 0));
}
#login-conatiner{
margin: auto;
}
.mdl-card, .mdl-card__supporting-text {
overflow: inherit !important;
}
.mdl-card {
overflow: visible !important;
z-index: auto !important;
}
#login-fab {
border-radius: 50%;
height: 56px;
margin: auto;
min-width: 56px;
width: 56px;
overflow: hidden;
background: rgba(158,158,158,.2);
box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24);
position: absolute;
top: -30px;
text-align: center;
left: 0;
right: 0;
}
#lock-icon{
line-height: 56px;
}
#login-button {
width: 100%;
height: 40px;
min-width: initial;
}
#card-heading{
text-align: center;
font-weight: 600;
font-size: 32px;
height: 30px;
padding-top: 30px;
color: rgba(0, 0, 0, 0.31);
}
#forgotpassword{
float: right;
}
Conclusion
Well, this was just a small piece of markup, So I really don’t have much to say. But if you have never used Material Design Lite, I would highly recommend you check that out.
Thanks for this, it was almost exactly what I needed!