Fork me on GitHub

How to use it?

A few things you should do to start creating awesome websites with beautiful components ;)


1. Copy and paste

<script src="http://cdn.alloyui.com/3.0.0/aui/aui-min.js"></script>

This is an ultra-small bit of JavaScript that enables you to load any AlloyUI modules on your page.

<link href="http://cdn.alloyui.com/3.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

And this is the base style for all components, it's a fork from the popular Bootstrap project with some minor additions.


2. Getting started!

Let's create an YUI instance and do some simple stuff, like capturing a DOM element and attaching a click event to it. Then let's run some transitions!

YUI().use(
  'node',
  'transition',
  function (Y) {
    Y.one('.btn').on(
      'click', function() {
        this.transition(
          {
            width: '500px'
          }
        );
      }
    );
  }
);

3. Using a UI component

Now let's take advantage of all the power that AlloyUI has and use Carousel, one the UI components.

YUI().use(
  'aui-carousel',
  function(Y) {
    new Y.Carousel(
      {
        contentBox: '#myCarousel',
      }
    ).render();
  }
);

and this is just the beginning!

Go ahead and navigate between other components using the list on the left.