Microsoft has been very forthcoming when it come to application layout in Windows Store applications, and built the CSS appropriately in the starter templates for JavaScript Windows Store Applications.  The layout is based on heat map studies and focus groups that determined the optimal use of screen real estate and typography.  Figure 1 shows the layout guidelines and the typography sizes.

image Figure 1

When selecting one of the more complex project templates (the Grid, Split, Fixed Layout, or Navigation application templates), the required CSS and HTML pages are preconfigured to match the design guidelines. The problem is that the starter templates come with a lot of extra code that you might not need for your application design.

The Blank app template is my favorite starting point for WinJS applications because it allows me to control every aspect of my application.  However, it really is just a blank application. This means that the layout must be added manually.  Fortunately, the typography comes for free with the  ui-dark.css or ui-light.css packaged with the Windows Library for JavaScript that is referenced by default in every JavaScript Windows Store Application.

Typography

Achieving the expected typography is extremely easy, as long as you follow the accepted practices for HTML.  The headings (<h1> through <h3>) are styled with the correct font family (Segoe) and the correct sizes (42, 20, 11).  The next two headers tags (<h4> through <h5>) are also set at 11pt with diminishing font weights. The final header tag (<h6>) is set at 9pt and is used for tertiary information. Page headers should be set as <h1> elements, sub-headers as <h2>, and small sub-headers and main text should be set as <h3>, as the code in Listing 1 demonstrates and is displayed in Figure 2.

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8" /> 
 <title>SimpleLayout</title> 
 <!-- WinJS references --> 
 <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> 
 <script src="//Microsoft.WinJS.1.0/js/base.js"></script> 
 <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> 
 <!-- SimpleLayout references --> 
 <link href="/css/default.css" rel="stylesheet" /> 
 <script src="/js/default.js"></script> 
</head> 
<body> 
 <h1>42pt Header</h1> 
 <p></p> 
 <h2>20pt Subheader</h2> 
 <p></p> 
 <h3>11pt Body Text</h3> 
</body> 
</html>
Listing 1 – Setting Headers, Sub-headers, and Small Sub-Headers

image
Figure 2 – Headers, Sub-headers, and Small Sub-Headers Text

Non Header CSS Classes

In addition to the header HTML elements, the CSS files that ship with the Windows Library for JavaScript contain classes provide the same markup without using header tags.  The classes range from “win-type-xx-large” (42pt) to “win-type-xx-small” (9pt).  And example is shown in Listing 2, and the resulting is shown in Figure 3.

<div class="win-type-xx-large">42pt Largest Text</div> 
<p></p> 
<div class="win-type-x-large">20pt Secondary Text</div> 
<p></p> 
<div class="win-type-large">11pt Text</div> 
<p></p>
Listing 2 – Built in CSS classes for recommended typography

image 
Figure 3 – Text Using Header Elements and non Header text using built in CSS Classes for Typography

Handling Snapped State

Another advantage to using the built in classes for typography instead of creating your own is that the default style sheets also contain entries to change the fonts when the application is in snapped state.  Unfortunately, only header sizes one to three (<h1> - <h3>) and the the three largest win-types (win-type-xx-large – win-type-large) are handled, although it is easy enough to add the missing entries if you need them.

Page Layout

The recommended page layout isn’t built into the style sheets that ship with the WinJS library, but it is very easy to add to your project. The foundation for the layout is using the “display: –ms-grid” style element.  (If you need more information in the grid style, please refer to this post on MSDN.)

By using the –ms-grid layout mechanism, you can specify a combination of fixed width (to adhere to the guidelines) and relational widths (to adjust the real estate to accommodate the different devices available to the consumer.

Altering the default.html page

Presuming that your application will be using standard navigation with the main html page (default.html) acting as the target for all page navigation, the page can be separated into four divisions, starting with the <body> tag.  The body will be the container for the –ms-grid, dividing the page into two columns and three rows. The second column (120px from the left edge) will hold the app title (top row), the subtitle (second row), and the body (third row).  If you plan in placing a standard “back” button in the main page (as opposed to placing it in the the navigation bar), you will place it in the top row of the first column.  Applying the divisions to the labels created earlier in this post will create markup like the code in Listing 3.  

<body class="contentHost"> 
 <div class="appTitle"> 
 <h1>42pt Header</h1> 
 </div> 
 <div class="backButton"> 
 <button class="win-backbutton"></button> 
 </div> 
 <div class="appSubTitle"> 
 <h2>20pt Subheader</h2> 
 </div> 
 <div id="contentTarget" class="mainContent"> 
 <h3>11pt Body Text</h3> 
 <p></p> 
 <div class="win-type-xx-large">42pt Largest Text</div> 
 <p></p> 
 <div class="win-type-x-large">20pt Secondary Text</div> 
 <p></p> 
 <div class="win-type-large">11pt Text</div> 
 </div> 
</body> 
 
Listing 3 – Layout markup

Creating the CSS classes

The five CSS classes are shown in Listing 4.  The main class creates the –ms-grid and the columns and rows.  Columns or rows are defined by listing out the widths (heights) of the columns (rows), either in absolute or relative size. The “fr” in the sizing stands for “fractional values”.  (For more information on CSS sizing values, please refer to this article.) This is akin to the percentage values used in the past with web development.  At rendering, the engine first attempts to allocate all of the fixed space requirements, then divides the remaining space by the sum of all of the fractional units.  In the “contentHost” class listed in Listing 4, the grid has two columns, the first 120 pixels wide and the second uses up the remaining space.  There are three rows, the first two are 100 and 40 pixels high (respectively), and the final one uses all of the remaining space.  This gives us the grid as outlined in Figure 1.

The remaining classes define what row and column each element should be in, determines the alignment for the content, and then uses margins and height values to perfect the desired layout.

.contentHost 
{
 display: -ms-grid;
 -ms-grid-columns: 120px 1fr;
 -ms-grid-rows: 100px 40px 1fr;
}
.appTitle 
{
 height:62px;
 margin-top:38px;
 -ms-grid-column: 2;
 -ms-grid-row: 1;
 -ms-grid-row-align: end;
}
.backButton {
 height:40px;
 margin-top:60px;
 -ms-grid-column: 1;
 -ms-grid-row: 1;
 -ms-grid-row-align: end;
 -ms-grid-column-align: end;
 margin-right:10px;
}
.appSubTitle 
{
 height:30px;
 margin-top:5px;
 margin-bottom:5px;
 -ms-grid-column: 2;
 -ms-grid-row: 2;
 -ms-grid-row-align: end;
}
.mainContent 
{
 margin-top:5px;
 -ms-grid-column: 2;
 -ms-grid-row: 3;
}
Listing 4 – CSS for the recommended layout

The resulting page (as shown in Figure 4) adheres to the design guidelines with minimal effort. 

image

Summary

Although the more complex project templates for JavaScript Windows Store Applications already implement layout guidelines from Microsoft, those projects were created for very specific scenarios.  More often than not, the Blank Template is the best option for your project.  Unfortunately, the blank template is very blank, and doesn’t adhere to the guidelines.  By adding in the CSS classes from this post, all of your applications can meet the standards.


Japikse
About the Author

Phil Japikse

is an international speaker, a Microsoft MVP, ASPInsider, INETA Community Champion, MCSD, CSM/ CSP, and a passionate member of the developer community. Phil has been working with .Net since the first betas, developing software for over 20 years, and heavily involved in the agile community since 2005. Phil also hosts the Hallway Conversations podcast (www.hallwayconversations.com) and serves as the Lead Director for the Cincinnati .Net User’s Group (http://www.cinnug.org). You can follow Phil on twitter via www.twitter.com/skimedic, or read his personal blog at www.skimedic.com/blog.

 

Related Posts

Comments