Create the feature containers

The Shell creates and manages the containers our feature modules will use. Our chat slider container, for example, will follow popular convention and be anchored on the bottom right of the browser window. The Shell is responsible for the slider container, but won’t manage the behavior inside of the container—that’s reserved for the chat feature module, which we’ll discuss in chapter 6.

Let’s place our chat slider in a layout that’s relatively complete. Figure 3.3 shows a wireframe of the containers we’d like to see.

Figure 3.2 Obligatory

“hello world” screenshot

Body Logo

Content

Modal

Chat slider Footer

search Sign-in / account slider

Navigation Header

Figure 3.3 Application containers wireframe

69 Create the feature containers

Of course, this is only a wireframe. We need to convert this into HTML and CSS. Let’s discuss how we might do that.

3.3.1 Pick a strategy

We’ll develop the HTML and CSS for our feature containers in a single-layout document file at spa/layout.html. Only after we’ve tweaked our containers to our liking will we move the code to the Shell’s CSS and JavaScript files. This approach is usually the fastest and most efficient means to develop the initial layout because we can pro- ceed without worrying about interactions with most other code.

First we’ll write the HTML, and then later we’ll add the styles.

3.3.2 Write the Shell HTML

One great feature of HTML5 and CSS3 is that we really can separate styling from the content. The wireframe shows the containers we want and how they’ll be nested. This is all we need to write the HTML for our containers with confidence. Let’s open our layout document (spa/layout.html) and enter the HTML shown in listing 3.6:

<!doctype html>

<html>

<head>

<title>HTML Layout</title>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

Now we should validate the HTML to ensure it’s without error. We like to use the ven- erable Tidy tool, which can find missing tags and other common HTML errors. You can find Tidy online at http://infohound.net/tidy/, or download the source at http:

//tidy.sourceforge.net/. If you’re using a Linux distribution like Ubuntu or Fedora, Tidy is probably readily available in the standard software repositories. Now let’s give these containers some style.

Listing 3.6 Create HTML for the containers—spa/layout.html

Nest the logo, the account settings (acct), and the search box inside of the head container.

Place the navigation (nav) and content containers inside the main container.

Create a footer container.

Anchor the chat container to the bottom right of the outer container.

Create a modal container that floats above other content.

3.3.3 Write the Shell CSS

We’ll write our CSS to provide a liquid layout where the width and height of our content will adjust to fill the browser window at all but the most extreme sizes. We’ll give our feature containers background colors so we can easily see them. We’ll also avoid any borders, because they can change the size of the CSS boxes. This introduces unwanted tedium into our rapid prototype process. Once we’re happy with the pre- sentation of our containers, we can return to add borders as necessary.

Let’s add the CSS to the <head> section of our layout document (spa/layout.html). We can place it right after the spa.css stylesheet link as shown in listing 3.7. All changes are shown in bold:

...

<head>

<title>HTML Layout</title>

<style>

.spa-shell-head, .spa-shell-head-logo, .spa-shell-head-acct, .spa-shell-head-search, .spa-shell-main, .spa-shell-main-nav, .spa-shell-main-content, .spa-shell-foot, .spa-shell-chat, .spa-shell-modal {

position : absolute;

}

.spa-shell-head { top : 0;

left : 0;

right : 0;

height : 40px;

}

.spa-shell-head-logo { top : 4px;

left : 4px;

height : 32px;

width : 128px;

background : orange;

}

.spa-shell-head-acct { top : 4px;

right : 0;

width : 64px;

height : 32px;

Listing 3.7 Create CSS for the containers—spa/layout.html Liquid layouts

As our layout grows more complex, we may need to use JavaScript to provide its liquidity. Often a window resize event handler is used to determine the browser window size and then recalculate and apply new CSS dimensions. We illustrate this tech- nique in chapter 4.

71 Create the feature containers

background : green;

}

.spa-shell-head-search { top : 4px;

right : 64px;

width : 248px;

height : 32px;

background : blue;

}

.spa-shell-main { top : 40px;

left : 0;

bottom : 40px;

right : 0;

}

.spa-shell-main-content, .spa-shell-main-nav { top : 0;

bottom : 0;

}

.spa-shell-main-nav { width : 250px;

background : #eee;

}

.spa-x-closed .spa-shell-main-nav { width : 0;

}

.spa-shell-main-content { left : 250px;

right : 0;

background : #ddd;

}

.spa-x-closed .spa-shell-main-content { left : 0;

}

.spa-shell-foot { bottom : 0;

left : 0;

right : 0;

height : 40px;

}

.spa-shell-chat { bottom : 0;

right : 0;

width : 300px;

height : 15px;

background : red;

z-index : 1;

}

.spa-shell-modal {

margin-top : -200px;

margin-left : -200px;

top : 50%;

left : 50%;

width : 400px;

height : 400px;

background : #fff;

border-radius : 3px;

z-index : 2;

} </style>

</head>

...

When we open our browser document (spa/layout.html), we should see a page that looks amazingly similar to our wireframe, as shown in figure 3.4. When we resize the browser window, we can see the feature containers also resize as needed. Our liquid layout does have a limitation—if we make the width or height less than 500 pixels, scrollbars are shown. We do this because we can’t squeeze our content below this size.

We can use Chrome Developer Tools to try out some of our newly defined styles that aren’t used in the initial display. For example, let’s add the class spa-x-closed to the spa-shell-main container. This will close the navigation bar on the left of the page.

Removing the class will return the navigation bar, as shown in figure 3.5.

Definition, a little history, and some focus

Advanced variable hoisting and the execution context object