HTML and CSS Reference
FIGURE 6-2 The files that form the TodoList project.
The References folder contains the list of libraries required to compile the application. In this case,
the only library you need is the by-now-familiar WinJS library.
The Css folder contains the style sheets for styling the various HTML pages you use in your
application. You can expect to have one CSS file per each page you add to the project.
The Images folder is the repository for all image files you need. This includes images you display to
the user that are part of the interface, as well as images required to integrate the application into the
Windows 8 and Windows Store environments. Table 6-1 explains what each of the . png image files in
Figure 6-2 are used for.
TABLE 6-1 Purpose of the images in the default project template
This is the image that appears in the tile that is reserved for the application in the Start
screen. You can provide this image in either .png or .jpg format. The recommended
size is 150 x 150 pixels. Windows usually overlays the name of the application onto the
image; so you might want to consider not including the application's name in the image.
This is the image used to represent the application in search results. The format can be
either .png or . jpg , and the recommended size is 30 x 30 pixels.
This is the image displayed for a relatively short period of time while the application
loads after having been launched by the user. The format can be either . png or . jpg , and
the recommended size is 620 x 300 pixels.
This the image used to represent the application in the Windows Store. The format can
be either . png or . jpg , and the recommended size is 50 x 50 pixels.
You may wish to provide additional images as well, such as a WideLogo.png image, to provide a
larger logo file—up to 310 x 150 pixels. Finally, the BadgeLogo.png file is a small image (usually
33 x 33 pixels) displayed on the Lock screen of a Windows 8 device to identify pending notifications
from your application.