Fork me on GitHub

First Steps

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


1. Copy and paste

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

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


2. Getting started!

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

AUI().use(
  'node',
  'transition',
  function (A) {
    A.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 one the UI components.

AUI().use(
  'aui-tooltip',
  function(A) {
    var tooltip = new A.Tooltip(
      {
        bodyContent: '<iframe width="500" height="280" src="http://www.youtube.com/embed/KzorZ1CO6Vs" frameborder="0" allowfullscreen></iframe>',
        trigger: '#tooltip'
      }
    ).render();
  }
);

Hover for a simple tooltip

and this is just the beginning!

AlloyUI has more than 60 components! Go ahead and navigate between them using the list on the left.