Grid

The default grid has 12 column (“col”) units and 20px gutters. Each col unit takes up 6.3053% of the total width.

To create a fixed-width layout at large screen sizes (984px and up), add a pixel or em value to .wrapper, for example:

.wrapper {
 width: 984px;
}

will result in:

  • total content width: 904px
  • col unit width: 58px
  • gutter width: 19px

Responsive grid

When content is added within rows and column units, the grid becomes fluid and responsive, adapting to various screens sizes, with a default maximum width of 984 pixels.

The framework currently uses three breakpoints:

  • Small screen styles: 767px and below
  • Medium screen styles: 768px and up
  • Large screen styles: 984px and up

As an example, at medium screen sizes a row with four blocks will be become two rows of two blocks, and at small screen sizes the blocks become stacked.

responsive-grid

Rows

All content must be inside a .row container so that it correctly aligns to the grid.

The .row class will create a full-width wrapper around row contents with padding and a bottom border. You can have columns and boxes within rows.

The .row class can be expanded by the .row-hero, .row-quote, .row-enterprise, and .row-image-centered classes.

.row-hero

This class should be used for the first row on a page that has breadcrumb navigation. It removes the top padding from the row, as it is not needed. You can also use this class to target the top row of a page for extra styling, when required.

Code:

<div class="row row-hero">
 <h1>Meet Ubuntu</p>
 <p>Fast, free and incredibly easy to use, the Ubuntu operating system powers millions of desktop PCs, laptops and servers around the world.</p>
 <a href="#" class="link-cta-ubuntu">Get Ubuntu</a>
</div>

.row-quote

This class should be used for full-width quotes.

Example:

Ubuntu is an ancient African word meaning ‘humanity to others’.

Canonical

Code:

<div class="row row-quote">
 <blockquote class="pull-quote">
  <p><span>“</span> Ubuntu is an ancient African word meaning 'humanity to others'. <span>”</span></p>
  <p><cite>Canonical</cite></p>
 </blockquote>
</div>

.row-enterprise

This class will make the background of the row aubergine and invert the colour of text and buttons:

Example:

An example title

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.

Button

Code:

<div class="row row-enterprise">
 <div class="eight-col">
  <h3>An example title</h3>
  <p>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.</p>
  <p><a class="link-cta-canonical">Button</a></p>
 </div>
</div>

.row-image-centered

If you apply this class to the row, when you place an image in a <span> it will be centred vertically and horizontally within the row.

Example:

Note: By placing the <span> before the text it will place the image centered on the left.

An example title

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’…

Canonical symbol

Code:

<div class="row row-image-centered">
 <div class="six-col">
  <h3>An example title</h3>
  <p>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.</p>
 </div>
 <span>
  <img src="/wp-content/uploads/canonical-symbol-167x167.png" alt="Canonical symbol" />
 </span>
</div>

Columns

Layouts can be created combining rows with different number of columns to a maximum of 4 columns per row. Each column must span a minimum of 3 column units. The last col in a row must also include the class .last-col to remove the right margin, except .twelve-col.

Note: Text shouldn’t go across more than 8 column units (.eight-col).

1-column layout

Code:

<div class="twelve-col">
</div>

2-column layouts

Code:

<div class="six-col">
</div>

Code:

<div class="six-col last-col">
</div>

Code:

<div class="eight-col">
</div>

Code:

<div class="four-col last-col">
</div>

Code:

<div class="nine-col">
</div>

Code:

<div class="three-col last-col">
</div>

3-column layouts

Code:

<div class="four-col">
</div>

Code:

<div class="four-col">
</div>

Code:

<div class="four-col last-col">
</div>

Code:

<div class="six-col">
</div>

Code:

<div class="three-col">
</div>

Code:

<div class="three-col last-col">
</div>

4-column layout

Code:

<div class="three-col">
</div>

Code:

<div class="three-col">
</div>

Code:

<div class="three-col">
</div>

Code:

<div class="three-col last-col">
</div>

Column dividers

To add a vertical divider to columns, use the class .vertical-divider together with .row in the parent container. The vertical dividers will show up at width sizes of 984 pixels and up.

Example:

Ubuntu is an ancient African word meaning ‘humanity to others’. It also means ‘I am what I am because of…

Ubuntu is an ancient African word meaning ‘humanity to others’. It also means ‘I am what I am because of….

Ubuntu is an ancient African word meaning ‘humanity to others’. It also means ‘I am what I am because of…

Code:

<div class="row vertical-divider">
 <div class="four-col">
  <!-- Content -->
 </div>
 <div class="four-col">
  <!-- Content -->
 </div>
 <div class="four-col last-col">
  <!-- Content -->
 </div>
</div>

Empty columns

Adding empty columns before or after an element might be useful when you need extra space between elements and columns than that provided by the default grid.

The classes .prepend-one, .prepend-two, .prepend-three, and so on, will add empty columns before the element to the number of column units specified in the class.

Note: in small sized screens, empty columns won’t have an effect on the element they’re applied to, as the content is shown in a linear way.

Code:

<div class="eight-col prepend-four">
</div>

The classes .append-one, .append-two, .append-three, and so on, will add empty columns after the element to the number of column units specified in the class.

Code:

<div class="eight-col append-four">
</div>

Offset columns

The ability to offset columns can be useful when you want to expand an element beyond its parent container, usually to create interesting visual effects or simply to adjust element alignments.

The classes .pull-one, .pull-two, .pull-three, and so on, will pull the element to the left the number of column units specified in the class.

Note: in small sized screens, offset columns won’t have an effect on the element they’re applied to, as the content is shown in a linear way.

Code:

<div class="eight-col pull-two">
</div>

The classes .push-one, .push-two, .push-three, and so on, will pull the element to the right the number of column units specified in the class.

Code:

<div class="eight-col push-six">
</div>

The default navigation used on ubuntu.com is composed of the following elements:

  1. Ubuntu brand
  2. Main top level sections
  3. Current section
  4. Search input
  5. Breadcrumbs
  6. Current top level section (large screens)
  7. Current page
  8. Third level sections
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 7
  7. 8




  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8

Code:

<header class="banner global" role="banner">
 <nav role="navigation" class="nav-primary nav-right">
  <div class="logo">
   <a class="logo-ubuntu" href="/">
    <img width="106" height="25" src="http://assets.ubuntu.com/sites/ubuntu/1044/u/img/logos/logo-ubuntu-orange.svg" alt="Ubuntu" />
    <!-- Use this tag for the name of your sub-site <span>Design</span> -->
   </a>
  </div>
  <ul>
   <li class="accessibility-aid"><a accesskey="s" href="#main-content">Jump to content</a></li>
   <li><a class="first" href="#">Cloud</a></li>
   <li><a href="#">Server</a></li>
   <li><a href="#">Desktop</a></li>
   <li><a href="#">Phone</a></li>
   <li><a href="#">Tablet</a></li>
   <li><a href="#">TV</a></li>
   <li><a href="#">Management</a></li>
   <li><a href="#">Download</a></li>
  </ul>
  <form action="/search" id="google-appliance-search-form" class="header-search">
    <input type="search" maxlength="255" name="q" id="edit-keys" class="form-text" placeholder="Search" value="" />
    <button type="submit"><img src="http://assets.ubuntu.com/sites/ubuntu/1044/u/img/search-white.svg" alt="Search" height="28" /></button>	
  </form>
 </nav>
</header>

<div class="wrapper">
 <div id="main-content" class="inner-wrapper">

  <nav role="navigation" class="nav-secondary clearfix">
   <ul class="breadcrumb">
    <li><a href="#">Cloud</a> &nbsp;&rsaquo;</li>
    <li class="active"><a href="#">Cloud tools</a> &nbsp;&rsaquo;</li>
   </ul>
   <ul class="third-level">
    <li><a href="#">Juju</a></li>
    <li><a href="#">MAAS</a></li>
    <li><a href="#">Jumpstart</a></li>
   </ul>
  </nav>

  <!-- Main content -->

 </div>
</div>

The default footer is composed of the following elements:

  1. Footer level A
  2. Footer level B
  3. Legal section
  4. Ubuntu branding
  1. 1
  2. 2
  3. 3
ubuntu.com footer
  1. 1
  2. 2
  3. 3
  4. 4
ubuntu.com footer

Code:

<footer class="global clearfix">
 <nav role="navigation">
  <div class="footer-a">
  <div class="clearfix">
   <ul>
    <li>
     <h2><a href="#">Section title</a></h2>
     <ul>
     <li class="first"><a href="#">Subsection 1</a></li>
     <li><a href="#">Subsection 2</a></li>
     <li><a href="#">Subsection 3</a></li>
    </ul>
   </li>
   <li>
    <h2><a href="#">Section title</a></h2>
    <ul>
     <li class="first"><a href="#">Subsection 1</a></li>
     <li><a href="#">Subsection 2</a></li>
     <li><a href="#">Subsection 3</a></li>
    </ul>
   </li>
   <li>
    <h2><a href="#">Section title</a></h2>
    <ul>
     <li class="first"><a href="#">Subsection 1</a></li>
     <li><a href="#">Subsection 2</a></li>
     <li><a href="#">Subsection 3</a></li>
    </ul>
   </li>
   <li>
    <h2><a href="#">Section title</a></h2>
    <ul>
     <li class="first"><a href="#">Subsection 1</a></li>
     <li><a href="#">Subsection 2</a></li>
     <li><a href="#">Subsection 3</a></li>
    </ul>
   </li>
   <li>
    <h2><a href="#">Section title</a></h2>
    <ul>
     <li class="first"><a href="#">Subsection 1</a></li>
     <li><a href="#">Subsection 2</a></li>
     <li><a href="#">Subsection 3</a></li>
    </ul>
   </li>
   <li>
    <h2><a href="#">Section title</a></h2>
    <ul>
     <li class="first"><a href="#">Subsection 1</a></li>
     <li><a href="#">Subsection 2</a></li>
     <li><a href="#">Subsection 3</a></li>
    </ul>
   </li>
   <li>
    <h2><a href="#">Section title</a></h2>
    <ul>
     <li class="first"><a href="#">Subsection 1</a></li>
     <li><a href="#">Subsection 2</a></li>
     <li><a href="#">Subsection 3</a></li>
    </ul>
   </li>
  </ul>
 </div>
 </div>
 
 <div class="footer-b inline-lists twelve-col">
  <ul>
   <li>
    <h2><a href="#">Section title:</a></h2>
    <ul>
     <li class="first"><a href="#">Subsection 1</a></li>
     <li><a href="#">Subsection 2</a></li>
     <li><a href="#">Subsection 3</a></li>
     <li><a href="#">Subsection 4</a></li>
    </ul>
   </li>
   <li>
    <h2><a href="#">Section title:</a></h2>
    <ul>
     <li class="first"><a href="#">Subsection 1</a></li>
     <li><a href="#">Subsection 2</a></li>
     <li><a href="#">Subsection 3</a></li>
     <li><a href="#">Subsection 4</a></li>
    </ul>
   </li>
   <li>
    <h2><a href="#">Section title:</a></h2>
    <ul>
     <li class="first"><a href="#">Subsection 1</a></li>
     <li><a href="#">Subsection 2</a></li>
     <li><a href="#">Subsection 3</a></li>
     <li><a href="#">Subsection 4</a></li>
    </ul>
   </li>
  </ul>
 </div>
</nav>

<div class="legal clearfix">
 <p class="twelve-col">&copy; 2013 Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.</p>
 <ul class="inline clear">
  <li><a href="/trademark-policy">Trademark policy</a></li>
  <li><a href="/legal">Legal information</a></li>
  <li><a accesskey="8" href="/privacy-policy">Privacy policy</a></li>
 </ul>
</div>

<span class="accessibility-aid"><a href="#">Got to the top of the page</a></span>
</footer>

Colours

Core web colours

  • Ubuntu orange #E95420: links, row backgrounds, buttons
  • Cool grey #333333: default text colour

Note: Avoid big blocks of orange. If possible, do not use full width orange. And remember that white text on an orange background is difficult to read.

Secondary web colours

  • Dark aubergine #2C001E: row backgrounds
  • Warm grey #888888: secondary text on white, like notes and help text; horizontal and vertical dotted divider lines
  • Light grey #F7F7F7: row backgrounds
  • White (transparent) rgba(255, 255, 255, 0.6): row backgrounds

Warning: Warm grey must not be used as a background to text on the web, as it doesn’t provide enough contrast with either light or dark text colours, which causes accessibility problems.

Colour distribution

When planning your pages, make sure there is an even distribution and well-balanced percentage of light (such as white) and strong colours (such as Ubuntu orange). Think of the screen as a whole – a unit. It shouldn’t be top- or bottom-heavy.

Utility classes

The following classes were created for flexibility of use — they should help in many situations and contexts.

Accessibility

To position an element off-screen keeping it accessible for screen readers, use the class .accessibility-aid.

Code:

<a class="accessibility-aid">Skip to content</a>

Floats

.left will float the element left.

Code:

<div class="left"></div>

.right will float the element right.

Code:

<div class="right"></div>

Align centre

The .align-center class allows you to centre text and other elements.

Code:

<p class="align-center">...</p>

Self-clearing element

.clearfix will clear the floats in an element.

Code:

<div class="clearfix"></div>

Last box

By default, “col” units include a right margin. Add the class .last-col to the last container in a row to remove its right margin.

Code:

<div class="six-col">
</div>
<div class="six-col last-col">
</div>

Note: The .twelve-col class doesn’t need the added .last-col class, as it doesn’t include default right margin.

Inline

Apply the class .inline to a <ul> or <ol> tag to make the inner <li> elements display inline.

Code:

<ul class="inline">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

No margins

Add the class .no-margin if you need to remove an element’s margins.

Code:

<div class="row no-margin">
</div>

No bottom margin

By default, .box and “col” units include a bottom margin. Add the class .no-margin-bottom if you need to remove this bottom margin.

Code:

<div class="box no-margin-bottom">
</div>

No border

By default, .box and .row include a border. Add the class .no-border to remove the border maintaining the spacing and layout.

Code:

<div class="box no-border">
</div>

Touch border

The .touch-border class allows you to make an image in a row touch its bottom border.

Code:

<img class="touch-border" src="..." />

Responsive images

There are three classes that can be used to hide/show images and other elements according to the size of the viewport:

  • .for-small: only shows in the smallest media query viewport
  • .for-medium: only shows in the small and medium media query viewports
  • .not-for-small: does not show in the smallest media query viewport