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.

Document structure

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


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

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/v13.3.3/uom.css"
    />
    <script src="//dds-gen3.web.unimelb.edu.au/v13.3.3/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>

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>

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>

Faculty of Veterinary and Agricultural Sciences website co-branded header

View an example of Page Header with Faculty Name.