In this tutorial I will show you how to create Metro Style UI for websites. In this tutorial we are going to create a Windows 8 Style Start Menu which is a Metro Style Design. Developers use Metro UI for creating websites of metro style but this library is limited to traditional web layout(vertical scrolling). In this tutorial I will be using this library with some custom CSS to create a horizontal scroll layout with tiles.
Basic Template
This is the basic template of our webpage.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/olton/Metro-UI-CSS/master/min/metro-bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/qnimate/QMetro/master/qmetro.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/olton/Metro-UI-CSS/master/min/metro.min.js"></script>
</head>
<body class="metro">
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/olton/Metro-UI-CSS/master/min/metro-bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/qnimate/QMetro/master/qmetro.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/olton/Metro-UI-CSS/master/min/metro.min.js"></script>
</head>
<body class="metro">
</body>
</html>
Here we loaded QMetro, Metro UI and JQuery from CDN.
Tiles Group and Columns
Tiles are placed inside tiles column. A tiles column consists of predefined number of columns for tiles to occupy. All the tiles columns must be places inside tiles group.
This code demonstrates tiles group and columns.
<!-- Tiles columns are places inside tiles-group class -->
<div class="tiles-group">
<!-- tile-col* divides tiles into columns. -->
<!-- tile-col1 creates a single column -->
<div class="tile-col1">
<!-- tile class represents a tile -->
<div class="tile half"></div>
<div class="tile half"></div>
<div class="tile half"></div>
<div class="tile half"></div>
<div class="tile double"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile double"></div>
</div>
<!-- tile-col2 creates two columns -->
<div class="tile-col2">
<div class="tile selected"></div>
<div class="tile double"></div>
<div class="tile"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile half"></div>
<div class="tile half"></div>
</div>
<!-- tile-col3 creates three columns -->
<div class="tile-col3">
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile"></div>
<div class="tile double"></div>
<div class="tile half"></div>
<div class="tile double"></div>
<div class="tile double"></div>
</div>
<!-- tile-col4 creates four columns -->
<div class="tile-col4">
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
</div>
<!-- tile-col5 creates five columns -->
<div class="tile-col5">
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile half"></div>
<div class="tile half"></div>
<div class="tile"></div>
</div>
</div>
<div class="tiles-group">
<!-- tile-col* divides tiles into columns. -->
<!-- tile-col1 creates a single column -->
<div class="tile-col1">
<!-- tile class represents a tile -->
<div class="tile half"></div>
<div class="tile half"></div>
<div class="tile half"></div>
<div class="tile half"></div>
<div class="tile double"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile double"></div>
</div>
<!-- tile-col2 creates two columns -->
<div class="tile-col2">
<div class="tile selected"></div>
<div class="tile double"></div>
<div class="tile"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile half"></div>
<div class="tile half"></div>
</div>
<!-- tile-col3 creates three columns -->
<div class="tile-col3">
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile"></div>
<div class="tile double"></div>
<div class="tile half"></div>
<div class="tile double"></div>
<div class="tile double"></div>
</div>
<!-- tile-col4 creates four columns -->
<div class="tile-col4">
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
</div>
<!-- tile-col5 creates five columns -->
<div class="tile-col5">
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile half"></div>
<div class="tile half"></div>
<div class="tile"></div>
</div>
</div>
You can find reference to all single tile style classes here.
Complete Code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/olton/Metro-UI-CSS/master/min/metro-bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/qnimate/QMetro/master/qmetro.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/olton/Metro-UI-CSS/master/min/metro.min.js"></script>
</head>
<body class="metro">
<h1>QNimate</h1>
<div class="tiles-group">
<div class="tile-col1">
<div class="tile half"></div>
<div class="tile half"></div>
<div class="tile half"></div>
<div class="tile half"></div>
<div class="tile double"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile double"></div>
</div>
<div class="tile-col2">
<div class="tile selected"></div>
<div class="tile double"></div>
<div class="tile"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile half"></div>
<div class="tile half"></div>
</div>
<div class="tile-col3">
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile"></div>
<div class="tile double"></div>
<div class="tile half"></div>
<div class="tile double"></div>
<div class="tile double"></div>
</div>
<div class="tile-col4">
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
</div>
<div class="tile-col5">
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile half"></div>
<div class="tile half"></div>
<div class="tile"></div>
</div>
</div>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/olton/Metro-UI-CSS/master/min/metro-bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/qnimate/QMetro/master/qmetro.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/olton/Metro-UI-CSS/master/min/metro.min.js"></script>
</head>
<body class="metro">
<h1>QNimate</h1>
<div class="tiles-group">
<div class="tile-col1">
<div class="tile half"></div>
<div class="tile half"></div>
<div class="tile half"></div>
<div class="tile half"></div>
<div class="tile double"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile double"></div>
</div>
<div class="tile-col2">
<div class="tile selected"></div>
<div class="tile double"></div>
<div class="tile"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile half"></div>
<div class="tile half"></div>
</div>
<div class="tile-col3">
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile"></div>
<div class="tile double"></div>
<div class="tile half"></div>
<div class="tile double"></div>
<div class="tile double"></div>
</div>
<div class="tile-col4">
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
</div>
<div class="tile-col5">
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile double"></div>
<div class="tile half"></div>
<div class="tile half"></div>
<div class="tile"></div>
</div>
</div>
</body>
</html>
Conclusion
This template is created using Metro UI CSS. But there are many other frameworks to create such kind of layouts. You can also use Bootmetro and Metro UI template.
