Hackfest 2007 | JavaScript and CSS Framework Overview

Hackfest 2007: mmm...proxylicious

The following outlines the various JavaScript frameworks which are being contemplated for use on the Monk Workbench, with links to their Documentation and Examples. There is also an overview of the Blueprint CSS framework.

This page also links to the various JS effects demos developed by Matt Bouchard and Johnny Rodgers.


Demos

The following demos are built using the MooTools framework.


JavaScript Frameworks

Script.aculo.us

script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.

Pros

  • Widely used
  • Massive library of effects

Cons

  • Many effects seem to crash Safari
  • Heavy (648 kb)
  • Transitions seem a bit chunky/jittery

JQuery

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

Pros

  • Widely used
  • Lightweight (20 kb, compressed)
  • Nice selection of real-world widgets (sliders, trees, carts, etc.)
  • Built-in support for a floating window interface (including transition effects)

Cons

  • Many effects seem to crash Safari

Moo.fx (MooTools)

moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework.

It's very easy to use, blazing fast, cross-browser, standards compliant, provides controls to modify any CSS property of any HTML element, including colors, with builtin checks that won't let a user break the effect with multiple, crazy clicks. Optimized to make you write the lesser code possible, the new moo.fx is so modular you can create any kind of effect with it.

Pros

  • Fully Object-Oriented
  • Excellent documentation
  • Very smooth transitions/animations
  • Animation includes support for easing
  • Sexy
  • Lightweight (44kb, compressed)

Cons

  • None found yet!

Dojo

Dojo is an Open Source DHTML toolkit written in JavaScript. It builds on several contributed code bases (nWidgets, Burstlib, f(m)), which is why we refer to it sometimes as a "unified" toolkit. Dojo aims to solve some long-standing historical problems with DHTML which prevented mass adoption of dynamic web application development.

Pros

  • Lots of included widgets
  • Vector Graphics/SVG capabilities
  • Full event management
  • I/O capabilities

Cons

  • May be overkill
  • Examples seem slow

Rico

JavaScript for rich internet applications.

Pros

  • Has 'rounding' feature to round the corners of a div without using images

Cons

  • NO DOCUMENTATION
  • Not very fully featured

CSS Frameworks

Blueprint

Welcome to Blueprint! This is a CSS framework designed to cut down on your CSS development time. It gives you a solid foundation to build your own CSS on. Here are some of the features BP provides out-of-the-box: