YUI 3: Lighter, Faster, Easier to Use

Show Me the Money!

I’ve built a simple example page demonstrating how easy and powerful YUI 3 is to use. To save space here in the article, I’ll avoid showing you all the markup and code, but you can view the full source on the example page.

The first task I do is load up an instance of YUI with the Animation Utility, Slider Widget, MenuNav Node Plugin, and Drag & Drop Utilities. YUI goes and fetches the necessary files and their dependencies from the Yahoo servers. It then returns an instance of YUI with the loaded components to the callback function, which receives it in the variable named Y:

YUI().use('anim', 'slider', 'node-menunav', 'dd-drag', function (Y) { ...

Next, I create a simple animation to bounce the page’s contents into view. In order to do this, I instantiate a new Animation object. I pass it a reference to the element with the id main and tell it to animate the top value to 0 from wherever it currently is (right now it’s at -1000px, as specified in the example page’s markup). I also specify that the animation should take three seconds and that it should use the elasticOut easing method. Once the object is instantiated, it’s just a simple case of running it with the run method:

 
/*  
* Bounce-in Anim  
*/  
var anim = new Y.Anim({  
 node: '#main',  
 to: {  
     top: 0  
 },  
 duration: 3,  
 easing: Y.Easing.elasticOut  
 });  
anim.run();  


Next, I set up a Slider object in order to let users adjust the page’s base font size. YUI’s fonts CSS (included in the example page) sets the page’s base font size to 13 pixels. It does this by setting the font-size value on the body element, from which all other font sizes are calculated. This is what we’re going to manipulate in order to change the whole page’s font sizes.

I grab a node reference for the body element, which will be used later in conjunction with the slider. Then I create a slider widget. I set the minimum value to 13 and the maximum to 28 because I want the font size to stay within these values. I then make sure the slider’s rail size is 100 pixels wide. Finally, I set the slider’s thumb image (which is loaded directly off Yahoo’s hosted servers):

/*  
* Font Size Slider  
*/  
 var body = Y.get('body');  
 var slider = new Y.Slider({  
   min: 13,  
   max: 28,  
   railSize: '100px',  
   thumbImage:  
   'http://yui.yahooapis.com/3.0.0pr2/build/  
   slider/assets/skins/sam/thumb-classic-x.png'  
   });

Once the slider is instantiated, it’s just a simple matter of rendering it. I do this by calling the slider’s render method with the class name of the element I want it rendered in. The slider widget will render in the first element in the DOM that matches that class name:

slider.render('.horiz_slider');

The only task left to do now is to wire up the slider so that it actually adjusts the page’s font size. This I do by hooking into its after event. YUI 3 has standard on and after events you can hook into to make event handling like this much easier than in the prior version. Now, whenever the valueChange event is fired, our body element’s fontStyle value is changed:

slider.after('valueChange', function (e) {  
 body.setStyle('fontSize', e.newVal + 'px');  
});

I’ve also set up a navigation menu. Once the page’s content is ready I plug the MenuNav Node Plugin into the nav node. It then automatically sets up a navigation menu based on the markup that it finds—as simple as that! Here’s the code:

/*  
* MenuNav  
*/  
Y.on('contentready', function () {  
 this.plug(  
   Y.plugin.NodeMenuNav,  
     {mouseOutHideDelay: 1});  
}, '#nav');

Finally, I make the picture of yours truly draggable by simply instantiating a new drag and drop object and passing it a reference to my picture’s class name. As soon as the object is created, the image is draggable. As an added touch, I change the mouse cursor when it hovers over the image so that it’s apparent that the image is draggable:

/*  
* Drag and Drop  
*/  
 var dd = new Y.DD.Drag({  
   node: '.author'  
 });  
 
 Y.get('.author').setStyle('cursor', 'move');  
});

Summary

So, as you can see, YUI 3 is a completely different animal than its predecessor. Along with a new syntax, you gain a faster, lighter, easier, and more flexible library—ready to take on your most ambitious web projects.

Seeing this was a primer, we’ve barely scratched the surface of what’s possible with YUI 3. For more reading, check out the YUI 3.x Preview Release 2 page, Satyen Desai’s presentation on YUI 3, and the YUI 3 forum.