QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads 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.

Oct 31, 2014Narayan Prusty
Full Screen Scrolling with Page Piling Effectnpm Tutorial For Non Node.js Developers
Comments: 1
  1. don al vito
    6 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 Cancel 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`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image7 years ago 1 Comment Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Basic Template
  • Tiles Group and Columns
  • Complete Code
  • Conclusion
Related Articles
  • Create a Drag and Drop Page Builder for WordPress
  • Full Screen Scrolling with Page Piling Effect
  • Facebook Style Face Detection and Tagging with JavaScript
  • Number Counter Animation using Javascript
  • Responsive Typography Techniques
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license