Getting started

Most Atlassian products have AUI installed as a plugin. The flat pack is great for prototyping or deploying in apps which can't load a plugin.

Documentation

AUI provides JavaScript, CSS and Soy templates (or markup patterns) for a range of ready-made UI components.

Detailed documentation

AUI Sandbox

The AUI Sandbox is a tool that will help you become acquainted with AUI and give you quick code examples of how to use its components

Sandbox

Serve AUI from CDN

Serving AUI from a CDN will make your pages load faster and you won't have to maintain out of date resources.

Using the flat pack from CDN

Note that CDN resources are deployed several days after release. If you are using an AUI release that's hot off the press (that is, it's only just released) please check to see that the resources you're using are in fact deployed onto the CDN.

Core

To use core AUI components, include the following CSS and JS in your HTML:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/aui/5.3/css/aui.css" media="all">
<!--[if lt IE 9]><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/aui/5.3/css/aui-ie.css" media="all"><![endif]-->
<!--[if IE 9]><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/aui/5.3/css/aui-ie9.css" media="all"><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/aui/5.3/js/aui.js"></script>
<!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/aui/5.3/js/aui-ie.js"></script><![endif]-->

Note that AUI supports jQuery 1.7.2 and 1.8.3 - alter the above jQuery script as required.

To use additional components, include the following resources:

Date picker

<script src="//cdnjs.cloudflare.com/ajax/libs/aui/5.3/js/aui-datepicker.js"></script>

Experimental components

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/aui/5.3/css/aui-experimental.css" media="all">
<script src="//cdnjs.cloudflare.com/ajax/libs/aui/5.3/js/aui-experimental.js"></script>

Javascript Soy templates

<script src="//cdnjs.cloudflare.com/ajax/libs/aui/5.3/js/aui-soy.js"></script>

Download flat pack

Download the static files and bundle it in your project like any other resources.

Download flat pack

Loading the flat pack

What's in this flat pack?

This flat pack contains both core/stable components from AUI, plus some components with experimental APIs (in separate resources). The flat pack is great for rapid prototyping - the code here is the code that's shipping in AUI (and hence in Atlassian products).

Download the AUI flat pack

How to load this flat pack

If you want everything including AUI's dependencies, Experimental features and compiled-JS Soy templates, add this to the HEAD of your templates or page:

<link rel="stylesheet" href="aui/css/aui-all.css" media="all">
<!--[if lt IE 9]><link rel="stylesheet" href="aui/css/aui-ie.css" media="all"><![endif]-->
<!--[if IE 9]><link rel="stylesheet" href="aui/css/aui-ie9.css" media="all"><![endif]-->
<script src="aui/js/aui-all.js"></script>
<!--[if lt IE 9]><script src="aui/js/aui-ie.js"></script><![endif]-->

...remembering to update the path to point to the location of your copy. This is the recommended/default option.

For more granular control (eg. to skip Experimental or drop IE8 support), you can use the appropriate combination of these lines (note the dependencies are required):

<link rel="stylesheet" href="aui/css/aui.css" media="all">
<link rel="stylesheet" href="aui/css/aui-experimental.css" media="all">
<!--[if lt IE 9]><link rel="stylesheet" href="aui/css/aui-ie.css" media="all"><![endif]-->
<!--[if IE 9]><link rel="stylesheet" href="aui/css/aui-ie9.css" media="all"><![endif]-->
<script src="aui/js/aui-dependencies.js"></script>
<script src="aui/js/aui.js"></script>
<script src="aui/js/aui-experimental.js"></script>
<script src="aui/js/aui-soy.js"></script>
<!--[if lt IE 9]><script src="aui/js/aui-ie.js"></script><![endif]-->