Microsoft's Windows 8 may not be success story as far as user experience is concerned, but it certainly introduced the world with a new design concept: Metro.

Since its emergence in 2012, it's become extremely popular with its flat, simple, and colorful looks. In this article, we're going to see how we can build a blog's homepage with the design concept of Metro.

How Do You Define the "Metro" Design Language?

Metro is the codename of Microsoft's latest style guide, or "design language". Although its simple, minimalistic approach was introduced in some of Microsoft's software (like Windows Phone 7 and Windows 8), web and graphic designers quickly embraced and incorporated into their designs.

It wouldn't be controversial to say that along with Google's design concepts, Metro helped the world wide web create the flat design trend.

Although Wikipedia defines Metro as "a typography-based design language", we might argue that it's more than that. In my opinion, there are three important characteristic features of the Metro style:

• Simplicity: With simple square & rectangular boxes and proper usage of white space, Metro's main characteristic feature is simplicity. Most graphic and web designers already had a tendency to simple design, and Metro's ultra-minimalism was quickly caught on.
• Typography: Typography became a huge element in web design, especially after 2010. (I'm keeping Swiss designers apart, by the way - those guys knew it all along!) Microsoft's bold move of putting forward typography against Apple's skeuomorphism was happily accepted by the design communities, making Metro a success.
• Colorfulness: One of Metro's greatest achievements, as far as I'm concerned, is the use of matte colors. The web was agonizing with silver/chrome gradients, glass effects and exaggeratively bright colors; and when Metro came along, web design communities swiftly held on to its calm, "flat" colors.

More than these features, Microsoft defines Metro with five principles:

1. Pride in craftsmanship
2. Fast and fluid
3. Authentically digital
4. Do more with less
5. Win as one

A tiny note on the name "Metro": Due to copyright issues, Microsoft had to change the name of this design language to "Microsoft Design Language" or "Modern Design", and the applications are called "Modern Apps" instead of "Metro Apps"; however, the name stuck among designers. This article will continue defining the design language with its codename "Metro", but keep in mind that the design language is officially called Modern Design.

Introducing Isotope: A JavaScript Plugin for Magical Layouts

To achieve a Metro-style homepage layout in a WordPress blog, we're going to utilize a fantastic JavaScript plugin called Isotope. The plugin's layout options are going to help us build a fancy, responsive Metro homepage. (The plugin works as a jQuery plugin, too, but we're going to go with vanilla JavaScript.)

In this tutorial, we're going to be using a beta version of Isotope - version 2.0.0-beta.8, to be exact. It's different than version one, but it should behave the same in the stable releases of version two in the future.

The PHP & HTML

If we were doing an HTML tutorial, I would paste the following code:

<div class="container js-isotope" data-isotope-options="{ "itemSelector": ".item", "layoutMod": "fitRows" }">
<div class="item item-blue"><a class="post-title" href="#link#">A Post About Isotope, Maybe?</a></div>
<div class="item item-double item-purple"><a class="post-title" href="#link#">WordPress is the Best!</a></div>
<div class="item item-teal"><a class="post-title" href="#link#">What Do You Think About Me?</a></div>
<div class="item item-red"><a class="post-title" href="#link#">About the Sochi Olympics Event</a></div>
<div class="item item-green"><a class="post-title" href="#link#">Help!</a></div>
<div class="item item-double item-orange"><a class="post-title" href="#link#">I Can't Come Up with Many Post Titles!</a></div>
<div class="item item-teal"><a class="post-title" href="#link#">HTML5 Rocks, I Tell Ya!</a></div>
<div class="item item-darkpurple"><a class="post-title" href="#link#">Anybody Remember Caesar 3?</a></div>
<div class="item item-skyblue"><a class="post-title" href="#link#">I Love Table.</a></div>
<div class="item item-blue"><a class="post-title" href="#link#">I Love Lamp.</a></div>
<div class="item item-double item-orange"><a class="post-title" href="#link#">I Don't Always Make Demos on CodePen...</a></div>
<div class="item item-double item-red"><a class="post-title" href="#link#">...But When I Do, They're Just Beautiful!</a></div>
</div>

But we need WordPress code! Here's how we do it in WordPress:

<?php
if( have_posts() ) : while( have_posts() ) :
  the_post();
  $item_class = "item";
  $double_meta = get_post_meta( get_the_ID(), 'metro-double', true );
  if( 'yes' == $double_meta ) {
    $item_class .= ' item-double';
  } $item_colors = array( 'teal', 'blue', 'purple', 'darkpurple', 'red', 'orange', 'green', 'skyblue' );
  $item_class .= ' item-' . array_rand( $item_colors ); ?>
  <div class="container js-isotope" data-isotope-options="{ "itemSelector": ".item", "layoutMode": "fitRows" }">
  <div class="<?php echo $item_class; ?>"></div>
</div>
<?php endwhile; else : ?>
<div class="container">
  <div class="item item-double item-green">
  <?php _e('Sorry, no posts matched your criteria.'); ?></div>
</div>
<?php endif; ?>

A few notes on the code:

• Notice the js-isotope class and the data-isotope-options attribute in our container DIV. These help us initiate the Isotope plugin without any JavaScript code.
• If you want one of your posts to stand out, you can double its width by adding a post meta with the key metro-double and the value yes.
• You can add more colors to the array (and the CSS code). I used the colors that I found here.

The CSS

*, *:before, *:after {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
body {background:#EEE;font-family:Segoe UI,Arial,sans-serif;}

.container {width:50em;margin:1em auto;padding:.1999em;}

.item {width:12em;height:12em;background-color:white;float:left;margin:.2em;background-size:cover;padding:1em;}
.item-double {width:24.4em;}

.item-teal {background-color:#008299;}
.item-blue {background-color:#2672EC;}
.item-purple {background-color:#8C0095;}
.item-darkpurple {background-color:#5133AB;}
.item-red {background-color:#AC193D;}
.item-orange {background-color:#D24726;}
.item-green {background-color:#008A00;}
.item-skyblue {background-color:#094AB2;}

.item-teal:hover {background-color:#00A0B1;}
.item-blue:hover {background-color:#2E8DEF;}
.item-purple:hover {background-color:#A700AE;}
.item-darkpurple:hover {background-color:#643EBF;}
.item-red:hover {background-color:#BF1E4B;}
.item-orange:hover {background-color:#DC572E;}
.item-green:hover {background-color:#00A600;}
.item-skyblue:hover {background-color:#0A5BC4;}

.item a, .item .not-found {color:#FFF;font-size:2em;line-height:1.3;text-decoration:none;display:inline-block;width:100%;height:100%;}

@media only screen and (max-width:50em) {
.container {width:100%;margin:0;}
}

The JavaScript

You know what? We don't need any JavaScript code! Since we added the class name .js-isotope to our container DIV and provided Isotope's options with the data-isotope-options attribute, we don't have to do anything else. Isotope just finds the .js-isotope class, gets the options and runs itself.

Neat, right?

The Result

The result below is actually an HTML output, but the same will apply when you put the WordPress code above into your theme:

Final Words

A Metro-like interface isn't hard to mimic in web design, and as you can see, it looks beautiful. (You can do even better than this by improving my code!)

In addition to that, Isotope is a pretty nice plugin for us to provide a responsive layout to our visitors. It actually has even more features like sorting and filtering items but naturally, we didn't need those while building a homepage for our blog.

What do you think about the Modern Design Language? What do you think about Isotope? What do you think about this tutorial? Share your comments below!