Layouts

Layouts

A feature that existed as a hacked-in extension to the old system for some files, layouts are a fully integrated and integral part of the new system. Layouts are used in order to provide multiple different representations of the same underlying data, such as for mobile phones and desktop computers. Because of the logic-agnostic templating system, as well as the generic data-based design of the exiting modules, this works quite well. Layouts are available for templates, images, css files, and javascript files. The folder structure of a layout folder looks like this in the source tree:

base/
<some files>
desktop/
<some files>
mobile/
<some files>

When it is processed by the framework and placed into a jail, it ends up looking like this:

desktop/
<some files>
mobile/
<some files>

So what happened to the base/ directory? Well, that depends on the file type. For each file type, the override behaviour is different, and you can figure out (or customize!) the current behavior in framework/merge-handlers/<filetype>. As of this writing:

• css files for a specific layout are appended to the base css file, then the whole thing is minified, with comments removed and excess whitespace removed. Additionally, variables will be replaced, although this functionality is not entirely working.
• js files are treated the same as the css files, but are not minified or preprocessed in any way (to deal with tinymce not fitting into the layout).
• tmpl files for a specific layout override the base ones, this may change in the future.
• img files for a specific layout override the base ones, we may provide a way to make changes to the base one for that specific layout with a script.

Whew! Well, if you are still reading, it’s worth noting how these different layouts are selected. Well, it’s pretty simple actually:

if browser.IsMobile(r) {
// Use mobile template
} else {
// Use desktop template
}