Skip To Demos:
Updated May 6th: For the longest time I've been waiting for browsers to support the CSS Template Layout module. Today, I found out that Alexis Deveria has given the web community the gift we've all been waiting for. Using JQuery and a plugin we can now take full advantage of the CSS Template Layout Module.
Historically, we've used containers and floats to create our websites but with this method we may possibly be able to make that method history. With template layouts we can finally have source order independence that has plagued the CSS Display: Table, HTML TABLEs and CSS Float techniques. We can also ignore absolute position methods which I've always disliked. Finally the template layout method also handles equal column heights right out of the box.
Recap: Template Layout Gives Us
- Pure source order independence
- Equal height columns
- No need to overflow containers
- No need for hacks
- Advanced grid layouts
- Easy source arrangement for different media types i.e print, mobile
A Quick Overview
Template layout works like a grid. We're all familiar with the dozens of CSS libraries that attempt to give designers a grid to work with. I personally despise CSS libraries but that's another story. With template layout we can create all of those complex grids that designers dreamed up with HTML TABLEs, but using only CSS and semantic HTML instead.
Step 1: Importing JQuery and the Plugin
The very first thing we'll need to do is import JQuery and the JQuery Template Layout Plugin
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://css-template-layout.googlecode.com/files/jquery.tpl_layout1.1.1.js"></script>
Next we'll need to initialize the plugin using JQuery's document.ready event:
$(document).ready(function()
{
$.setTemplateLayout()
});
HTML Setup
The HTML setup can be approached in the same fashion we would approach the old float based layout system. For the sake of this tutorial I've named my DIVs a, b, c, d, e rather than header, nav, content, aside and footer.
<div id="template">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
</div>
CSS Setup
We start like we would with any other layout system by centering our main #template DIV and giving it a width. I chose 1000px simply because it's easier to do math with.
#template
{
margin: auto;
width: 1000px;
}
Position: What?; Think Grid Placeholders
Next we need to assign each of our child DIVs a position name. Again for the sake of this demo I've given each DIV the same position name as it's ID name:
#a { position: a; }
#b { position: b; }
#c { position: c; }
#d { position: d; }
#e { position: e; }
Think of each position name like a variable that will be used to place each DIV in a grid. My code example above would probably look like this in a production environment:
#header { position: a; }
#nav { position: b; }
#content { position: c; }
#aside { position: d; }
#footer { position: e; }
::Slot() Pseudo Class
Template Layouts introduces a new CSS pseudo class called ::slot(). Think of slots like a content placeholder. Only certain CSS properties can be applied to slots such as background colors and images.
#template::slot(a) { background: #eee; }
#template::slot(b) { background: #ddd; }
#template::slot(c) { background: #ccc; }
#template::slot(d) { background: #bbb; }
#template::slot(e) { background: #aaa; }
Display: Grid:
Using our placeholder names we can arrange our DIVs in an equal height grid system using the following syntax:
#template { display: "abcde"; }
We could also easily re-arrange our DIVs by simply ordering the placeholder names like so:
#template { display: "edcba"; }
Note that what we just did is not possible using Sitepoint's evil display: table; method, and is not easily possible using the standard float system. It is possible with absolute positioned elements but
once again we're trying to avoid that.
Real World Example of Template Layouts
Until now, I've only shown you the basics of template layouts. I've found that new programming techniques often make little sense until put into a real-world perspective. Lets create a two column template layout:
#template
{
display:
"aa" /150px
"bc"
"dd"
250px 750px
;
}
A break down of that code:
- Line 4 states that the "a" DIV should occupy 2 columns in our grid row and /150px states that it should have a height of 150px.
- Line 5 states that the "b" DIV should occupy 1 slot in the left row column and "c" should occupy the right column in row 2.
- Line 6 states that the "d" DIV should occupy 2 columns
- Line 7 states that the first column should be 250px wide and the second column 750px wide
Easy 3 Column Layout With CSS
We can easily take our same HTML structure and make it a three column layout with the template layout system:
#template
{
display:
"aaa" /150px
"bcd"
"eee"
* 500px *
;
}
A break down of that code:
- Line 4 states that the "a" DIV occupies 3 slots in our grid and have a height of 150px; This is our #header.
- Line 5 states that the "b" DIV occupies slot 1, of row 2, the "c" DIV occupies slot 2 of row 2 and finally the "d" DIV occupies slot 3 of row 2. "b" is our #nav, "c" is our #content and "d" is our #aside.
- Line 6 states that the "e" DIV occupies 3 slows of row 3. This DIV acts as our #footer.
- Line 7 states that both column 1 and column 3 have a variable width (250px) while the second column has a width of 500px consuming the rest of the available space.
Easily Re-Arrange Columns
The best thing about this approach is we can quickly re-arrange our content in the grid. This might come in handy when displaying content to different media types such as @print and @handheld. Take a look at how easy we could switch our columns around:
#template
{
display:
"aaa" /150px
"dcb"
"eee"
* 500px *
;
}
Easily Re-Arrange Rows
If ever needed, we could also flip our #header and #footer DIVs like so:
#template
{
display:
"eee" /150px
"dcb"
"aaa"
* 500px *
;
}
Argument Against Using This?
I can think of a few reasons not to use this:
- Requires Javascript & JQuery
- Layout not triggered until the DOM is loaded
- Not thoroughly tested in all browsers (IE6 specifically)
- Syntax has a high learning curve at first
- Currently no browsers (that I'm aware of) support this natively
Should You Use This?
Absolutely! While I'm unsure if this is ready for large & complicated designs I think as a community we should start testing this new approach out which is currently in the working draft stage of the W3C spec process.
Love it? Hate it? Speak your mind below...
