Custom Layouts: Using the YAML CSS framework

The YAML CSS book (recommendable) If you ever tried to design a sophisticated website using CSS techniques only, you know what we are talking about: To let your content and your navigation elements look great on every browser and every operating system is an almost impossible task. Even if modern web browsers support the CSS standards quite well, there are still many differences and browser bugs around. Even if you are a CSS crack you always have to keep your combination of browser hacks and workarounds up to date. With every new browser version you will have to check whether everything is still working as it should. Since YAML does this job very nicely we not only rebuilt the elml.org website based on YAML but we also integrated YAML support into eLML.

YAML (Yet Another Multicolumn Layout) is a CSS framework that takes care of all the CSS hassle mentioned above. It provides a flexible structure to build your custom design on. Even "out of the box" the design looks pleasing and the content is accessible for all users. YAML is open source, well documented and supported by a growing user and developer community.

You might consider using eLML with YAML if you:

• Plan to provide your eLML content standalone, that is outside a Learning Management System (LMS) or CMS.
• Want to develop a custom CSS-based eLML design without having to start from zero.
• Need to integrate your eLML content in CMS. There are already several YAML templates for integration in popular CMS available.

How to use YAML in eLML?

Screenshot of YAML layout example (click image) If you want to use YAML, here is how you do it:

1. Download the latest YAML-release and unzip it. Within the folder you will find documentation, examples, tools and a folder called "yaml".
2. Copy only this folder "yaml" into your projects "_template" folder. Please note that the "yaml" folder should not be placed within a specific layout template folder but one level higher within the "_templates" folder. This way if you have many different layout templates they can all use the same YAML-CSS-Files.
3. Create your own layout template as described on this website. You can create your layout template as you wish but your "elml.css" file should start with the following two lines:
   @import url(../yaml/core/base.css);
@import url(../yaml/screen/content_default.css);
.hidecol2 #col3 { margin-left: 25%; margin-right: 0; }
.hidecol2 #col3_content{ padding-right: 20px; }
.hideboth #col1, .hideboth #col2, .hidecol1 #col1, .hidecol2 #col2 { display:none; }
4. In your projects configuration file under "online" add an element "css_framework" with the value "yaml".
5. Now you can open your lesson.xml file and transform it using your layout templates XSL file. Your content should be visible in your layout and using the YAML-CSS-Framework.

If you create your own template we recommend using the YAML Builder to create your HTML code. YAML expects a specific HTML structure and some specific CSS class names in order to work correctly and the YAML Builder helps you to create this HTML code. You should now create your own template named "elml:LayoutBody" and copy the XHTML code in it. Now you need template calls to insert the content (elml:LayoutBodyContent), the navigation (elml:navigation) or the footer (elml:footer) at the places you want them to appear. Check the preceding chapter to get more information about this step.

Specials

Specials

Columns in YAML

Using YAML means using the classes and elements provided by the YAML framework. One of the elements provided by YAML is the Subtemplates features for two- or three-colum layout within one of the main YAML columns. The according element in eLML would be the "column" element. Now in eLML absolute values for column widths are allowed, in YAML - due to the way columns are implemented - this is not always possible. Therefore please consider the following points when using YAML and the eLML element "column":

• Try to use width in percent-values instead of absolute values in pixels. Check the YAML subtemplates page for the possible values. eLML will automatically use the closest available YAML-ratio (e.g. if you use 20% width for columnLeft, eLML will use the 25% YAML-class).
• Absolute width-values in pixels are only applied if there is no columnMiddle and if the width is applied to the columnRight element.
• If columnMiddle element is used, all the three columns (left, middle and right) will have a width of 33%.
• If only columnLeft and columnRight are used but both without with then both columns will have a width of 50%.

Further comments

• When creating content packages with YAML you might have problems with scrollbars appearing in your LMSLMS. Please add the following line to your elml.css at the end of the file:
  html { margin-bottom:0; }