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 !