 |  |
| | |
YAML stands for "Yet Another Multicolumn Layout". It is a HTML/CSS layout framework developed by Dirk Jesse that helps developers and designers to solve common layout problems in web pages. These problems can be classified in two sections:
Layout blue-prints: recipes for implementing a CSS based layout without (miss)using HTML-table elements
Bugs: fixes and workarounds for common browser bugs, both for dealing with CSS parse bugs and with display and render bugs
I won't go into details here and explain the YAML framework. Please read the online documentation or better buy the YAML book written by the YAML author and support his work.
The YAML layout is composed of a set of HTML DIV elements:
page margins: a wrapper container to define outer page margins
page: a wrapper container to style the inner page style: writing direction, page background
header: an optional container for a page header
topnav: an optional container for a tool or a top navigation element
nav: an optional container that holds the main site navigation
main: the main content container
col1: an optional container for the first column, usually the left column
col2: an optional container for the second column, usually the right column
col3: an optional container for the third column, usually the middle column
footer: an optional footer container
In the HTML code they appear in the described order. With this setup a variety of layouts can be created.
In most scenarios a 1-3-2 layout is used. Yes, this is not a typo: the center column is column three and not column two. This is because the column one and the column two float on the left and the right side of the content and therefore must be declared in the HTML code before the third column. This is just one of the akward behaviours of CSS.
Just by using CSS rules it is possible to layout the said columns in many different ways. Below you see an example of a 1-3-2 and a 2-3-1 layout. Those are the most commonly used layouts, the 1-3-2 for left-to-right and the 2-3-1 for right-to-left languages.
The YAML framework splits up all the CSS rules into several separate files, one for each media type. In addition, all hacks and tweaks for the Internet Explorer browser family are separated into different files and included with the Microsoft proprietary conditional comment tag. The benefit is that the file structure is very clean and the standard CSS does validate since the custom IE hacks are not loaded by standards compliants browsers like FireFox or Safari. The drawback is that the browser has to load many files and it might look complicated at first sight.
Here's how how the files are organized:
Besides the solutions for the basic layout problems YAML does also address other common issues like subcolumns and navigation. For example, using the subcolumn container it is easy to create a 25%-75% column layout that is contained within the first column of a 33%-33%-33% column layout.
Please have a look at the YAML homepage to learn more about YAML.
In the OLAT-Core frame the developer doesn't have to deal with those basic layout issues. They are already implemented using the YAML components:
BaseChiefController loads all
necessary CSS files
BaseFullWebappController provides the
YAML container page, page_margins, header, topnav, nav and the
footer. In the nav container, the sliding door concept is
implemented to display the sites navigation
Main3ColsController provides the YAML
container main, col1, col2 and col3
First, the YAML CSS files are loaded. To not get conflicts with
content that also uses YAML, in OLAT-Core all YAML classes and DOM
element ID's contain a prepended b_. Example: the element
page_margins in YAML is renamed to
b_page_margins in OLAT-Core. Besides this modification we
use the standard YAML distribution with some minor additions.
In OLAT-Core, the YAML package is located under
webapp/static/yaml/
YAML is used to build the basic layout structure of the application. It is included in the default templated in the first line. Some styles are then overriden by the theme.
| |  | |
 |