YAML DevBlog | An (X)HTML/CSS Framework

YAML 3.2.1 – Release Notes

January 10th, 2010 by Dirk Jesse | News | 8 Comments

Here we go with another small maintenance release for YAML. This time, there are only a few small changes and improvments. As you can see in the Changelog, the most significant change in the YAML core comes with the renamed JavaScipt helper yaml-focusfix.js. As it turns out, on Windows 7 the Internet Explorer 8 shows a similar behavior to Webkit-browsers, it doesn't update the keybord focus when using the skiplinks. So, the JavsScript fix got an update to fix this in IE8.

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.

YAML 3.2 Release Notes

October 28th, 2009 by Dirk Jesse | News | 8 Comments

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…

YAML 3.1: fresh and polished into 2009

January 20th, 2009 by Dirk Jesse | News | 7 Comments

After a long period of development with quite a few breaks, I am very happy to announce (in the new blog!) that YAML 3.1 has been finished. The difference in numbers between 3.0.6 and 3.1 might not seem like much, but there've been many changes under the hood. I think that with this version, YAML has finally become a versatile developer's tool, supporting web programmers throughout the entire designing process of screen layout, navigation, content, forms, and print versions. The extremely flexible design possibilities have been expanded even more.

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