Yahoo Design Tools: Yahoo’s hidden gem


With all the fuss surrounding the will they/won’t they merger of Microsoft and Yahoo, it has been surprising to see just how many cool and interesting things there are buried inside the Yahoo corporation.  There is much more to Yahoo than search, directories, Flickr and  A quick scan of Yahoo! Everything reveals a whole bunch of stuff from the new social news service Buzz to online video editing with Jumpcut to the Zimbra collaboration and instant messaging service.  However, what is possibly the most interesting to web geeks is the unsung Yahoo User Interface (YUI) and Yahoo Design Pattern Library, both part of the Yahoo Developer Network.

The YUI is a collection of cross-browser controls and utilities written in Javascript that are intended to be used in developing rich internet applications (think AJAX and DHTML).  It is freely available under the BSD licence for anyone to use in commercial applications or otherwise.  Included in the YUI is a collection of Cascading Style Sheets including a comprehensive style sheet providing a large range of different grid design options for page layout.  The YUI has too many cool things to list here, but some of the cooler applications include a rich text editor, calendars and drag and drop utilities.  The YUI is quite a technical collection and is essentially a giant repository of server and client side code.

The Yahoo Design Pattern Library is a practical application of the industrial strength code in the YUI.  The patterns are an attempt to offer comprehensive solutions to a wide-range of interface design problems and pull together different pieces of the YUI code.  There are design patterns for navigation options (things like tabs and indexes), calendars, page layouts and slideshows.  Like the YUI, the Design Pattern Library is free to use by all comers and is licensed under a Creative Commons By Attribution licence.

To keep up to date on new additions to both YUI and the Design Pattern Library, keep your eyes on the Yahoo! User Interface Blog at

Note: as far as I am aware, no part of uses either YUI or the pattern library.  Now that I know they exist, there’s a very good chance some of the features will make their way into techwhimsy v2.0

This entry was posted in design and tagged . Bookmark the permalink.

2 Responses to Yahoo Design Tools: Yahoo’s hidden gem

  1. NathanaelB says:

    I’ve used YUI a couple of times before – great functionality but just have to watch how many libraries you include otherwise you’re forcing 200kb of Javascript down the pipe for something which with a few extra hours you could have custom scripted into a 5kb library; although I’m pretty sure (it’s been a few months) that all modules come in a readable format script with line breaks and indenting and a compressed version where as much whitespace as possible is removed to reduced the file size.

  2. shane says:

    That was my first thought when I saw the volume of useful looking modules – what size would the final payload be? I hate when a site takes forever to load because it’s got a big fat Javascript file.

    My Javascript skills are rudimentary at best but as long as I can understand what the different libraries do, I’m confident I could hack together something that I needed.

    I’ve met people who swear blind that all Javascript files on a website should be readable and that ‘obfuscated files’ (their words) are a scourge on free information flows. Crazy. I’d rather view an optimised site than a sluggish ‘free’ one any day.

Leave a Reply

Your email address will not be published. Required fields are marked *