This tutorial shows you how to incorporate the Atlassian Design Guidelines (ADG) into your applications using the Atlassian User Interface (AUI) library. It teaches you the resources that make up the AUI library and how to use them to prototype an ADG compliant UI. You'll learn how to configure a plugin to use the AUI library. You'll also learn how to add advanced AUI components to a plugin. The tutorial contains the following sections:
- Download and Explore the AUI Distribution
- Use AUI in an Add-on
- Add Page Layout and Navigation
- Add a Form to Your Plugin
Before working through this tutorial, you should have worked through Set up the Atlassian Plugin SDK and Build a Project tutorial.
How to work through the Tutorial
You should work through each page sequentially as each new page builds on the material from the previous page. At the end of each page is a Next Steps heading that tells you where to go next. Beginners should allow two hours to work through the entire tutorial.
If you are experienced or just skimming pages, much of the tutorial will be familiar to you and it should not take too long. If you get lost, you can use the navigation bar (to your left) to locate the next page. If you feel confident skipping pages or just going to pages you need, feel free to do that too.
The Tutorial Source Code
We encourage you to work through this tutorial. If you want to skip ahead or check your work when you are done, you can find the plugin source code on Atlassian Bitbucket. Bitbucket serves a public Git repository containing the tutorial's code. To clone the repository, issue the following command:
Alternatively, you can download the latest source.