hacking with yui 3 - open hack day 2011
DESCRIPTION
TRANSCRIPT
Using YUI to get things done
@knutties – Web Developer
What is YUI?
YUI 3 – Open source Javascript/CSS library
Highly modular and extensible
Wonderfully documented
Javascript library with package management
Lets you do a lot with very little code– Very suitable for hacks
How can you hack with YUI?
Build and manipulate the user-interface– Layouts
– Styling
– Widgets
– Utilities
Work with data– Read
– Process
– Write
Layouts – YUI 3 Grids
Different layouts with ready-made classes
CSS Class Description
.yui3-u Fits width, unless width is specified
.yui3-u-1 Fits 100% width
.yui3-u-1-2 Fits 1/2 of available width
.yui3-u-1-3 Fits 1/3 of available width
.yui3-u-2-3 Fits 2/3 of available width
.yui3-u-1-4 Fits 1/4 of available width
.yui3-u-3-4 Fits 3/4 of available width
Consistent Styling
CSS Reset– Remove default browser styling
CSS Base– Consistent styles for common HTML elements
CSS Fonts– Consistent fonts across browsers
Can be applied globally/contextually
Widgets
Auto-complete
Charts
DataTable
Dial
Overlay
Rich Text Editor
Slider
Tab-view
Utilities
Core– Node , Nodelist – collect, create and operate on DOM
nodes
– Event – simplified event handling, custom events
Async-queue
Drag-and-Drop
Animations
Caching (offline included)
History management
Work with data - Read
Local sources – javascript arrays/objects
IO – Plain old XHR, with flash support for X-Domain
JSONP
YQL– Easy way to access plethora of APIs from Javascript
– Very powerful abstraction
Work with data - Write
YQL– Insert/update queries
Storage-Lite by Ryan Grove– Local key-value store
– Supports auto-serialization/de-serialization of javascript objects
– Works seamlessly across browsers
Enables building completely client-side applications
– I don't need wifi :-)
What is cool about YUI?
On GitHub – Fork away
Contribute your modules to the gallery
Dav Glass– YUI 3 on NodeJS
– Add YUI 3 to your greasemonkey script
You are free to use jQuery :-)
That is all !