By Kevin Yank

Yahoo! UI and DP Libraries Updated

By Kevin Yank

Yahoo! has announced the first updates to the Yahoo! UI Library and the Yahoo! Design Patterns Library (see JavaScript Libraries and Patters: Yahoo! Does AJAX).

As expected, the update to the Yahoo! UI Library introduces a handful of new JavaScript-powered user interface components. Most notably, the library now includes components for generating mouse- and keyboard-accessible hierarchical menu systems based on semantically-correct unordered lists in the HTML code.

More unexpectedly, the UI library now includes some valuable CSS code in addition to the JavaScript wizardry. CSS Reset smooths out the many differences between the default styles applied to HTML elements in current browsers, thereby providing a common baseline for you to apply your own styles to. CSS Fonts provides predefined font family groups and font sizes that work reliably and consistently across current platforms.


Finally, and this is a big one, CSS Page Grids drastically simplifies the task of CSS page layout by offering a set of seven reusable, stretchy, two-column page layout templates with headers and footers. Each column can be further divided into vertically stacked sets of sub-columns using <div>s with a set of predefined grid classes for various percentage widths.

Although Yahoo! does not provide any, it would be very practical to produce pluggable style sheets to apply visual formatting to the page layouts produced using CSS Page Grids. If this layout technique gains traction, I would expect a site skinning community (if not a commercial market) to spring up around such styles. This approach to laying out pages is also readily toolable, and supporting them is the next logical step for WYSIWYG design tools like Dreamweaver.

Even more unexpectedly, Yahoo! has open-sourced the development of the Yahoo! UI library by placing it on SourceForge, where developers will be able to report bugs and obtain minor updates and fixes between major releases of the library. Yahoo! will not as yet be accepting community-contributed patches or managing mailing lists via SourceForge, but will continue to use the ydn-javascript Yahoo! Group for these purposes.

The update to the Yahoo! Design Pattern Library has vastly expanded it, roughly doubling the number of design patterns it contains. Most of the new patterns are grouped under Invitations (ways of signalling the presence of an interactive feature) and Transitions (ways of signalling a change in the application state).

Community initiatives like WebPatterns are moving at a glacial pace to ensure that everyone gets their say in defining the language of web design. Meanwhile, Yahoo! has thrown caution to the wind with the Yahoo! Design Pattern Library, and looks set to define the de facto standard in Web patterns before WebPatterns and its ilk even get off the ground.

  • Wow, Yahoo have really been busy and have put a lot of thought into this. Awesome stuff. And so nicely presented too.

  • LiQ

    Come on Kevin, stop hiding in the DHTML-corner. Your all on about AJAX (both positive and negative, which is very good), but please cover some .NET AJAX. That would be Atlas. It’s about time for an article or a longer blog covering the ups and downs.

  • Where have they been all my life :)

  • babyboy808

    Just tried a few of them, and they are brillaiant. Excellent Stuff

  • This release was a much anticipated release as there were quite a few updates to the libraries themselves. Just go through some of the change logs and you’ll see what’s been added and fixed and I’m sure developers will be most pleased with it.

    The best part about all the utilities is that when properly minified and sent with the proper compression, none of them go beyond 2.5k (which just rules).

    One of my favorite updates particularly was to the DOM util which just added a “getElementsBy” method – which pretty much says “Hey, we’re not here to invent the next getElementsBySomeThing, instead we’re going to give you the tools to do it yourself.” Basically what it does is it allows you to pass in your own (boolean) method, and let that determine which elements are valid.

    You’ll notice in the getElementsByClassName() function that it natively uses the getElementsBy() by just creating a regular expression that tests against the className, returns it into a method, then sends the method to the getElementsBy(). It really is quite clever.

  • Yahoo! is the best. I’m considering starting to use the Y! library instead of the prototype library on my personals sites. so much good javascript and design patterns.

  • ajking

    Just a sideways comment as a fan of computing in general, programming in particular: if there is ever a Computing Hall of Fame, I would hope to see Brendan Eich in it. JavaScript’s creator must be very proud to see his “baby” doing everything from providing the user-scripting in Acrobat, Illustrator and Photoshop to driving server-side apps to being the foundational tool for “Web 2.0” development through AJAX, etc. etc. Of course, Brendan would probably bow in the direction of Kernighan and Ritchie for the source of his inspiration, but you don’t generally see as much excitement being generated over C libraries as we witness over things like Prototype or the Yahoo! releases. Very cool.

Get the latest in JavaScript, once a week, for free.