“Metro Design” is a design language and user interface. This is developed by Microsoft and used in Microsoft`s current and new generation operating system, including Windows 8, Windows Phone, Zune and Xbox. The Metro is to give more focus on the “content-focused interface” of the applications by relying more on typography, less on graphics, clean, light, fast, open aesthetics, dynamic, moving transitions and interactions etc. are the main principles and origins of Metro Design. It`s inspired from Swiss graphics design. The design style's main objective is to remove any chrome and extra decoration and allow users to interact directly with content. It's all about the content and the beauty of simplicity.
Example Web Page with Metro Design
 |
| Metro Style |
Create a CSS file and
add below code (metro-design.css):
body
{
background: rgb(51,51,51)
url("back.jpg");
color: #fff;
padding: 20px;
}
.tile
{
height: 150px;
width: 200px;
float: left;
margin: 0 5px 0 0;
padding: 2px;
}
.largeTile
{
width: 250px;
}
.container
{
width: auto;
height: auto;
}
.content
{
width: auto;
padding: 5px;
height: auto;
display: table;
}
.Video
{
background: #DAA520;
}
.Game
{
background: #CD0000;
}
.Songs
{
background: #4682B4;
}
.MyApps
{
background-color: #2E8B57;
}
.OnHover
{
background-color: #483D8B
!important;
border:2px solid #2E8B57;
}
Create a HTML page and add page layout (HTML):
<h1>
Metro
Design Demo</h1>
<div class="container">
<div class="content">
<div class="tile
Video">
<span>Video</span>
</div>
<div class="tile
Game">
<span>Game</span>
</div>
<div class="tile largeTile
Songs">
<span>Songs</span>
</div>
<div class="tile
MyApps">
<span>My Apps</span>
</div>
</div>
<div class="content">
<div class="tile
MyApps">
<span>My Apps</span>
</div>
<div class="tile
Songs">
<span>Songs</span>
</div>
<div class="tile largeTile
Game">
<span>Game</span>
</div>
<div class="tile
Video">
<span>Video</span>
</div>
</div>
<div class="content">
<div class="tile
Video">
<span>Video</span>
</div>
<div class="tile
Game">
<span>Game</span>
</div>
<div class="tile largeTile
Songs">
<span>Songs</span>
</div>
<div class="tile
MyApps">
<span>My Apps</span>
</div>
</div>
</div>
Create a JS file and add below code (metro-script.js):
$(function
() {
$(".tile").mouseover(function () {
$(this).addClass("OnHover");
});
$(".tile").mouseout(function () {
$(this).removeClass("OnHover");
});
});
Add Jquery/Script and CSS in Head section:
<head>
<meta charset="UTF-8"
/>
<title>Metro Design Demo</title>
<script src="js/jquery-1.6.1.min.js"
type="text/javascript"></script>
<link href="css/metro-design.css"
rel="stylesheet"
type="text/css"
/>
<script src="js/metro-script.js"
type="text/javascript"></script>
</head>
