The YAML CSS book (recommendable) 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) 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.

If you are interested in YAML and would like to use it for your project send a support request. If you would like to participate in the discussion about eLML and YAML, feel free to send your comments via the eLML Users Mailing list.