YAML Template Sets.
Posted by coldtobi | 16 Aug, 2007, 09:15Some weeks ago, I prepared a template set for lifetype, using the YAML framework. Now, it is time to bundle my work and release it to the public..
The YAML framework has been created that a web designed has not to care about browser bugs and also to use the power of CSS to make a flexible design. Or, as in the words of yaml's author:
Bulletproof & Flexible Layouts Made Simple
"Yet Another Multicolumn Layout" (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.
Template for Lifetype
To get started, here is the download link on my server: http://frost.de/files/yaml_lifetype.zip
I prepared some examples using the examples in the yaml packages.
Template Examples
(These are only some examples to demonstrate the flexibleness of the design. The mostly differs in only one line in the common.templates file, and maybe two files swapped. See the Albums for more.)
This Template's Philosophy
The templates shipping with Lifetype's have in my opinion some, well, flaws. They are usually working very well, but on the other side, they are hard to customize because "the how they work" is just weird and confusing. As an example, most html tags are opened somewhere. and closed in some different file. It is not easy to find the location where one specific element is put on screen. Editing this mess was hard, frustrating and error-prone.
So I choosed a different approach. Every file in my templates will close the tags it opened. There are also two layers of abstraction, one defining "where" the content is to be put on screen, and the other layer "what".
Seperating Where and What
"Where" is defined by the underlaying CSS templates. YAML uses a 3-column layout (even if only all are drawn), and so the target of the content can be specified by naming the portion of the screen where to put the content. This is simply the "div". So in the first abstraction layer defines a file for each columns. You put the content in the file where you want to have the content.
"What" to put on screen can be modularized. The second layer are so called "renderer". Their purpose is just to draw one element.
Of
course, as the YAML templates handle all the CSS things, including
clearing, browser bugs and all the quirks usually eat up hours, the renderer don't have to take care browser bugs.
But YAML is not free
Indeed, YAML is "only" placed under a Creative Commons license, and it requires attribution to the original author. As this should be not a problem, as the only requirement is to set up a link to yaml.de.
However if that is not an option, this template does not really require YAML as CSS backend. You can use every other CSS implementation,or simply just write your own. Indeed, this template does not really use much CSS of its own.
If you a that firm enough on CSS to date getting around all these browser bugs by yourself, I am sure that figure out the parts to be edited by yourself, but this is beyond the scope of this article.
Detail under the hood: How does Lifetype draw templates.
This section tries to explain, how the template works in contrast
how traditional lifetype templates do their Jobs. If you just want to
use the template, you can skip that. I admit, that the follwing might
need some reworking to be more understandable.
Still here? Ok, so lets take a look how this template works.
Lifetype, when rendering a blog, first invokes one of these template files. They are located in the base directory of the template: (BTW, the Smarty-Variable $blogtemplate will be used througout this article. This it the path to the blog-template in use, so for example <path_to_httpdocs>/lifetype/plugins/YAML.)
- main.template
if it wants to render the "main page". (For the main page, type in "blog.coldtobi.de".)
- postandcomment.template
if it wants to paint one article with all the assosicated comments.
- albums.template
print all the available albums (note the plural in albums)
- album.template
print one individual album
- error.template
something got wrong
- resource.template
drawing a resource
- links.template
the Links-Section is to be displayed.
YAML Layout
YAML -- as already states -- uses a three column layout. The picture above shows an example layout, with the most important divs marked. The example is marked as "1-3-2" to depicture the on-screen layout. You will also finds this numbers in the example, so know you know how 1-2-3 or all the variants will look like beforehand. The names in the boxes are actually the names of the divs for the content. We'll need that later for the rendering engine.
It is important to note, that the on-screen-layout needs not be necessary be the same as the logical order in the html file presented to the browesr. In the file, the order is always the same: header, col1, col2, col3 and finally footer. It is the magic of CSS to puts it in on the screen exactly where you want it to be displayed.
Bootstrapping
In Lifetype, the content is assembled in these templates, so (worst case) you need to change every file to update your design.
Contrary to lifetype, this template just uses these files to "bootstrap" the rendering. In my template, no content is output using these files. I use them differently: It will only assign a variable, which used later as a switch to decide which content should be displayed. So when updating a layout, a maximum of two files has to be edited for every task.
A usual Bootstrap-file usually looks like this, which is actually $blogtemplate/main.template.
{assign var="OnMainPage" value=1}
{assign var="YAML_Mode" value="main"}
{include file="$blogtemplate/YAML/common.template"}
Important are the 2nd and 3rd line: The second one sets the "mode" to be rendered. The mode just defines what lifetype wants to display, main window, an article, albums, and so on.
The third line does the actual bootstrapping by including the YAML/common.template. Note that all files in the YAML-Directory are part of the wrapper.
Note, that this is independent of the rendering mode: In YAML/common.template, all the output is written which is "common" (thus the name) to all rendering targets: The HTML-Headers, the CSS, and most importantly framework for the YAML-Layout. As the structure of the Layout is fixed, it is unlikly that you have to change this file except if you want to switch the YAML_Layout variable. (Explained later).YAML uses a three-column-layout. The columns are named with the CSS-IDs "col1", "col2" and "col3". Beside, there are a header and the footer column.
A concrete bootstrapping example
To explain the bootstrapping better, lets go for an example: Lifetype wants us to display the blog main site, aka the main mode. So it will source $blogtemplate/main.template, which will include the common.template with YAML_Mode=main.
The common-template then will source the appropriate CSS-Template and then the column-files in the order header.template, col1.template, col2.template, col3.template and then finally footer.template.
Their responsibility is just to render their very own content. And nothing else.
After bootstrapping there is content
To extend the example, <col2> should hold the contents. When bootstrapping, eventually col2.template is loaded. (See picture for illustrating this example)As the content of the columns is somewhat dependent to the mode, col2.template then will examine "YAML_Mode" to finally include the dedicated renderer for this task: YAML/render/render_<YAML_mode>.template. This file will then output the desired items.
But there are more renderes in this directories: One column, in my case col1.template, contains the menu. As I didn't just want to copy-paste the menu in one single mess, I introduced sub-renderer. So, if you are wondering: Every render/menu_<>.template renders excatly one element of the menu. In col1.template, I just include the elements I want, and have easy control where it should appear.
As written before, beside the columns, two another divs exists: A header and a footer. Also this divs are created using renderer. Look for the YAML/render/render_<divname>.templates files. In the current template set, these are always rendered the same, but it is easy to modify the renderer to e.g display some neat pictures in a specific mode or category.
To close this section in the article, let me give you another example: Want to swap two columns? Fine. Thats easy. Just switch the
files: Rename "col<1>.template" to "col<2>.template and
vice versa. Done. Not one line of code to be changed.
Adapting the templates for existing lifetype-plugins
As the file locations have changed, here's a quick guide where to find the spots to include plugin code.
plugin says: header.template
Most likely, this has to go into the "common.template"
plugin says: footer.template
If the plugin draws something into a menu, you'll probably want to write a YAML/render/menu_<nameit>.template and include that into the YAML/col<menu>.template. See my col2.template as reference. If it goes "really" to the footer, change the footer.template to include your renderer.
Usually, these are the most common locations for the templates. But due the splitting into seperate files, finding the appropiate file is easier than it ever was: You can be sure, that you hit all the required spots by editing just one renderer.
Using Lifetype Default-Templates (lifetype/templates/defaults)
With Lifetype 1.2, default templates have been introduced: For different scenarios, default template exists, so custom templates does not need to recode everything. For example, there are defaults for posts, comments and so on.
If you want to use these defaults, you do not need to explicitly state that you want to use them: You can always just {include} them, as if they would be in your (custom) template directory. If the file is not there, lifetype will automatically fallback to the defaults.
As an example, here is the rendering code for the commentform: In the renderer "YAML/render/render_comentarticle.template" I just wrote
{include file="$blogtemplate/commentform.template"}
which will infact fetch the "templates/default/commentform.template", as their is no such file in $blogtemplate.
Note: Be
aware, that some of them won't work, because they include too much into
the template, leading to unbalanced tags.
Switching Basic Layouts
Most of the examples pictured above differs only in one line in the common.template-file: The variable "YAML_Layout " defines which basic layout is to be used:
- change the YAML_Layout-var in YAML/common.template
- change your col#.templates to get the content in the right column. Hint: If you rename the files, you can easily swap two columns without changing any byte in the file
- optionally change the YAML/render/render_<>.templates, if you need to tweak it.
If you want to have a custom YAML style, you just have to create your own css
file, name it css/layout_<choose>.css and set the variable to <choose>. Do not
forget to create a bugfix-file for the IE, which goes under
css/explorer/iehacks_<choose>.css. (Without it will work too, but maybe
rendered oddly under the IE)
BTW: I will always source css/lifetype.css. So if you only want to tweak some
CSS settings, this is the right place to do it.
Blog and Website | Comments (0) | Trackbacks (0)
Related Articles:
- [Updated] La Fonera: A bunch of Autoupdates (to 0.7.2.2)
- Squirrelmail and lighttpd -- An Installation Guide --
- Installing Debian on the Thecus N2100 -- PART 3 -- Installing Debian
- La Fonera: A better way to enable RedBoot via Telnet / Ethernet (safely) [HowTo]
- Thecus N2100: Testing a new kernel. Or the Installer. Or Revert. Or Recover.
