Dr. Matt Lee (mattl)

I’ve been playing with the Yahoo User Interface Library (YUI) for the last few days. So far, I’ve only really looked at the CSS stuff, which is my main area of interest. In essence, YUI is a bunch of CSS (and JavaScript for those that want it) that aims to do all the boring, base level stuff for your website for you, so you can focus on doing your real work. The CSS part, comprises of three files – Reset, Fonts and Grids. There’s also Base, which is the opposite of Reset. The purpose of Reset is to take all the default styles that all the major browsers have for each HTML element, and reset them to absolute basics — farewell bold on your strong tags, au revoire to the margin on a list item, etc. This is useful, and I’m already using it on both gnu.org and fsf.org, albeit not the YUI versions, though I am confident I could swap them out today and not lose anything.

The second part of YUI’s CSS library is Fonts, which does some pretty neat stuff with regards to fonts and font sizes. You might not realise this, but fonts are actually pretty hard to get right on the web. There are several problems at work here, which stem from the fact that Windows, Mac OS X and GNU/Linux all handle default font sizes and resolution differently, not to mention that they all have different default fonts installed. It all boils down to one of two approaches to fix the problem — a) Try lots of different fonts and sizes and hope it all works or b) Set a basic font face like ‘sans-serif’ and leave the size well alone. The latter is what we currently do on gnu.org, while fsf.org being more graphical uses a defined set of fonts and sizes, but doesn’t always get this right. YUI’s fonts CSS has been tested and designed for all browsers and all major operating systems, and has a bunch of clever mathematics in it, to ensure fonts can be scaled up reliably, too.

Lastly, the best part of YUI in my mind… grids. Grids are the cornerstone of design, and cruicial design elements for the web. Most web pages have some kind of grid set up. I say most, as www.gnu.org is the least grid like website I know of, not surprising considering how it looked as recently as July 2006, 99% of the pages are one column of text. However, this will change, and when it does, I’ll be using YUI to make it happen. There’s even a couple of neat online tools to define a grid through a point and click interface.

Overall, the YUI library is a fantastic contribution to both web standards, but also to free software. I hope that more free software web projects will embrace the YUI contributions and use them to enhance their existing CSS and JavaScript, giving us better web applications for everyone.

I haven’t used anything else so far, but I do have the YUI Rich Text Editor installed in Movable Type, which I use to publish this blog. It’s really good, and I’m normally against web based rich text editors and their ability to produce decent markup — YUI’s editor however, takes care of this, and makes editing in Movable Type a much more pleasant experience.

My only complaint is that while Yahoo have made various videos available to demonstrate YUI, they have made these videos rely on Flash. Posting Ogg Theora videos would allow users of any platform to learn how to use YUI, without the need to rely on proprietary software. All in all, YUI is a wonderful piece of technology and I can’t wait to use it in my next project.

YUI is released under the modified BSD license.