Home Home Creating Windows Metro Style Layout for Websites

Creating Windows Metro Style Layout for Websites

Screen Shot 2014-10-31 at 7.19.11 pm

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>

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>

You can find reference to all single tile style classes here.

Complete Code

View Demo

<!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>

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.

Narayan Prusty
Full Screen Scrolling with Page Piling Effectnpm Tutorial For Non Node.js Developers
Comments: 1
  1. 2 years ago

    How can i create one like this:iamwindows.com.How can i grab html and css codes from this page.

    ReplyCancel

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image3 years ago 1 Comment Web Development
Share this
Related Articles