Get started

From community websites to web applications, these guidelines will help you achieve a consistent look, bringing the Ubuntu and Canonical brands to the web with precision.

In this section you will find the Ubuntu web style guide and a front-end framework, which you can apply to your web projects.

Sites created within Canonical should follow this style guide closely, whereas external sites are free to adapt and expand the existing components to their needs.

Using the framework

To use the framework, you can link to Canonical’s asset server. Use the following code snippet to link directly to the asset server:

<link rel="stylesheet" type="text/css" media="all" href="http://assets.ubuntu.com/sites/guidelines/css/latest/ubuntu-styles.css"/>

Place this line in your header, just below your <title> tag.

What’s included?

The framework consists of a single CSS file, and the Ubuntu and YUI‘s JavaScript files.

Other formats

Syntax

This style guide uses the HTML5 doctype, following the XHTML syntax for legibility and consistency, which means:

  • closed and self-closing elements
    <br /> and not <br>
  • lowercase elements
    <p> and not <P>
  • quoted attributes
    <p class="note"> and not <p class=small>

For more on this subject, read “HTML5 syntax – HTML vs XHTML” on Stack Overflow or “XHTML” on Mozilla Developer Network.

Default styles

The default styles, defined in ubuntu-styles.css, shouldn’t be altered, as they provide the foundation on which components are built upon.

Links

The default link colour is Ubuntu orange: #DD4814. Ubuntu orange should only be used for linked text.

Headings and other non-inline links

When links are not within a text block, the link should also be indicated by a right side angle quote (&rsaquo;).

Example:

Ubuntu is the world’s favourite free operating system, with more than 20 million people preferring it to commercial alternatives.

Find out why ›

Note: Make sure the link description always uses action verbs, for example "Read more" and not "More".

The default print stylesheet improves the legibility of the content when printed. It:

  • sets all backgrounds to white and text to black
  • sets the default font size to 16pt
  • changes the colour of links to a dark grey and underlines them
  • hides unnecessary elements for print: navigation, search, links to top and footer
  • removes the float from the main container and adds printer-friendly margins

Acknowledgments

The structure and content of this documentation has been inspired by Bootstrap.

Thank you to the team at YUI, the JavaScript framework used by this style guide.