How 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:
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 in IE10
Button in Windows 8 Metro app
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.
It’s pretty cool what you can do! Here’s a couple of examples of styling a checkbox control.
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!