HTML and CSS Reference
The World of MeTro Apis
You have access to several different APIs when writing Metro apps. There is the Windows
API, which is shared across all Metro apps, regardless of the language used to write
standard Document Object Model API, which you can use to navigate the HTML markup
in the Metro world, and your web app development knowledge will be very useful as you
start your development projects.
For the most part, the WinJS API is where you will spend most of your development time,
and this is my focus for the first part of this topic. The Windows API comes into its own
when you want to integrate your app into the wider Windows 8 platform, which I describe
in Chapters 4 and 5 .
he ui-dark.css file contains the styles that Windows 8 uses for Metro applications, tai-
lored for use with a dark color scheme (meaning white text on a dark background). There is a
corresponding file called ui-light.css that you can use if you want to have dark text on a light
background instead. The CSS files provide styles for all of the common HTML elements so that
they fit into the Metro visual theme and are consistent with Metro apps written in other lan-
guages, such as C#/XAML. You can customize these styles by overriding them in your applica-
tion, but for the most part, it is important to retain consistency with other Metro apps.
■ It is worth opening and reading these files. One of the nice things about developing Metro
apps with web technologies is that you can read the source code for the WinJS library and the CSS
files. You can't edit the files, but you can see what is going on and, most usefully, set breakpoints in
the WinJS code when using the debugger (which I demonstrate later in this chapter).
All three of these references are added to the default.html file automatically when Visual
Studio creates the project. Visual Studio also adds references to the default.css and default.js
can rename or replace these files as you see fit. I will stick with the defaults to keep things simple.
My additions to default.html are shown in bold in the listing. I have added a div element
whose id is contentGrid . This will be the container for most of the content in my example app,
and it contains three other div elements: leftContainer , topRightContainer , and bottom-
RightContainer . I'll add content to these elements as we proceed through the topic.
Class names that begin with win-type are defined in ui-dark.css and are used to set the
size of text in a Metro application. There are a series of styles that relate to gradations in text
size from largest to smallest: win-type-xx-large , win-type-x-large , win-type-large , win-
type-medium , win-type-small , and win-type-x-small . There are two other win-type styles:
win-type-ellipsis uses an ellipsis ( … ) when text doesn't fit into its parent element, and win-
type-interactive makes an element resemble a link. In default.html , I have used the win-
type-xx-large style to create placeholder headers in the layout.