The Yahoo! User Interface Library is really a great tool for web development, and I’m not saying that just because I work there.
The YUI CSS foundation is composed of 3 components, which I have learned to love:
- Reset creates a level playing field across browsers.
- Grids offers three preset page widths, seven core templates, and the ability to nest subdivided regions of one to four columns.
- Fonts offers cross-browser typographical normalization and control.
Being able to rely on these facilities is a great time-saver once you understand how they work. For example, Fonts requires sizes to be declared as percentage values. Many web devs at Yahoo! have the pixel-to-percentage table in their cubicle, I made a Dashboard Widget for Mac OS X. It’s just a semi-transparent image with the pixel/percent table and matching Arial sample text as rendered by Safari, IE, and Firefox.
Download here: yui-fontswdgt.zip [96 KB]
In other news, they fixed my A/C. I’m glad!
Update: Eric Miraglia makes me famous on yuiblog.com
Neat! Your blog is now on my blogroll. Do you have a full-text RSS feed? All I’m getting is snippets…
Great widget, this is going to come in really handy. Finally I will have this cheat sheet with me anywhere I’m working instead of relying on the tattered print out stuck to the side of my cube.
One question, why did you make it transparent? It’s not that big of a deal, it just makes it a little hard to read sometimes, I’m just confused as to why you wouldn’t just make it opaque.
Whit: The widget was made (slightly) transparent so you can hover it over some font you are trying to match, and find the correct size setting.
Cheers, and thanks for your comment!
Pingback: gaarf.info » Blog Archive » YUI Fonts: updated Dashboard Widget
I am a fan of YUI. Though, when I use yui-fonts the font sizes seem clearly different in for example Firefox and IE. Am I missing something here?
matt: make sure you are following the examples from http://developer.yahoo.com/yui/examples/fonts/fonts-size.html
Love this widget, but do you have any plans to update it with the new percentage values?
Craig: an updated widget with new percentage values is available @ http://gaarf.info/2007/07/14/yui-fonts-updated-dashboard-widget/