Create An Interactive Metro Style Grid Dashboard

Since Windows 8 released it's first pictures of the new design, people have been going crazy over the metro style. People love it, it's modern, it's clean, it's simple and makes it really easy to use on mobile devices, especially on tablet devices.

windows8-metro

In 2013 it is going to be a trend that you will start seeing more websites applying this metro style to their designs. But for websites is this a good idea, does this styling work for different website designs.

In this tutorial we are going to create a metro style dashboard, to do this we are going to use a very useful jQuery plugin called gridster.

Gridster

Gridster will allow you to create a drag and drop multi-column grid. All the layout of the grid is taken care of by the plugin, all you have to do is define how many rows and columns each box will spread across. Then define the height and width of a single box and the plugin will work out how big each box has to be.

gridster.js

The best thing about this jQuery plugin is the drag and drop feature of the grid boxes, it allows your visitors full customisation on the layout of the different grid boxes. If you were to use this with Javascript cookies then you can save the layout on the user's computer so it will look the same every time they visit your site.

The first thing you need to do to create the metro style grid you need to download Gridster for free from the link below.

Gridster

Using Gridster

To use Gridster it's just like any other jQuery plugin, all you have to do is include it on the page and now you will have access to the gridster object.

Inside the gridster object is where we will define the options for the grid, this is where we can customise the widget margins, widget size, min rows, min cols, max height of widget, max width of widget.

The simplest version of using these options is to just define the widget margin and the size of a single widget. The plugin will then use these values to resize the grid to make sure it fits on the screen.

Below is the code that you can use to define a grid where a single widget is 150px x 150px with a 10px margin around the box.

<script src="src/jquery.gridster.js"></script>

<script type="text/javascript">
   jQuery(function(){

      jQuery(".gridster ul").gridster({
          widget_margins: [10, 10],
          widget_base_dimensions: [150, 150]
      });

  });

</script>

With the gridster Javascript attached to the list we can now create the HTML to use the Javascript.

The important part of using Gridster is to define 4 different attributes which will tell the plugin where to place the widgets and how big they are going to be.

  • data-row - Defines the starting row of the widget.
  • data-col - Defines the starting column of the widget.
  • data-sizex - Defines the amount of columns the widget will stretch across.
  • data-sizey - Defines the amount of rows the widget will stretch across.
<div class="wrapper gridster">
	  <ul>
	       	<li data-row="1" data-col="1" data-sizex="2" data-sizey="2"></li>
	       	<li data-row="1" data-col="3" data-sizex="2" data-sizey="3"></li>
	       	<li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
	       	<li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
	       	<li data-row="1" data-col="7" data-sizex="1" data-sizey="1"></li>
	       	<li data-row="1" data-col="8" data-sizex="1" data-sizey="2"></li>
        	<li data-row="2" data-col="5" data-sizex="1" data-sizey="1"></li>
	    	<li data-row="2" data-col="6" data-sizex="2" data-sizey="1"></li>
   	        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
	        <li data-row="3" data-col="2" data-sizex="1" data-sizey="1"></li>
	        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
	       	<li data-row="3" data-col="6" data-sizex="3" data-sizey="1"></li>
	  </ul>
</div>

The above HTML creates a grid of 12 boxes, each are positioned in different locations and have different sizes. This creates the start of the metro styling grid, all we have to do now is to style the boxes using the metro colours and add icons to the boxes.

Adding Metro Styling

There are a couple of colours that are always used on the metro styling, use the following CSS to define the font colours and the background colours.

.font-blue,       .font-blue-link a         {color: #2d89ef;}
.font-blueLight,  .font-blueLight-link a    {color: #eff4ff;}
.font-blueDark,   .font-blueDark-link a     {color: #2b5797;}
.font-green,      .font-green-link a        {color: #00a300;}
.font-greenLight, .font-greenLight-link a   {color: #99b433;}
.font-greenDark,  .font-greenDark-link a    {color: #1e7145;}
.font-red,        .font-red-link a          {color: #b91d47;}
.font-yellow,     .font-yellow-link a       {color: #ffc40d;}
.font-orange,     .font-orange-link a       {color: #e3a21a;}
.font-orangeDark, .font-orangeDark-link a   {color: #da532c;}
.font-pink,       .font-pink-link a         {color: #9f00a7;}
.font-pinkDark,   .font-pinkDark-link a     {color: #7e3878;}
.font-purple,     .font-purple-link a       {color: #603cba;}
.font-darken,     .font-darken-link a       {color: #1d1d1d;}
.font-lighten,    .font-lighten-link a      {color: #d5e7ec;}
.font-white,      .font-white-link a        {color: #ffffff;}
.font-grayDark,   .font-grayDark-link a     {color: #525252;}
.bg-blue       {background-color: #2d89ef;}
.bg-blueLight  {background-color: #eff4ff;}
.bg-blueDark   {background-color: #2b5797;}
.bg-green      {background-color: #00a300;}
.bg-greenLight {background-color: #99b433;}
.bg-greenDark  {background-color: #1e7145;}
.bg-red        {background-color: #b91d47;}
.bg-yellow     {background-color: #ffc40d;}
.bg-orange     {background-color: #e3a21a;}
.bg-orangeDark {background-color: #da532c;}
.bg-pink       {background-color: #9f00a7;}
.bg-pinkDark   {background-color: #7e3878;}
.bg-purple     {background-color: #603cba;}
.bg-darken     {background-color: #1d1d1d;}
.bg-lighten    {background-color: #d5e7ec;}
.bg-white      {background-color: #ffffff;}
.bg-grayDark   {background-color: #525252;}

Adding Icons To Your Grid Boxes

To add icons to the grid widgets we are going to use the CSS :before pseudo class to add a new element to the page and place a background image for each of the icons we want to add.

This will position the icon in the middle of the widget.

.gridster li a:before{ 
     display: block; 
     height:50px; 
     width:100%; 
     position: absolute; 
     top:35%; 
     left:0; 
     right:0;
}
.recent:before{ content:''; background:url('img/calendar.png') no-repeat center; }
.twitter:before{ content:''; background:url('img/twitter.png') no-repeat center; }
.facebook:before{ content:''; background:url('img/facebook.png') no-repeat center; }
.about:before{ content:''; background:url('img/about.png') no-repeat center; }
.snippets:before{ content:''; background:url('img/scissors.png') no-repeat center; }
.resources:before{ content:''; background:url('img/library.png') no-repeat center; }
.googleplus:before{ content:''; background:url('img/google.png') no-repeat center; }
.contact:before{ content:''; background:url('img/forward.png') no-repeat center; }
.articles:before{ content:''; background:url('img/folder_open.png') no-repeat center; }
.tutorials:before{ content:''; background:url('img/tutorials.png') no-repeat center; }
.pinterest:before{ content:''; background:url('img/pinterest.png') no-repeat center; }
.archives:before{ content:''; background:url('img/calendar.png') no-repeat center; }

Adding Text To The Bottom Of The Box

To add text to the bottom of the page we can use the CSS :after pseudo class to add content to the widget.

The benefit of using the pseudo classes to add content to the widget so that we only have to define the CSS class to the grid widget and it will be presented with both the icon and the content.

.gridster li a:after{ 
     position: absolute; 
     bottom: 5px; 
     left:0; 
     right:0; 
}

.recent:after{ content:'Recent Articles'; }
.twitter:after{ content:'Twitter'; }
.facebook:after{ content:'Facebook'; }
.about:after{ content:'About'; }
.snippets:after{ content:'Snippets'; }
.resources:after{ content:'Resources'; }
.googleplus:after{ content:'Google Plus'; }
.contact:after{ content:'Contact'; }
.articles:after{ content:'Articles'; }
.tutorials:after{ content:'Tutorials'; }
.pinterest:after{ content:'Pinterest'; }
.archives:after{ content:'Archives'; }

That's all you need to create the metro style grid, just by using the gridster jQuery plugin and some metro styling.

Have a look at the demo to see what this will create.

Demo

Advertise here

Comment