In this article we will see how to use Microsoft Blend for designing Metro style applications using HTML5 and CSS3. We will see the different parts of Blend which you can use for designing the Metro style applications.
Please note that the purpose of this demonstration is to give you an overview of Blend for Visual Studio 2012 and not to show you a production quality UX design.
Blend for Visual Studio has its lineage in the Expression Blend and Expression Studio suite of tools targeted for Designers. However starting with VS2012, Blend is bundled with Visual Studio. When you install Visual Studio 2012, you will find the option for installing Blend for Visual Studio.
Once installed, start the Blend tool and create a new “New Project”. I’ve named it “OnLineShoppee” and it uses the “Blank App” project template.
Once the project is ready, you will see the default set of tool windows laid out for a Windows 8 style project. Let’s take a closer look at the tool windows.
The Projects Window
This window lists out all the items under your project. It is similar to the Solution Explorer in Visual Studio.
The items under your project will change based on the choice of the template which you are using while creating the project. We have chosen the Blank App template, so we are getting the ‘CSS’ , ‘images’ and ‘js’ folder along with “default.html ” page.
The Assets Window
You can use the drag and drop functionality and design the screens as per your prototype.
The Device Window
The Device Window allows us to view our page layout in different ways like “Landscape”, “Filled”, “Snapped” and “Portrait”. It also allows us to use different scale modes. This helps us develop and test our app with different devices that have different view characteristics (like dpi and resolution) so that our page will fit in different devices.
Style Rules Window
This window allows us to see existing CSS files structure in a hierarchical view. It also helps us to create new external style sheets or add style with new media queries
1. Live DOM Window – Live DOM window displays all the contents of our HTML document in a tree view structure as shown below –
2. HTML Attributes Windows – This window allows us to set different properties/attribute values of a selected HTML Element as shown below – (I have selected an Image Element from Live DOM window).
3. CSS Properties – This window allows us to change the style of a selected element class or allows us to create a new class in the existing CSS file or allows us to create new style rule for a CSS class as shown below –
Now as we have seen different windows which we can use for designing Metro Style Apps, let’s start designing our application. To start off with our design, we will first add a new CSS file in our project and we will continue to use the same CSS file throughout the project. If you look at our project template, it comes by default with a default style sheets as “ui-dark.css” and “default.css”. The “ui-dark.css” is by default applied to our default.html page as shown below –
If you try removing it, you will see a plain blank page. The “ui-dark.css” file comes with default theme. Let’s test it with a few HTML tags. Let’s add a “Button” in our page and see how that button appears in design view.
Now if you try to position your button on the screen anywhere else, you will not be able to do so. Because the button style is static. In that case, you will have to change the “Position” property of the button by going to CSS Properties window and setting it to “Absolute, Relative or Fixed” as shown below –
Likewise you can test some HTML tags for the “ui-dark.css” file styles.
Let’s add our own CSS file which we will use to design the layout of our screen. To add the new style sheet, go to “Style Rules” window and add a new CSS file with the name “ui-onlineshop” as shown below –
If you observe our new CSS file, it’s completely blank. It does not contain anything apart from blank body. If you switch back to default.html source code, you will see our style sheet has been automatically referenced in the same. Now let’s go to our “Live DOM” window and delete the Paragraph tag which resides under body tag. After this step, let’s select a Body tag from “Live DOM” and set its Display property to “-ms-grid” from CSS Properties window as shown below –
As soon as you set the Display property of our body tag to “-ms-grid”, you can start adding the rows and columns in to our grid as shown below –
For our demonstration, we will create a layout with one column and four rows. First row is for logo and title of the site. Second row is for description. Third row is for our main content. And the last row is for our footer.
Now let’s add an image tag in our header and set its position property to “Absolute”. Also add “h1” tag with the title “My Online Shoppee site”. Your header should look like below –
Now let’s add “h2” tag in our second row where we will add a description about our page. The description should be like “Mega OnLine Shopper’s Stop!!”. Now let’s add”h2” tag into our last row which is the footer and use a nice footer text as per your convenience.
So as of now, our header, description and footer are ready. Well done! Now comes the major part of our page where we have to display the images of the products we want to sell. So let’s first add a “Grid” from “Assets” window and add 4 rows, 3 columns. Then add an image control into each cell of our grid as shown below –
Now if you see, my images are too big to fit into my grid cell. So, let’s add a new “Style Rule” in our “Style rule” window and name it “img”. Then set its height and width to 200px by 300px. Now observe the layout.
As you can see, by using various options in Blend, you can easily style your web pages in Metro style. This is completely dedicated to designers where designers can work with HTML 5 and CSS 3.
In this article, we have seen how to use Blend for Visual Studio 2012 for designing Metro Style applications using various options provided by Blend as a designer’s tool.