CHAPTER 17 ■ LAYOUTSTemplate Layout
Problem You want to position elements based on templates with easy source arrangement for
different media types (print, mobile, Web, and so on).
Solutions The Template Layout module works like a grid. Each element is assigned a position using
an alphabetical character and the position property. Once positions have been assigned,
you can make layouts using a string of characters; each string equals a row, and each
character in that string equals a column. This provides a method of implementing a table-
like template without tables.
Limitations At the time of writing, the Template Layout module hasn’t been implemented in any
browsers. A jQuery plugin called jQuery polyfill exists that implements it in modern
browsers. Because jQuery is JavaScript based, any browser that doesn’t support JavaScript
isn’t positioned correctly. It’s important to lay out your content with this in mind.
Pattern^
HTML
CSS container { STYLES }
Location This pattern works anywhere.