JavaScript

Setting up YUI

Ubuntu’s JavaScript uses YUI as its framework. You will need to import YUI followed by the Ubuntu JavaScript file.

Code:

<script src="http://assets.ubuntu.com/sites/ubuntu/latest/u/js/plugins/yui-min.js"></script>
<script src="http://assets.ubuntu.com/sites/ubuntu/latest/u/js/core.js"></script>

Equal-height columns

To create equal-height boxes in a row, add the class .equal-height to their parent container.

Example:

Ubuntu is an ancient African word meaning ‘humanity to others’. It also means ‘I am what I am because of who we all are’. The Ubuntu operating system brings the spirit of Ubuntu to the world of computers.

Ubuntu is an ancient African word meaning ‘humanity to others’. It also means ‘I am what I am because of who we all are’. The Ubuntu operating system brings the spirit of Ubuntu to the world of computers.

Code:

<div class="equal-height">
			
 <div class="four-col box">
  <!-- Content goes here -->
 </div>
	
 <div class="eight-col box last-col">
  <!-- Content goes here -->
 </div>
 
</div>

Tooltips

To add tooltips to an element apply the class .tooltip and add the tooltip content to its title attribute.

Example:

  • Firefox
  • GIMP
  • Inkscape
  • Pidgin
  • Thunderbird

Code:

<ul class="inline-icons">
 <li><img src="http://www.ubuntu.com/static/u/img/icons/icon-firefox-32x32.png" alt="Firefox" title="Firefox" class="tooltip" /></li>
 <li><img src="http://www.ubuntu.com/static/u/img/icons/icon-gimp-35x35.png" alt="GIMP" title="GIMP" class="tooltip" /></li>
 <li><img src="http://www.ubuntu.com/static/u/img/icons/icon-inkscape-35x35.png" alt="Inkscape" title="Inkscape" class="tooltip" /></li>
 <li><img src="http://www.ubuntu.com/static/u/img/icons/icon-pidgin-35x35.png" alt="Pidgin" title="Pidgin" class="tooltip" /></li>
 <li><img src="http://www.ubuntu.com/static/u/img/icons/icon-thunderbird-32x32.png" alt="Thunderbird" title="Thunderbird" class="tooltip" /></li>
</ul>

Tabbed content

You can show content in tabs by using the .tabbed-menu class on the tabs’ navigation list and the .tabbed-content along with the .box-grey classes on each tab’s container.

Example:

Compute

The OpenStack Compute component (codenamed Nova) enables you to provision and manage large networks of virtual machines, creating a redundant and scalable cloud-computing platform, based on Ubuntu. It gives you everything you need to run instances, manage networks and control access through users and projects. Like the rest of the Ubuntu operating system, it supports most standard hardware configurations and well-known hypervisors.

Object storage

OpenStack Object Storage (codenamed Swift) creates redundant, scalable object storage using clusters of standardised storage servers. Rather than a file system or real-time data storage system, it provides a long-term storage system for more permanent, static data. Examples include virtual machine images, photo storage, email storage and backup archiving.

Authentication

The OpenStack Authentication service (codenamed Keystone) provides identity, token, catalogue and policy services for use by OpenStack components. It provides a pluggable back-end that has been designed to support various protocols (e.g. Basic Auth, OAuth, OpenID) for authentication and authorisation, allowing clients to obtain security tokens to access different cloud services.

Management

The OpenStack management service or dashboard (codenamed Horizon) provides OpenStack users with a web-based user interface with which to control OpenStack’s component services (Nova, Swift, Keystone, Glance) and a single API with which to access them.

The Horizon application also ships with a set of API abstractions for the core OpenStack projects, enabling developers to work on OpenStack without intimate knowledge of the APIs of every component.

There are three central dashboards, covering the core OpenStack applications:

  • Raw
  • VHD (Hyper-V)
  • VDI (VirtualBox)

Code:

<div class="tabbed-menu">
 <ul class="no-bullets">
  <li><a class="active slideless" href="#compute">Compute</a></li>
  <li><a class="slideless" href="#object-storage">Object storage</a></li>
  <li><a class="slideless" href="#authentication-service">Authentication</a></li>
  <li><a class="slideless" href="#management-service">Management</a></li>
 </ul>
 <img src="http://www.ubuntu.com/static/u/img/patterns/tabbed-nav-arrow.png" class="arrow" height="6" width="12">
</div>

<div id="compute" class="tabbed-content box-grey twelve-col">
 <!-- Content goes here -->
</div>

<div id="object-storage" class="tabbed-content box-grey hide twelve-col">
 <!-- Content goes here -->
</div>

<div id="image-service" class="tabbed-content box-grey hide twelve-col">
 <!-- Content goes here -->
</div>

<div id="authentication-service" class="tabbed-content box-grey hide twelve-col">
 <!-- Content goes here -->
</div>

<div id="management-service" class="tabbed-content box-grey hide twelve-col">
 <!-- Content goes here -->
</div>

Hash bang

The hash bang function removes the fragment identifiers (the part after the “#”) from inner page links and attaches those to the element via the data-hash attribute.

When a link with a data-hash attribute is clicked, the JavaScript animates a scroll to 40px above the location of the element with the relevant id.

Note that the links with no identifier after the # scroll to the top of the page. For example the “Back to top” links.