The form construction kit got some minor updates too, to increase robustness of the 'columnar' and 'full' viewing mode of flexible forms. A small fix was added to prevent automaticly increasing horizontal paddings of buttons in Internet Explorer 7.

Read the Changelog to get the full list of changes in this update. As always, the Simple Project Template was updated to YAML 3.2.1 and is now available in v1.0.8 in the download section.

Slimmed-Down Framework Core

Let's start with the most significant change: YAML now consists only of two core modules. The base.css is the core of the framework and provides the user with a gentle browser reset, often-needed CSS classes for layout design (float clearing, skip links, etc.), the "subtemplates" (YAML's flexible grids), a three-column layout as a universal fallback along with necessary classes for perfect printing.  The second core module, iehacks.css, offers older versions of the Internet Explorer 5.x up to 7.0 a wide range of bug fixes in a separate stylesheet. Developers can concentrate on layout development for the standard-conform browsers, as YAML takes care of most of the adjustments for IE 5.x - 7.0 automatically. The former third core module, the file print_base.css, was merged with base.css.

YAML 3.2 stylesheet sheme

A restructuring of the media-specific definitions in base.css allowed some simplification of the core, so that despite the additional grid classes, the framework core became almost 600 bytes (approx. 10%) smaller. The following chart shows the compressed byte-size of YAML's and other well-known CSS frameworks cores.

With the elimination of print_base.css, a HTTP request can be reduced (if you don't merge your final stylesheets yet) and modern browsers such as Internet Explorer 8, Firefox, Opera or Safari require a really lightweight framework core of only 2.34 kB (slim_base.css). Only older versions of the Internet Explorer (IE 5.x - IE 7.0) have to load the full core of 5.04 kB.

comparison of YAML's and other well-known CSS framework cores

New Features and dropped relics

As with every new version, the functionality of the framework increases. The flexible grid component (Subtemplates) was given four new divisions (20%, 40%, 60% and 80%). Of course, they can be optionally forced to equal heights. Next to this CSS-based solution, YAML 3.2 provides an add-on, the "SyncHeight" plugin for jQuery, for enforcing equal heights using JavaScript.

The Form Construction Kit was enhanced too. Now the class .yform can be added to any parent element, which simplifies the use in content management systems such as ExpressionEngine, where the form tag is generated automatically. The new presentational class .full is useful for designing narrow forms. It sets input fields, select boxes and textareas to the full width of the containing parent element. A new layout example demonstrates how to create multi-column forms with YAML.

In addition to these new features, some relics have been eliminated with this release. The IE fixes for the former's IDs #page_margins and #page have been removed from iehacks.css. Both IDs were transformed into reusable classes with YAML 3.1 (January 2009) . A real feature drop concerns the use of #col3's border definition to simulate column backgrounds without graphics. Although this technique is very simple to implement, it causes an accessibility issue on Windows when OS contrast modes are enabled. In this case foreground and border colors are set to the same color value, therefore content with underlying colored borders (simulated column backgrounds) become unreadable. An addition this technique forced an adaptation of the z-index in IE 6.x and 7.0, which could cause problems when you tried to select content with the mouse.

With the release of the new browser generation (Internet Explorer 8, Firefox 3.5, Safari 4 and Opera 10) the workaround for avoiding jumping centered layouts by forcing a vertical scrollbar didn't work anymore and therefore was removed from the core (base.css). It is replaced by a CSS3 solution (overflow-y: scroll;), which is now in the user style sheets (basemod.css) and therefore can be easily removed / disabled at any time.

The debug stylesheet (debug.css), which was introduced with YAML 3.0, was removed from the project. The amount of simultaneous on-screen information was too confusing. The lack of configurability and the complicated handling were further disadvantages. YAML Debug, the new code diagnostic tool, now takes over the task.

Tools for accessibility

No framework, not even YAML, can guarantee accessible websites. Nonetheless, reality has proven that it's a good idea to make best practice solutions for accessible websites available to web developers within the framework. In YAML 3.2, a new method for skip links is introduced, allowing overlaying and thereby eliminating the usual problems of their integration into the layout. Furthermore, YAML provides a JavaScript-based fix for focus problems in Webkit-based browsers such as Safari or Google Chrome.

Next: WAI-ARIA. All proved YAML sample layouts have been enriched with ARIA landmark roles. Of course, this isn't a feature of the framework. The positive effect on accessibility of webpages outweighs the remaining validation problems in the W3C validator. Therefore, as a framework developer, I think it's a good idea to use and promote this upcoming standard.

The "Accessible tabs" Plugin for jQuery by Dirk Ginader is now an official add-on of the framework. The underlying concept was developed together with Dirk Ginader two years ago. His recent implementation as a jQuery plugin is stable and extensively tested. Again, this is not a native feature of YAML. Instead, as an add-on this is a perfect way to spread these kind of best-practice solutions and to promote them.

Conclusion

In addition to these new features/improvements there are numerous minor corrections here and there (see: changelog). As with every release, the project template "Simple Project" was updated. The YAML Builder doesn't support WAI-ARIA or the new skip link solution yet, but generates full 3.2 compatible code.

This time, there was a time span of 9 months from 3.1 without any maintenance releases. The main reason was in the continuous release of new browsers, starting with Internet Explorer 8 in Spring 2009. This should be the first version of the Internet Explorer that doesn't need any CSS hacks or workarounds to support all core-features of YAML. And despite some minor adjustments in the Form Construction Kit, this fact has been confirmed now.

For me, the 3.2 release is significant step in refining the profile of YAML in terms of its modular structure based on a very slim core and its strong focus on flexible and accessible websites. And the evolution continues…

The number of Content Management Systems directly supporting YAML is growing. Today, I just want to point your attention to another Open Source CMS with built-in YAML support. The product, conceptcms (www.conceptcms.com), has been developed as commercial software since 2001. Now it is available under the GNU GPL since the end of 2008. Apart from features like out-of-the-box support for multi-customers and multi-languages, it comes with a rather sophisticated  CSS handling.  You are able to create as many style sheets you need and they can be organized in groups. There is a "Master CSS" (+ a version for IE) which will automatically be included into all templates. There is even a small CSS editor tool to work on your style sheet code.

Using YAML in conceptcms is easy: Just download the free YAML package here (either CSS only or a version with a simple example template) and do an import in your existing conceptcms-Installation. A selection of YAML CSS will be available in the "Styles" section of conceptcms, grouped into "YAML" (the core) and "MyYaml" (Styles you might want to modify).

YAML CSS in conceptcms "Styles" tab

conceptcms CSS editor

Importing and working with YAML within conceptcms is described in detail on this page.

Contrary to many other CMS, conceptcms does not ship with any "built-in" default template to display a Website, but you can either create your individual template/s from scratch (as a combination of menu item templates, structural/functional templates and HTML templates), or use free themes and templates available for download and import. These are all build on YAML style definitions. As an additional feature, conceptcms allows you to define "CSS exceptions" at menu item level (a "menu item" in conceptcms represents a navigation item and is used to dynamically integrate content from different documents or other sources), so the developer has full control where YAML CSS should be included and where not. This might be very useful if you want to implement new parts of your existing Website using  YAML, but can't change existing style definitions for older parts. Another interesting feature: conceptcms supports code generated by YAML Builder. You can use YAML Builder and paste the code into the respective CSS. When saving the CSS, conceptcms will re-write all paths (e.g. to images required for the sliding door navigation) to fit the directory logic of conceptcms. No further manual editing required.

The HTML code geneated by YAML Builder can then be used as a basic template for a "Menu Item Template" in conceptcms.

Once you feel comfortable with the numerous options the system provides in the styles context, it is very simple to work with YAML in this CMS. In addition, the conceptcms team is committed to use YAML as their standard for every theme or template they will offer in the future.

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!

Changes in Version 1.0.6 - 09/03/24
- bugfix: corrected path to iehacks.css in css/patches/patch_my_layout.css

As the developer of the (X)HTML/CSS Framework YAML, I constantly have to meet this challenge to keep the development of YAML on course. Together with Nils Pooker I wrote an essay on this topic and published it on my website in German and English language. In this essay, we clarify our position on the most common criticisms of frameworks.

Comments and discussions are strongly encouraged.

YAML Debug is a new assistive tool for web developers, that allows you to quickly review code quality and semantic structure of any website (particularly those based on YAML) as well as testing it against common oversights.

The new application is based on jQuery and as a bookmarklet it can be loaded on any website. So, have fun with the tool and get your bookmarklet on the official project page.

The current version 0.9 is still in beta stage and with this open beta test I want to get to know your thougths about this tool. For comments, bug reports or feature requests, I've set up a contact from on the project page. If there are no bigger problems, YAML Debug will replace the existing debug.css in the download package in the YAML release.

Note: If you need a playground for testing, the YAML layout examples are well suited. For testing the WAI-ARIA feature, take a look at Einfach für Alle.

Today the 34 finalists were announed and I'm extremely proud to say that six of the nominated websites are based on the YAML CSS Framework. Here they are:

Gemeinde Kranenburg

Hauptbahnhof Wien

Sozialforum Tübingen

On-Line

Düsselenergie

Darmkrebs.at

And — finally we are waiting for the additional number — the web site that presents us with the finalists, "Einfach für Alle", is using YAML too.

This is fantastic news and I really want to thank all of them for their trust in YAML and, of course, all the best for the competition. The prize winners will be announced on January, 30th in Berlin.

Update 17th. Feb. 2009: I allmost forgot to mention, that ALL six YAML-based finalists became award winners (1x golden award, 4x silver award, 1x bronze award). Congratulation.

Highlights in the new version

• Expanded layout possibilities: the new CSS classes .page_margins and .page allow an even more variable page layout.
• Form construction kit: a complete form construction kit supports the production of accessible forms, with all the design freedom you could wish.
• Equally tall content boxes: an optional extension of the flexible subtemplates allows column containers of equal height, without compromising robust design or compatibility to older browsers -- all in pure CSS.
• Add-on: microformats: this add-on provides templates for visual presentation of the most widely used microformats.
• Add-on: RTL support: this add-on delivers complete support for working with Arabic or Hebrew script. It contains all the necessary adjustments for the core and the navigation components.

The complete list of changes is available in the Changelog.

Important changes

The standard IDs #page_margins and #page have become the CSS classes.page_margins and .page. This change does not influence existing YAML layouts, backwards compatibility is guaranteed, code adjustments of existing layouts are not necessary.

In YAML 3.1, the markup of the navigation menu components was completely reworked, unified, and changed to be based completely on CSS classes. When updating existing YAML projects, please either update the markup of your menus or copy the navigation components into your own CSS folder before you update -- and link them to your layout from there.

The entire download package has been tidied up. The folder and file structures of the layout examples have been unified, and seven new layout examples are included to demonstrate the use of all the new features. All the graphics used in the package that are smaller as PNG files have been converted, and the corresponding Photoshop files are now in one central folder named examples/photoshop-files.

The Simple Project and the YAML Builder are gone through a compatibility update for YAML 3.1, keeping the current functionality. This deals mostly with the navigation components, where the markup had to be rewritten.

The new development blog

A few words on the blog. This replaces the News area of YAML.de and will be writtten exclusively in English. YAML has found a constantly growing worldwide community that I would like to encourage. Support and documentation of YAML will of course continue to be provided in German as well.

My sincere thanks go out to all my hardworking testers for their support and feedback, and I wish you all happy programming with YAML 3.1.

Dirk Jesse
Dresden, 20.01.2009

The previous project partner, T3Net GbR, is currently in liquidation. Therefore during the last few weeks a new reliable and committed partner was seached for and finally found with the firm Itratos. I would like to take this opportunity to thank the two heads behind T3Net, Dieter Bunkerd and Detlef Schäbel, for beeing such good colleagues during the last two years and I wish both of them good luck for the future.

Along with the new management there are also some changes in the product range of the shop. On September, 1st. Dieter Bunkerd, author of the developer-template "YAML for TYPO3", released its extension under GPL licence. It will therefore shortly be available for free download on the TYPO3 Extension Repository (TER). A developer license for commercial use of this extension is no longer needed.

The product range of premium templates is currently completely revised. New premium templates will be available shortly for various content management- and shop systems.

With regard to comfort the shop was technically revised. PDF invoices now provide a qualified digital signature to meet the demands of the german authorities. International payment is available via internation bank transfer and various credit cards.