Add Tags
| First Name: | |
| Last Name: | |
| Message: | 
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
A Quick OverviewTemplate 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 PluginThe 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 SetupThe 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 SetupWe 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 PlaceholdersNext 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 ClassTemplate 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 Real World Example of Template LayoutsUntil 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:
Easy 3 Column Layout With CSSWe 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:
Easily Re-Arrange ColumnsThe 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 RowsIf 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:
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... |
| Date: | 2009-05-06 |
| Time: | 22:07:45 |
| Replies: | 78 |
| Views: | 100405 |