YAML DevBlog | An (X)HTML/CSS Framework

YAML 3.2 Release Notes

October 28th, 2009 by Dirk Jesse

The new version 3.2 of the (X)HTML/CSS framework YAML is now available for download. Only a few days ago, on October 15^th, 2009, the project celebrated its 4th birthday -- and I am extremely proud to say that even after such a long time there is room for improvement and new ideas. The new release institutes some major changes, described below.

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…