Material Design for web application
In this article I’m going to show you how to
how to apply material design in web application. we will take materialize CSS framework to design our login page . Materialize
CSS is free open source frontend designing framework. It provides material
design. It
is like a bootstrap framework , but we can do many thing using this framework.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
- First link for material icons , if we want to use any icons then we need to specify this link.
- The second link for materializecss here all the class are define, We can customized.
- The last two links is a scripting link , associated to each other , in the materialize.min.js we have all javascript function regarding to material design and jquery for supporting the materialize.min.js .
Asp.net
Forntend coding :
Main HTML Code :
<center><h4 class="blue-grey-text">Material Design for Login page</h4></center>
<div class="row" style="margin-top: 15%">
<div class="col m8 offset-m2 l4 offset-l4 s10 offset-s1 ">
<div class="card-panel grey z-depth-5 lighten-5 blue-grey-text">
<center>
<i class="large material-icons">mood</i>
</center>
<div class="row">
<div class="input-field">
<input id="email" type="email" class="validate" />
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field">
<input id="password" type="password" class="validate" />
<label for="password">Password</label>
</div>
</div>
<div class="row center">
<div class="col m6 s12 ">
<button class="btn waves-effect waves-light " type="submit" name="action">
Login
<i class="material-icons right">done</i>
</button>
</div>
<div class="col m6 s12 ">
<button class="btn waves-effect waves-light" type="submit" name="action">
Reset
<i class="material-icons right">clear</i>
</button>
</div>
</div>
<div class="row">
<div class="col m8 offset-m2">
<span class="select-label">Dn't have account ? <a href="#">create account</a></span>
</div>
</div>
</div>
</div>
</div>
Final Code :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="loginWithmaterilized.aspx.cs" Inherits="Project.loginWithmaterilized" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Login Page</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
</head>
<body>
<form id="form1" runat="server">
<center><h4 class="blue-grey-text">Material Design for Login page</h4></center>
<div class="row" style="margin-top: 15%">
<div class="col m8 offset-m2 l4 offset-l4 s10 offset-s1 ">
<div class="card-panel grey z-depth-5 lighten-5 blue-grey-text">
<center>
<i class="large material-icons">mood</i>
</center>
<div class="row">
<div class="input-field">
<input id="email" type="email" class="validate" />
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field">
<input id="password" type="password" class="validate" />
<label for="password">Password</label>
</div>
</div>
<div class="row center">
<div class="col m6 s12 ">
<button class="btn waves-effect waves-light " type="submit" name="action">
Login
<i class="material-icons right">done</i>
</button>
</div>
<div class="col m6 s12 ">
<button class="btn waves-effect waves-light" type="submit" name="action">
Reset
<i class="material-icons right">clear</i>
</button>
</div>
</div>
<div class="row">
<div class="col m8 offset-m2">
<span class="select-label">Dn't have account ? <a href="#">create account</a></span>
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
Output :
Thanks for taking time to discuss about this technology. I love to learn more about this topic. If possible. as you gain experience update your blog with more information? It is extremely helpful for me.
ReplyDeletewebsite designing training
web design training chennai