Windows 8 Start ScreenHow do you take the HTML you know and love and give it a Metro look and feel for Windows 8 apps?

The Windows 8 team put up an interesting blog post this week about how you take existing HTML controls and style them to look metro. You can read the full blog post here, but I’ll highlight a few of the key points to get you started.

Don’t forget if you are working on an app, or thinking of starting an app we have hackathons across Canada in August:

  • Vancouver | Friday August 3rd, 2012 | 8:30 AM – 5:00 PM | Simon Fraser University, Segal Graduate Building
  • Ottawa | Friday August 10th, 2012 | 8:30 AM – 5:00 PM | Algonquin College
  • Toronto | Friday August 10th, 2012 | 8:30 AM – 5:00 PM | Ryerson University, Ted Rogers School of Management
  • Montreal | Friday August 17, 2012 | 8:30 AM – 5:00 PM | Concordia University

 

HTML in Windows 8

Now let’s look at some HTML! Let’s take a look at the perennial favourite HTML control: <button>

a simple button control will actually look different in a Windows 8 native app than it will in a browser like IE10.

Let’s say you define a button control using HTML and render that same code in IE10 and Windows 8

<button>Windows 8 Rocks!</button>

Button by default in Internet Explorer 10
Button in IE10

Button in Windows 8 Metro style apps
Button in Windows 8 Metro app

Why is it different? Windows 8 has default metro style visuals for all the HTML controls via two out of the box default style sheets that are part of the Windows Library for JavaScript (WinJS) and are included in the Visual Studio templates.

New HTML Control infrastructure

There’s more to it than just a default CSS file.

They’ve reworked the ways controls are built so you have more flexibility when styling the controls. Most browsers render controls using previously generated images and when you apply a style to the control, the browser discards the hardcoded image, re-renders the control in a baseline look and then applies the style you requested on top of that baseline. You can’t style directly onto new styles.

Windows 8 does not provide the original look of HTML controls using a hardcoded image, instead the HTML controls are rendered using vector based primitives, CSS, so you can directly style on top of the control. You can learn more about styling your controls in this Quickstart: styling controls (Metro style apps using JavaScript and HTML) 

It’s pretty cool what you can do! Here’s a couple of examples of styling a checkbox control.

 

Checkbox

The Windows 8 team blog post goes into a lot more detail, explaining best practices for making sure your buttons scale well across different screen sizes, handling touch, accessibility features, and more! Could that last website you built work as a Windows 8 app?

Imagine It! Build It! Live it!