Table layout

Table layout is actually quite flexible and effective and I would imagine that a number of site designers are still relying on it today. I also bet those designers are keeping the fact a secret from their peers, because tables are by no means the current recommendation. They’re not recommended because they’re cross purpose to maintaining a separation of concerns and because they’re not adaptable - two core principles in web design.

Remember that HTML defines the structure and CSS defines the style? The HTML allows you to define the elements in use and their hierarchical relationship to each other, but should say nothing of the positioning of those elements. Layout, rather, is a style and it belongs in CSS. Putting your layout into your HTML in the form of tables may get the job done, but it results in a site that is not capable of being as adaptable as modern apps and devices need it to be.

Defining layout with a table makes certain assertions like “this content must be below this content” or “this content must be contained in this area,” and they lock the site into those assertions.

Listing 7-1 shows a table that may very well define the layout of a document.

Listing 7-1.  The table element used as layout

<!-- HTML snippet -->
<table>
    <tr><td rowspan="3" id="nav"></td><td rowspan="3"></td><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td colspan="3" id="footer"></td></tr>
</table>
  
/* CSS snippet */
table{
    width:1100px;
    height: 560px;
    border-collapse: collapse;
}
  
table td {
    border: 2px solid black;
    padding: 5px;
}
  
#nav {
    width:180px;
}
  
#footer {
    height:80px;

}

Display and Position

If tables are taboo in layout, then what? The next more elegant solution is to use div elements with display and position properties to manually send them where they should go on the screen. A div (short for division) is an abstract element that is generally meant to separate bits of content from one another. It’s rendered in block mode which means that preceding and succeeding elements render above and below it. This is in contrast to inline elements, which flow like text in a word processor.

These div elements can be formatted and positioned with styling properties, which makes them a good replacement for tables in layout. They are ubiquitous on the web today, but that’s not to say they are a delight for a developer to deal with! The techniques that have been available for using div elements as layout have brought their own pains and that’s why web developers everywhere are excited about the advent of new formatting capabilities that are either here already or coming soon. Nevertheless, we’ll discuss classic div positioning in good detail here, because it’s foundational and because you’re sure to see it in the “wild.”

The display property determines how its target is going to be displayed and becomes a very important property in the subject of layout. The valid values for the display property (including the Microsoft vendor-specific values) are inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, -ms-flexbox, -ms-inline-flexbox, -ms-grid, -ms-inline-grid, and none.

<!-- HTML snippet -->
<div id="dpFlexbox">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
  
/* CSS snippet */
#dpFlexbox {
    display: -ms-flexbox;
}
  
#dpFlexbox > div {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    margin: 5px;
}
  
#dpFlexbox > div:nth-of-type(3) {
    position: relative;
    background-color: gray;
    left: 15px;
    top: 15px;

<!-- HTML snippet -->
<div id="dpFlexbox">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
  
/* CSS snippet */
#dpFlexbox {
    display: -ms-flexbox;
}
  
#dpFlexbox > div {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    margin: 5px;
}
  
#dpFlexbox > div:nth-of-type(3) {
    position: absolute;
    background-color: gray;
    left: 15px;
    top: 15px;
}

Floating

Block-level elements can be told to float using the float property. A floating element allows subsequent inline content to render next to itself (instead of below). You can provide values of left or right to determine which side of the block-level element content should populate.

When used as it was intended, floating works quite well, but web developers have been using it for some time to get block-level elements to facilitate layout.

Using float for layout though reminds you that it’s not so comfortable in its imposed role.

Flexbox

There’s still quite a bit of tumult in the standards recommendations and implementations for flexboxes, but IE10 and Windows 8 has a good, solid implementation of this extremely helpful layout technique.

Flexboxes solve an old problem. The abstract div elements that we’ve been using for so long for laying out our content were designed as block elements. Modern user interfaces and especially the interface in Windows 8 are full of flowing lists of products, friends’ pictures, and pictures.

While it was rarely impossible to implement the necessary layout using classic div positioning and floating, it’s very often painful. Flexboxes alleviate most or all of that pain.

Directing a list of elements to lay out as a flexbox is as easy as setting display: -ms-flexbox; on its parent. The default layout direction is horizontal, so as soon as this one property is added, child elements will begin flowing from left to right. This is helpful on its own, but it’s only the start. Flexboxes also enable you to size the items and the space along the axis of layout and also perpendicular to the axis of layout. They also allow you to control the layout direction and order of your content regardless of how it is specified in the HTML.

<!-- HTML snippet -->
<div id="flexbox">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
  
/* CSS snippet */
#flexbox {
    display: -ms-flexbox;
}
  
#flexbox > div {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    margin: 5px;
}

<!-- HTML snippet -->
<div id="flexbox">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
  
/* CSS snippet */
#flexbox {
    display: -ms-flexbox;
    width: 800px;
    height: 300px;
    border: 3px solid lightgray;
}
  
#flexbox > div {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    margin: 5px;
}

<!-- HTML snippet -->
<div id="flexbox">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
  
/* CSS snippet */
#flexbox {
    display: -ms-flexbox;
    -ms-flex-pack: distribute;
    width: 800px;
    height: 300px;
    border: 3px solid lightgray;
}
  
#flexbox > div {
    border: 1px solid black;
    min-width: 100px;
    min-height: 100px;
    margin: 5px;
}

<!-- HTML snippet -->
<div id="flexbox">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
  
/* CSS snippet */
#flexbox {
    display: -ms-flexbox;
    width: 800px;
    height: 300px;
    border: 3px solid lightgray;
}
  
#flexbox > div {
    border: 1px solid black;
    min-height: 100px;
    margin: 5px;
}
  
    flexbox > div:nth-child(odd) {
        -ms-flex: 1;
    }
  
    #flexbox > div:nth-child(even) {
        -ms-flex: 2;
    }

<!-- HTML snippet -->
<div id="flexbox">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
  
/* CSS snippet */
#flexbox {
     display: -ms-flexbox;
     -ms-flex-wrap: wrap;
     width: 800px;
     height: 300px;
     border: 3px solid lightgray;
     -ms-flex-pack: start;
}
  
#flexbox > div {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    margin: 5px;
}

<!-- HTML snippet -->
<div class="swiper">
    <div>
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing. . .</p>
        <p>Donec dignissim tempor risus, in iaculis odio. . .</p>
    </div>
    <div>
        <h3>Maecenas velit</h3>
        <p>In hac habitasse platea dictumst. Quisque facilisis. . .</p>
        <p>Maecenas velit nisi, accumsan tempor tincidunt vel. . .</p>
    </div>
    <div>
        <h3>Nisl augue</h3>
        <p>Nulla rhoncus, nulla at convallis pretium, nisl augue. . .</p>
        <p>Donec tempor urna venenatis neque ornare congue. . .</p>
    </div>
</div>
  
/* CSS snippet */
.swiper {
    border:2px solid gray;
    display:-ms-flexbox;
    height:400px;
    width:600px;
    overflow-x:auto;
    -ms-scroll-snap-x:mandatory snapInterval(0%,80%);
}
  
.swiper > div {
    width: 80%;
    padding-left:40px;
    box-sizing: border-box;
    overflow-y:auto;
    margin-bottom:16px; /* room for vertical scrollbar */
    padding-right:16px; /* room for vertical scrollbar */
}
  
.swiper > div:last-child {
    width:100%;
}

Grid

The grid serves a very different purpose than the flexbox. The flexbox would help you make a list of products for a catalog as an example, but the grid would layout your whole UI and strongly contribute to its adaptability as well.

An element is turned into a grid by simply adding the display property to it with a value of -ms-grid. Look at what happens to the stack of div elements in Listing 7-10 when the only change we make is to direct their parent to be a grid.

Listing 7-10.  Set a div to have a display value of -ms-grid

<!-- HTML snippet -->
<div id="grid">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
    <div id="d">D</div>
</div>
  
/* CSS snippet */
#grid {
    display: -ms-grid;
    width: 800px;
    height: 300px;
    border: 3px solid lightgray;
}
  
#grid > div {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    margin: 5px;
}

That seems a little odd at first. All of the items are stacked right on top of each other. It doesn’t seem like much of a layout tool yet. To remedy this, we should also define some rows and columns. Listing 7-11 does just that, defining a simple two by two grid so that each of our boxes can have its own space. Besides defining the rows, however, we also have to tell each element which row and column it belongs in. Any child elements of a grid that are not assigned a row or column take the default value of 1 and show up in the first row or column.

Listing 7-11.  Add column and row assignments for each child item

<!-- HTML snippet -->
<div id="grid">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
    <div id="d">D</div>
</div>
  
/* CSS snippet */
#grid {
    display: -ms-grid;
    -ms-grid-rows: 1fr 1fr;
    -ms-grid-columns: 1fr 1fr;
    width: 800px;
    height: 300px;
    border: 3px solid lightgray;
}
  
#grid > div {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    margin: 5px;
}
  
#a { -ms-grid-row: 1; -ms-grid-column: 1; }
#b { -ms-grid-row: 1; -ms-grid-column: 2; }
#c { -ms-grid-row: 2; -ms-grid-column: 1; }
#d { -ms-grid-row: 2; -ms-grid-column: 2; }

The rows for the grid have been defined as 1fr 1fr. This is a space-delimited list of the row height for all rows. In this case, we employ the fr unit designator, which stands for fraction. If all rows are given a fractional value of 1, then each will be granted an equal part of the available grid height.

It is also possible to define some rows to have an absolute height, in which case the fractional values determine each row’s part of the total height minus all absolute value definitions. A grid row definition of 100px 1fr 100px would create a grid with a 100-pixel row on the top and bottom with the remaining space given to the middle row.

The fractional parts apply to the fraction of the remaining space after all of the absolute lengths are applied. For example, a 1000-pixel wide grid with a column value of 200px 1fr 3fr would get a column of 200 pixels (absolutely defined) plus a column of 200 pixels (1/4 of the remaining 800 pixels) plus a column of 600 pixels (3/4 of the remaining 800 pixels).

Let’s say now that we want to define an app layout that includes a fixed header, some fixed space on the left, and then the remaining space divided equally in half (vertically). Take a look at Listing 7-12 to see how this would be done.

Listing 7-12.  Set up an app layout using a grid

<!-- HTML snippet -->
<div id="grid">
    <div id="header">header</div>
    <div id="left">left</div>
    <div id="firstHalf">first half</div>
    <div id="secondHalf">second half</div>
</div>
  
/* CSS snippet */
#grid {
    display: -ms-grid;
    -ms-grid-rows: 120px 1fr;
    -ms-grid-columns: 120px 1fr 1fr;
    width: 1000px;
    height: 540px;
    border: 3px solid lightgray;
}
  
#grid > div {
    border: 1px solid black;
    margin: 5px;
    padding: 10px;
}
  
#header { -ms-grid-row: 1; -ms-grid-column: 1; }
#left { -ms-grid-row: 2; -ms-grid-column: 1; }
#firstHalf { -ms-grid-row: 2; -ms-grid-column: 2; }
#secondHalf { -ms-grid-row: 2; -ms-grid-column: 3; }

That layout looks pretty good, but we’ve got one small problem: the header item is only taking the first column. Another way the grid resembles its old table ancestor is in its ability to span rows or columns. In the previous example, we added a split in our main content session, but likely we would not want that to affect our header. The solution in Listing 7-13 simply defines our #header element to span three columns taking up the entire top of the layout. These span definitions apply to individual grid children, so it’s perfectly valid to instruct one element to land in a single cell and another to span multiple. This is a considerable advantage over tables.

Listing 7-13.  Add cell spanning to the header child item

<!-- HTML snippet -->
<div id="grid">
    <div id="header">header</div>
    <div id="left">left</div>
    <div id="firstHalf">first half</div>
    <div id="secondHalf">second half</div>
</div>
  
/* CSS snippet */
#grid {
    display: -ms-grid;
    -ms-grid-rows: 120px 1fr;
    -ms-grid-columns: 120px 1fr 1fr;
    width: 1000px;
    height: 540px;
    border: 3px solid lightgray;
}
  
#grid > div {
    border: 1px solid black;
    margin: 5px;
    padding: 10px;
}
  
#header { -ms-grid-row: 1; -ms-grid-column: 1;-ms-grid-column-span: 3; }
#left { -ms-grid-row: 2; -ms-grid-column: 1; }
#firstHalf { -ms-grid-row: 2; -ms-grid-column: 2; }
#secondHalf { -ms-grid-row: 2; -ms-grid-column: 3; }

<!-- HTML snippet -->
<div class="profile">
    <div class="image">image</div>
    <div class="section1">section 1</div>
    <div class="section2">section 2</div>
    <div class="section3">section 3</div>
    <div class="section4">section 4</div>
</div>
  
/* CSS snippet */
.profile {
    display:-ms-grid;
    width:1025px;
    height:576px;
    -ms-grid-columns: 7fr 14fr 9fr;
    -ms-grid-rows: 120px 2fr 3fr;
}
  
.profile > div {
    border: 1px solid black;
    margin: 5px;
    padding: 5px;
    font-size:x-large;
}
  
.image {
    -ms-grid-row-span: 2;
}
  
.section1 {
    -ms-grid-row: 3;
}
  
.section2 {
    -ms-grid-column: 2;
    -ms-grid-row-span: 3;
}
  
.section3 {
    -ms-grid-column: 3;
}
  
.section4 {
    -ms-grid-column: 3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
}

ViewBox and ListView

We’ve covered the legacy and modern layout implements offered to us by CSS, but when you’re working on a Windows 8 app, you have the Windows Library for JavaScript (WinJS) available and you’re provided some more modern layout control by WinJS. Even though they’re not CSS properties, they’re worth having a look at in the context of this book.

The first is the WinJS.UI.ViewBox. The ViewBox is a control that you can add content to when you want that content to scale automatically to changes in the app’s view state. If an app is running on a tablet, for instance, it might be rotated to a portrait orientation, and in that case, it may be desirable to scale up or down the content within. I’m not talking about a re-rendering of its contents based on new dimensions. I’m talking about a straight scaling of the content exactly as it would have been rendered before the intervention of the ViewBox.

This scaling is made possible thanks to the scaling and translate transform functions that we already learned in Chapter 6. The ViewBox is happy to apply this effect for you, and the only thing it asks is that you give it no more than a single child item. This doesn’t turn out to be much of a problem since even if you do have multiple child items all you really have to do is wrap them in a container like a simple div.

The ViewBox fits the child item without changing its aspect ratio as you can see in Figure 7-18. In a landscape orientation the height will constrain the child’s size and in a portrait orientation the width will be the constraint.

Another WinJS provision on the topic of content layout is the very powerful WinJS.UI.ListView control. It’s very common to list things out in an app. We’re accustomed to seeing lists of friends, lists of stock prices, and lists of our email. These cases are covered well by the ListView, which is capable of laying out items as a grid with multiple rows and columns or as a vertical or horizontal list. The ListView has a few advantages over the more primitive flexboxes and grids, including but not limited to:

• Item selection
• Data binding to synchronous or asynchronous data sources
• Asymmetrical, cell-spanning layout
• Item grouping
• Custom render functions

Listing 7-15 shows the most basic ListView which is bound to the numbers one through eleven. Notice how a grid is used in the item template so that its contents can be centered horizontally and vertically.

Listing 7-15.  The HTML, CSS, and JavaScript for implementing a ListView

<!-- HTML snippet -->
<div id="list" data-win-control="WinJS.UI.ListView"></div>
<div id="template" data-win-control="WinJS.Binding.Template">
    <div>
        <img data-win-bind="src:imageUrl" />
        <div data-win-bind="innerText:name"></div>
    </div>
</div>
  
/* CSS snippet */
.win-listview {
    height: 100%;
}
  
.win-listview .win-item .grid {
    display:-ms-grid;
    -ms-grid-rows:160px;
    -ms-grid-columns:160px;
    background-color:gray;
    color:white;
}
  
.win-listview .win-item .grid div {
    font-size: 36px;
    font-weight: bold;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
}
  
// JavaScript snippet
var numbersList = new WinJS.Binding.List();
  
var list = document.getElementById("list").winControl;
list.itemTemplate = document.getElementById("template");
list.itemDataSource = numbersList.dataSource;
  
for (var i = 1; i <= 14; i++) {
    numbersList.push(i);

}

You may wonder if the ListView control itself uses a grid or a flexbox for its implementation, but actually it uses neither. The ListView is responsible for so many cases and combinations, that a bit more control was necessary, so it is implemented with custom positioning properties.

In Chapter 9, we will talk more about the ListView and learn how to target all of its individual components using CSS styling rules.

In Figure 7-19, you see a very basic ListView, but the ListView is capable of a lot of extended functionality including the grouping of items. In this case, headers are rendered above each group of items and the developer must provide a header template to define how that header should look.

Listing 7-16 starts with the same ListView from Listing 7-15, and then adds the header template and the JavaScript code necessary to do a simple grouping.

Listing 7-16.  Add HTML and JavaScript to implement grouping on the ListView

<!-- HTML snippet -->
<div id="list" data-win-control="WinJS.UI.ListView"></div>
<div id="template" data-win-control="WinJS.Binding.Template">
    <div class="grid">
        <div data-win-bind="innerText:this"></div>
    </div>
</div>
<div id="headerTemplate" data-win-control="WinJS.Binding.Template">
    <h2 data-win-bind="innerText:this"></h2>
</div>
  
/* CSS snippet */
.win-listview {
    height: 100%;
}
  
.win-listview .win-item .grid {
    display:-ms-grid;
    -ms-grid-rows:160px;
    -ms-grid-columns:160px;
    background-color:gray;
    color:white;
}
  
.win-listview .win-item .grid div {
    font-size: 36px;
    font-weight: bold;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
}
  
// JavaScript snippet
var numbersList = new WinJS.Binding.List().createGrouped(
    function(n) { return (n % 2 == 0 ? "even" : "odd"); },
    function(n) { return (n % 2 == 0 ? "even" : "odd"); }
) ;
  
var list = document.querySelector("#list").winControl;
list.itemTemplate = document.querySelector("#template");
list.itemDataSource = numbersList.dataSource;
list.itemHeaderTemplate = document.querySelector(“.lst0714 #headerTemplate”);
list.groupDataSource = numbersList.groups.dataSource;
  
for (var i = 1; i <= 11; i++) {
    numbersList.push(i);
}

As you can see in Figure 7-20, the even and odd numbered items are separated into different groups and the h2 element that we defined in our header template is announcing which is which. A couple of items have been selected for effect.

So far we’ve seen two ListViews that have symmetrically sized items, but it is possible to allow items to expand as long as they are even multiples of the smallest tile size in both width and height (plus the margin). The tiles in Listing 7-15 and Listing 7-16 are 160 pixels wide and high. A larger tile (expanded both in width and height) would be 330 pixels—160 times 2 plus the 10-pixel margin. We have to not only set some of our items to a new size, but we also must add a groupInfo function to our list’s layout. Listing 7-17 implements an asymmetrical ListView completely.

Listing 7-17.  The ListView is upgraded to allow cell spanning

<!-- HTML snippet -->
<div id="list" data-win-control="WinJS.UI.ListView"></div>
<div id="template" data-win-control="WinJS.Binding.Template">
    <divdata-win-bind="className:size;" >
        <div data-win-bind="innerText:number" class="number"></div>
    </div>
</div>
  
/* CSS snippet */
.win-listview {
    height: 100%;
}
  
.normal {
    display:-ms-grid;
    -ms-grid-rows:160px;
    -ms-grid-columns:160px;
    background-color:gray;
    color:white;
}
  
.oversized {
    display:-ms-grid;
    -ms-grid-rows:330px;
    -ms-grid-columns:330px;
    background-color:gray;
    color:white;
}
  
.number {
    font-size: 36px;
    font-weight: bold;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
}
  
// JavaScript snippet
var numbersList = new WinJS.Binding.List();
  
var list = document.querySelector(".lst0715 #list").winControl;
list.itemTemplate = document.querySelector(".lst0715 #template");
list.itemDataSource = numbersList.dataSource;
list.layout.groupInfo = function () {
    return { enableCellSpanning: true, cellWidth: 160, cellHeight: 160 };
};
  
for (var i = 1; i <= 11; i++) {
    numbersList.push({ number: i, size:calculateSize(i) });
}
function calculateSize(n) { return (n == 1 ? "oversized" : "normal"); }

Notice in Figure 7-21 that the second and third tiles were displaced by the first, but all of the slots were filled. If varying sized items are added to the ListView in the wrong order, it is possible to get gaps in the layout. It may be necessary to add some logic that assures the order in which items are added according to their size.

Summary

We’ve covered a lot of content on the subject of layout. We looked at a couple of legacy methods for laying out content on the web, and then we looked at some exciting, modern alternatives.

The first legacy method we looked at was layout via tables. Tables are great for showing tabular data, but not a good idea for laying out your app. They’re unsuitable because being defined in your HTML markup makes them rigid and difficult to manipulate at run time. We also looked at using display and positioning properties on standard div elements for layout. This is a decent and rather popular strategy, but it has its pain points and easier and more expressive modern options exist now.

The modern layout techniques we’ve discussed are the CSS flexbox and grid, but we also looked at some controls available in a Windows 8 app by way of the WinJS JavaScript library called the ViewBox and the ListView that do some very helpful layout work for us.

I like to generalize that the flexbox flows its children and the grid places its children. The flexbox lets you easily lay out a few elements to create horizontal or vertical lists of content. Within the list, individual items can be packed, aligned, and sized to handle their space as the design dictates. The grid lets you create a framework within which it’s very easy to place children. Items can be place anywhere within the grid relative to any of the cells formed by the grid’s structure.

The ViewBox and ListView—the two WinJS layout implements that we explored—are native Windows 8 controls and not available (as they exist anyway) to the development of public websites. The ViewBox responds to changes in the users’ view state such as when the user rotates their tablet to a portrait orientation. It then applies CSS transforms to its contents to translate and scale them to fit. The ListView is the ultimate tool for laying out lists of data items. It facilitates item selection, sorting, grouping, and a whole lot more.

An app’s layout is the foundation of its design and its function, but web developers have traditionally had a relatively difficult time performing such a simple task as placing visual elements where they want. The Windows 8 implementation of the very latest CSS standards, however, provide some awesome functionality that will certainly ease this pain.

In Chapters 8, 9, and 10, we’ll look at a higher level view of the collections of style rules in the built-in WinJS library and our own homemade style sheets. We’ll also look at applying these rules to our app as well overriding and extending them to make them our own.

So shift gears with me and let’s keep cruising!