Ultimate Guide to Metro UI CSS 2.0 Style for Beginners

Posted on

metro UI CSS Thanks to Windows 8 that inspired many designer with Metro UI. Formerly, Metro UI known as the Flat Simple UI. And the Microsoft has taken Metro UI to the simple and elegant OS. We salute.

Then came the Metro UI CSS style, ie a complete CSS with various elements. You just use CSS to create a wide range of web design that you want. Metro UI CSS made ​​by Pimenov Sergey from Ukraine. We are proud of you. Metro UI based on Bootstarp CSS, a CSS framework issued by twitter. In essence, the Metro UI CSS will be easier for you to make the design as windows 8. Maybe, you can create a wp theme with metro UI or blogger templates with the metro UI.

This post will guide you in detail, how to design web with the metro UI CSS. This tutorial is intended for beginners.

How to Instal Metro UI CSS

First, you can download and store it into your hardrive or your hosting. You can download Metro UI CSS through this link, make sure you have downloaded latest version, check at github now. After downlod is complete, please creating a simple HTML document, like this.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/metro-bootstrap.css">
        <script src="js/jquery/jquery.min.js"></script>
        <script src="js/jquery/jquery.widget.min.js"></script>
        <script src="js/metro/metro.min.js"></script>
    </head>
    <body class="metro">
        ... markup page ...
    </body>
</html>

You just need add few lines of code, see the snippet code above.  Like this.

<link rel="stylesheet" href="css/metro-bootstrap.css">
        <script src="js/jquery/jquery.min.js"></script>
        <script src="js/jquery/jquery.widget.min.js"></script>
        <script src="js/metro/metro.min.js"></script>

With 4 line of code, you was successfully instaled metro UI CSS. Then, look forward for another action.

Creating Grid System with Metro UI CSS

Core of Metro UI CSS is grid, because metro is grid. So, we must pay attention for grid system.

<div class="grid show-grid">
                        <div class="row">
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                            <div class="span1">span1</div>
                        </div>

                        <div class="row">
                            <div class="span2">span2</div>
                            <div class="span3">span3</div>
                            <div class="span7">span7</div>
                        </div>

                        <div class="row">
                            <div class="span12">span12</div>
                        </div>
                    </div>

And show like this

grid system

Its very easy to creating grid. Less code but beautiful theme.

Creating a Simple Form

formCreating Form is very easy, You only need to define what types of forms, eg for input email, password, and select others. Metro UI will solve it for you.

<form>
<fieldset>
 <legend>Legend</legend>
 <label>Label name</label>
 <div class="input-control text" data-role="input-control">
 <input type="text" placeholder="type text">
 <button class="btn-clear" tabindex="-1"></button>
 </div>
 <label>Label name</label>
 <div class="input-control password" data-role="input-control">
 <input type="password" placeholder="type password" autofocus>
 <button class="btn-reveal" tabindex="-1"></button>
 </div>
 <div class="input-control checkbox" data-role="input-control">
 <label>
 <input type="checkbox" checked />
 <span class="check"></span>
 Check me out
 </label>
 </div>

 <div>
 <div class="input-control radio default-style" data-role="input-control">
 <label>
 <input type="radio" name="r1" checked />
 <span class="check"></span>
 R1
 </label>
 </div>
 <div class="input-control radio default-style" data-role="input-control">
 <label>
 <input type="radio" name="r1" />
 <span class="check"></span>
 R2
 </label>
 </div>
 </div>

 <input type="submit" value="Submit">
</fieldset>
</form>

 Tiles Component

Tiles are the representation of your app or sub module. The content shown on your tile can, and ideally should, change regularly, especially if your tile can communicate new, real-time information to your user. Tiles can show a combination of text and images, and a badge to show status. Tile is a block object and can be placed in any container.

Size of Tiles

tiles

<div class="tile half"></div>
<div class="tile"></div>
<div class="tile double"></div>
<div class="tile triple"></div>
<div class="tile quadro"></div>

Navigation Bar Component

We can easily a complex navigation bar with small of code.

<nav class="navigation-bar dark">
    <nav class="navigation-bar-content">
        <item class="element">...</item>
        <item class="element-divider">...</item>
        ...
        <item class="element">...</item>
    </nav>
</nav>

You can change <nav> tag to <a>, <div> or <span>. Then you can create fix top or bottom navigation, just like this

<nav class="navigation-bar fixed-top">...</nav>
<nav class="navigation-bar fixed-bottom">...</nav>

Or change colour of navigation bar, with this code

<nav class="navigation-bar dark">...</nav>
<nav class="navigation-bar light">...</nav>
<nav class="navigation-bar white">...</nav>

See example below

navigation bar

Button set Component

Button is important component for every framework. Metro UI CSS completing with button component. We easy to creating button.

button

<button class="button large primary">Large</button>
<button class="button success">Default</button>
<button class="button small info">Small</button>
<button class="button mini danger">Mini</button>

To change size of button you can use build-in classes: large, small and mini.
For additional styling button you can use predefined button subclasses: .default, .primary, .info, .success, .warning, .danger, .inverse and .link or build-in color classes for background and foreground.

Window Modal

Pop up or window modal is way to inform to your visitor, or its an alert. Let go to creating window modal.

window modal

<div class="window">
    <div class="caption">
        <span class="icon icon-windows"></span> //window icon, also you can use img tag
        <div class="title">Window caption</div> // window title
        <button class="btn-min"></button> // minimize button
        <button class="btn-max"></button> // maximize button
        <button class="btn-close"></button> // close button
    </div>
    <div class="content">
        Window content
    </div>
</div>

 

Incoming search terms:

  • metro ui css tutorial
  • metro ui tutorial
  • how to Metro UI CSS
  • metro ui css documentation
  • metro ui css examples
  • sample code of metroui
Gravatar Image
Web developer, big fan of CakePHP, loving wordpress soo much. You can found him on Google+ and Facebook. Dont forget to follow him on Twitter.