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.

Importing the Design System

Add the following resources into the <head> section of your page:


<link rel="stylesheet" href="//dds-gen3.web.unimelb.edu.au/v15.11.0/uom.css" />
<script src="//dds-gen3.web.unimelb.edu.au/v15.11.0/uom.js"></script>

Document structure

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


<!doctype html>
<html lang="en">
  <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="//dds-gen3.web.unimelb.edu.au/v15.11.0/uom.css" />
    <script src="//dds-gen3.web.unimelb.edu.au/v15.11.0/uom.js"></script>
  </head>
  <body>
    <div class="skip-link">
      <a href="#main-content" class="skip-link__anchor" data-no-scroll>
        Skip to main content
      </a>
    </div>
    <div class="uomcontent">
      <div class="page-inner">
        <div role="main" id="main-content">...</div>
      </div>
    </div>
  </body>
</html>

An anchor tag and it's wrapper has been added directly below the opening body tag. This allows screenreader and keyboard users to skip directly to the main content.

<div class="skip-link">
  <a href="#main-content" class="skip-link__anchor" data-no-scroll>
    Skip to main content
  </a>
</div>

Breadcrumbs

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">...</div>:


<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="#" 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>

With the latest iteration of the mega menu, breadcrumbs are no longer automatically injected into the page. So to enhance and provide styles to the above markup, you can wrap the above code in a <nav> element.

<nav class="page-breadcrumbs" aria-label="breadcrumbs"> ... </nav>

Favicons

You can use the following code to load the favicons on your site.

Favicons may be cached by browsers, so changes to the favicon may not be immediately reflected for all users.

You can use the cache-busting technique of modifying the URL parameter v to ensure updates are propagated. For example, ?v=1 ➡️ ?v=2


<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="//dds-gen3.web.unimelb.edu.au/v15.11.0/assets/apple-touch-icon.png?v=1"
/>
<link
  rel="icon"
  type="image/png"
  sizes="48x48"
  href="//dds-gen3.web.unimelb.edu.au/v15.11.0/assets/favicon-48x48.png?v=1"
/>
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="//dds-gen3.web.unimelb.edu.au/v15.11.0/assets/favicon-32x32.png?v=1"
/>
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="//dds-gen3.web.unimelb.edu.au/v15.11.0/assets/favicon-16x16.png?v=1"
/>
<link
  rel="shortcut icon"
  href="//dds-gen3.web.unimelb.edu.au/v15.11.0/assets/favicon.ico?v=1"
/>

Homepage alternate

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

Additionally, a header element must be included within the <div role="main">...</div>. 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" id="main-content">
  <header style="background-image: url('your_image.jpg')"></header>
  ...
</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>

View an example of Page Header with Faculty Name.