Getting started

Creating a new site using the Design System requires setting up a basic page markup and then using the components and example layouts to build pages.

If you notice an issue or have a suggestion for a new component or feature, please log a support ticket (staff login required) or create an issue on GitHub.

Document structure

To use the design system, add the following resource includes into the head section of your page: 

<link rel="stylesheet" href="https://d2h9b02ioca40d.cloudfront.net/v7.0.1/uom.css">
<script src="https://d2h9b02ioca40d.cloudfront.net/v7.0.1/uom.js"></script>

At a bare minimum, you should include the following markup in your page: 

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="utf-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <meta content="IE=edge" http-equiv="X-UA-Compatible" />
  <title> (any page title) </title>
  <link rel="stylesheet" href="https://d2h9b02ioca40d.cloudfront.net/v7.0.1/uom.css">
  <script src="https://d2h9b02ioca40d.cloudfront.net/v7.0.1/uom.js"></script>
</head>
<body>
  <div class="uomcontent">
    <div class="page-inner">
      <div role="main">
        (your website markup goes here)
      </div>
    </div>
  </div>
</body>
</html>

Local nav

To integrate a local nav into your site, include the following structure after the div role="main".

For nested navigation, use a div class="inner" as demonstrated below. You can have multiple levels of nesting, but this is not recommended. If your system doesn't allow you to add inner containers, you may omit them and just use nested lists. 

<div id="sitemap" role="navigation">
  <h2>Section title</h2>
  <ul>
    <li>
      <a href="/another">Link to another page</a>
    </li>
    <li>
      <a href="/sub-section">Sub-section</a>
      <div class="inner">
        <ul>
          <li>
            <a href="/sub-section/a-page">A page in the sub-section</a>
          </li>
          <li>
            <a href="/sub-section/another">Another page</a>
            <div class="inner">
              <ul>
                <li>
                  <a href="/sub-section/another/another">3rd level</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </li>
    <li><a href="/last-one">Last one</a></li>
  </ul>
</div>

In situations where the site does not sit at the root of its domain (ie. within a subdirectory), the site root can be set to any arbitrary value by adding a data-absolute-root attribute to the local nav div. This value will be inserted before any nav links, so make sure you use relative links, eg. 

<div id="sitemap" role="navigation" data-absolute-root="/sitehome">
...
</div>

This is part of a much larger discussion, but please be aware that the local navigation only displays end pages in the structure, so in the example listed above there is no direct link to /sub-section or /sub-section/another. This is intentional, and in most circumstances this type of page ("landing" page) should only contain a basic list of links to its children, eg. the index of components on this site.

We use schema.org microdata for breadcrumbs to enhance machine understanding. To use the breadcrumb navigation on your site, include the following markup structure before the div role="main": 

<ol class="page-local-history" itemscope="" itemtype="http://schema.org/BreadcrumbList">
  <li class="root" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
    <a href="/" title="Website Home" itemprop="item">
      <span itemprop="name">Website Home</span>
    </a>
    <meta content="1" itemprop="position" />
  </li>
  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
    <a href="/layouts" itemprop="item" title="Layouts">
      <span itemprop="name">Layouts</span>
    </a>
    <meta content="2" itemprop="position" />
  </li>
  <li class="last" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
    <a href="" itemprop="item" title="Source">
      <span itemprop="name">Source</span>
    </a>
    <meta content="3" itemprop="position" />
  </li>
</ol>

Each meta itemprop="position" should be numbered consecutively, and remember to duplicate the link text in the parent link title.

The mobile breadcrumb selector is generated from the above markup (you can try it on this page at less than 768px width).

Homepage alternate

Include a div class="floating" before the div role="main" (and note that this page layout cannot include a breadcrumb as well)

Additionally, a header element must be included within the div role="main". Inline styles have been added to the header in the example below to illustrate how it should be styled in your local styles - the css provided in the full design system already has this defined. 

<div class="floating"></div>
<div role="main">
  <header style="background-image:url(https://d2h9b02ioca40d.cloudfront.net/templates/0.1/components/globals/bg-banner-2edd2279a97e316344e7831983ef6868.jpg);background-size:cover;min-height:300px"></header>
  (your website markup goes here)
</div>

Occasionally, a site will need to co-brand the logo space - this can be done by adding a special link inside the div class="floating" as shown in the example below: 

<div class="floating">
  <a class="page-header-home" href="/">Faculty of Veterinary and Agricultural Sciences</a>
</div>

Login link

To show a login link in the header between the Search and Menu buttons, add the following snippet before div role="main, as demonstrated in this example layout: 

<div class="page-local-login" data-href="/login"></div>

Don't forget to specify the correct login URL in the data-href attribute. The text of the link can be manipulated using the data-title attribute on this element, if for example you want to change the title to "Logout" when a user is logged in. The text will be "Login" by default, and there is a hard limit of 7 characters to protect the header design.

Note: Up to v4.4 of the design system, it was a requirement to add class with-login to div role="main. This is no longer the case.

Beware: The login modal feature present in v4.4 and below is no longer supported. The login button may only link to an external URL.