HTML and CSS Reference
In-Depth Information
to access different regions of the app. Setting the cumulative width to 120 percent sets
up that behavior, which you will be able to see when I run the example web app later in
this chapter.
For individual items, you specify which row and column they should appear in, like this:
#leftContainer {
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
The -ms-grid-column and -ms-grid-row properties locate an element in the grid. Both
properties are 1-based, meaning that locating an element in column 1 and row 1 will
place it in the top-left position in the grid. By default, elements occupy one grid square,
but you can change this using the -ms-grid-row-span and -ms-grid-column-span
properties. In the example, I have made the leftContainer element span two rows. The
only other property of interest is -ms-grid-column-align , which I have not used in my
example. This property specifies the alignment of an element within a grid square and
can be set to start , end center , or stretch . If you are using a left-to-right language
such as English, the start and end values left- and right-justify the element. The
center value centers the element, and the stretch value resizes the element so that
it completely fills its allocated space. You can create some very complex layouts using
the grid properties. See the full specification at for details,
bearing in mind that this is not yet a ratified standard.
Exploring the default.js File
The last of the important files that Visual Studio has created is default.js , which is referenced in
default.html using a standard script element. You can see the content of this file in Listing 1-4.
Listing 1-4. The Content of the default.js File
// For an introduction to the Blank template, see the following documentation:
(function () {
"use strict";
var app=WinJS.Application;
app.onactivated=function (eventObject) {
if (eventObject.detail.kind ===
Windows.ApplicationModel.Activation.ActivationKind.launch) {
if (eventObject.detail.previousExecutionState !==
Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
Search WWH ::

Custom Search