Components is a high-level JavaScript framework. It helps you write cleaner, clearer applications with less code and less effort.

It revolves around having a model for the interface instead of tons of CSS queries. The model gives you all the page access you need, with simple conventions for describing Requests, Updates and Events.

It looks like this...

Here's a rewrite of an example from jQuery:

bind('gallery', {

  onLoadFocal: function() {
    this.clear('loading');
    this.focal.appear();
  },

  load: function(source) {
    this.apply('loading');
    this.focal.fade(function() {
      this.replace('<img class="focal" />').element.src = source;
    });
  }
});

bind('focal');

bind('thumb', {

  onClick: function() {
    this.gallery.load(this.element.src);
    return false;
  }
});

<div id="gallery">
  <h3 class="focal">Click on an image to view it full size.</h3>

  <ul>
    <li><a href="#"><img class="thumb" src="img/1.jpg" alt="image" /></a></li> 
    <li><a href="#"><img class="thumb" src="img/2.jpg" alt="image" /></a></li> 
  </ul>
</div>