YAML DevBlog | An (X)HTML/CSS Framework

Learning Management Software OLAT and YAML – a success story

April 6th, 2009 by Dirk Jesse | Content Managment Systems | 1 Comment

This article is a guest post written by Florian Gnägi, one of the developers of OLAT, an online learning and training software that successfully uses the YAML CSS framework within their template engine.

OLAT (Online Learning And Training) is an open source learning management System (LMS) used worldwide in education. It is complex system with a ten years development record that is now available in release 6.1. In the early days, everything was table- and font-tag based. Over the years, more and more CSS elements got used instead but the basic layout was still table based.

In 2007 and 2008 a project was financed by University of Zuerich to redesign the entire graphical layer. Frentix, a spin-off company that offers commercial support for this open source e-learning system, was commissioned to implement project. The goal was to have a new look and feel, to improve accessibility and to move all the layout declarations from the program code to CSS rules and thus make the system theme-able.

Now, OLAT is a large component based web application and not a content management system (CMS). Every element on the screen is drawn by its own component renderer and there is no global template as it is often the case in CMS applications. This makes it difficult to implement a pure CSS based layout. Everyone who ever used a float knows that when using floats it is crucial to know where the float area ends and when a clearing needs to be done. But, how do you deal with this when every element on your screen is rendered completely independent of each other?

Due to the accessibility goals it was clear that we wanted to implement a pure CSS layout without using tables unless it is used for tabular data. After evaluating several CSS layout frameworks we came to the conclusion that YAML matched best our requirements. OLAT has a standard three columns layout with a tabbed-pane like navigation at the top of the content area- It also uses a top navigation menu for logout and other links and has a standard footer element. This is exactly what YAML offers. And by looking at the YAML code it was obviously that the people behind YAML really know what they talk about. In no other framework we found the expertise that goes that deep and evenly important, by buying the YAML book we found that the authors are even willing to share their valuable knowledge. I recommend the YAML book for everyone who has to write HTML and CSS, even when not using YAML as a framework at all because it explains so many basic problems and errors that are fundamental to know in any case.

Implementing YAML in a web application has some pitfalls though. They are actually not YAML specific but more general CSS problems and the reason why CSS based layouts are so hard to implement compared to table based layouts which are really easy to read and understand by everybody (but have their own drawbacks). Our main problem was that the width of the column one and three is unknown in our application. Column one is used for the menu which can contain infinite numbers of submenus, and column three contains something we call toolbox which also can have long or short entrance. Depending on the language (OLAT is translated in more than 15 languages) the entries in the column one or three are longer or shorter. The YAML column width must be specified. The solution to this was to uses some JavaScript code to make the columns resizable by users. We save this settings for each e-learning course so that a short menu in one course does not affect the layout of a long menu in another course.

We used the YAML template for the basic layout and reused many of the YAML components in OLAT components as well. We also followed YAML in the way how to load and integrate CSS and to provide patch rules for IE browsers. This mechanism works very well. On top of this we implemented our theming engine that allows the development of custom themes by overriding standard CSS rules. The screenshots below show the same page in a course with the frentix and the default theme.

We are very happy that we chose YAML as the base framework for the layout engine. Now we can leave it up to HTML and CSS professionals to find solutions to new browser problems and spend more time ourselves on application related issues. For example, we just saw that YAML has now solutions to implement layouts for right-to-reft languages - something we desperately need in order to support some asian and arabic languages in OLAT. It is of great value that we can build once again on top of something that is already there and has proven to work.

Thanks YAML team for this great work and keep it on going!