Yahoo! User Interface Library

[$dbpasswd]

---

I used to waddle in the javascripts that Yahoo! uses for its web email user interface.
I should have known it was given as an open source code in their Yahoo! Developer Network web site.

http://com1.devnet.scd.yahoo.com/yui/


The Yahoo! User Interface Library is a set of utilities and controls, in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.

If you really care about usability of your web site, you would want to read their excellent blog:

http://yuiblog.com/

[$dbpasswd]

Some sample Slider Widgets:

HSV Color Picker. Amazing Adobe style color picker!
http://com1.devnet.scd.yahoo.com/yui...html?mode=dist

RGB Slider. Another amazing Adobe style color adjust controls.
http://com1.devnet.scd.yahoo.com/yui...html?mode=dist

Sliders. Simple sliders. I really prefer the compact up-down arrows.
http://com1.devnet.scd.yahoo.com/yui...html?mode=dist

Some Calendar selection examples:
http://developer.yahoo.com/yui/examp...dar/index.html
I still prefer the drop-down selection but with valid date ranges.

A Context Menu example, in which you customize the r-click menu of an object:
http://developer.yahoo.com/yui/examp...ntextmenu.html

An example form in Dialog style:
http://developer.yahoo.com/yui/examp...er/dialog.html
Makes you forget you're on the web.

[graz]

cool! thnks!

[$dbpasswd]

Just recently, the new Yahoo! Beta Homepage was put online to the public. It makes intensive use of the Yahoo! User Interface (YUI) Library.

http://www.yahoo.com/preview



Notice the on-demand content loading on the tabs using AJAX. It is more search-engine friendly compared to using iframes or framesets. I shall be seeing more of this applied to rotational banner advertising.

[$dbpasswd]

CSS Reset
http://developer.yahoo.com/yui/reset/

Annoyed by browser defaults when layouting a web page? Get rid of default margins, list styles, paddings, etc. with this CSS file:
http://developer.yahoo.com/yui/build/reset/reset.css

CSS Grids
http://developer.yahoo.com/yui/grids/


Wondering how to set the footer to remain at the bottom of your content? The foundation for good page layouts is in this CSS file:
http://developer.yahoo.com/yui/build/grids/grids.css

CSS Fonts
http://developer.yahoo.com/yui/fonts/

The best accessibility-friendly unit to use for font sizing is guest what? ems? pixels? No. Use percentage values. Just take note of the table below:

size in pixels (px) = percent (%)
10 77
11 85
12 92
13 100
14 107
15 114
16 122
17 129
18 136
19 144
20 152
21 159
22 167
23 174
24 182
25 189
26 197

Yahoo! recommends this CSS file for a cross-browser font consistency:
http://developer.yahoo.com/yui/build/fonts/fonts.css

[godCode]

pang web raman diay ni na UI. abi nako pwede pang gamit sa software...

[sinus_]

google has web toolkit available also...