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
www.w3.org/TR/css3-grid
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:
// http://go.microsoft.com/fwlink/?LinkId=232509
(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