Upgrade Guide

This page documents all breaking changes or code deprecations between versions with examples on how to update them.

v15.4.0

Global Footer has been updated - If you are using a hard-coded version on your website, please update to the new markup provided on the Global Footer page.

Logo markup has been simplified.

Before

<div class="logo">
  <a href="https://www.unimelb.edu.au" class="logo__link">
    <img
      alt="The University of Melbourne homepage"
      src="/static/img/logo.svg"
      class="logo__image logo__image--lg"
    />
  </a>
</div>

After

<a
  class="logo logo--lg"
  href="https://www.unimelb.edu.au"
  aria-label="The University of Melbourne homepage"
></a>

The node variable CDNURL has been renamed to CDN_URL - please update your .env file

v15.3.0

Card icon should now use the card__icon class.

<div data-test="card-component" class="card">
  <span data-icon="..." data-size="lg"></span>
</div>

becomes

<div data-test="card-component" class="card">
  <span class="card__icon" data-icon="..." data-size="lg"></span>
</div>

v15.1.0

Accordion markup has been uplifted to comply with ally standards. Please note the new markup, as well as the unique IDs that link the button and panel.

<ul class="accordion">
  <li class="accordion__item">
    <h3 class="accordion__item-heading">
      <button aria-controls="accordion-panel-1" aria-expanded="false" class="accordion__button" id="accordion-button-1">
        <span class="accordion__title">...</span>
      </button>
    </h3>
    <div aria-labelledby="accordion-button-1" role="region" id="accordion-panel-1" class="accordion__panel">...</div>
  </li>
</ul>

v15.0.0

Typography margins and padding have had a major overhaul.

  • any custom css that sets a margin or padding should be reviewed and updated accordingly
  • any elements that have lost their top / bottom margins can be fixed by adding .content-block to the parent element

All Components, Style Guide, and Layouts have had a major overhaul to their container widths.

  • any custom markup on your site should be reviewed and updated accordingly
  • any content that hugs to the left side of the browser window can be fixed by:
    • adding .content-block to the parent element
    • or, in some cases on older pages, update the markup so that it’s a direct child of [role="main"]

Tabs now have no padding on its inner content by default - use the class .tab--content if you'd like to add some.

<div class="tabbed-nav">
  <div class="full-width">
    <nav role="tablist">...</nav>
  </div>
  <div class="tab tab--content" id="..." role="tabpanel">...</div>
</div>

Block Listing titles should now use an h2 or h3 element

<ul class="block-listing">
  <li>
    <a class="block-container" href="#">
      ...
      <h3>Lorem ipsum dolor, sit amet consectetur adipisicing elit</h3>
      ...
    </a>
  </li>
</ul>

Deprecation notice

The following components and their classes have been deprecated and will be removed in a later version:

  • Pathfinders - you can use the new Pathfinder component
    • .pathfinder-2, .pathfinder-3, .pathfinder-4
    • .pathfinder-2.soft, .pathfinder-3.soft, .pathfinder-4.soft
    • .pathfinder-2.white, .pathfinder-3.white, .pathfinder-4.white
    • .pathfinder-2.buttons, .pathfinder-3.buttons, .pathfinder-4.buttons
    • .pathfinder-2 .featured, .pathfinder-3 .featured, .pathfinder-4 .featured
  • Two Columns Text Box - you can use a two column Grid layout
    • .half
  • Enquiry
    • .enquiry
    • .enquiry--dark
  • Content Block
    • .content-block--short

Deprecated

The following classes have been removed:

  • .figure--embed and .figure--wide - defaults to normal figure size
  • .figure--confined - figures by default are now confined
  • .image-gallery--small and .image-gallery--medium - defaults to one gallery size
  • .index-navigation - defaults to same layout as .jump-navigation
  • .layout-sidebar--right - defaults to same layout as .layout-sidebar
  • .sidebar-tabs--right - defaults to .sidebar-tabs
  • .simple-listing--text - defaults to same layout as .simple-listing
  • .simple-listing__except - inherits everything it needs from p
  • select.alt, select.clear, and select.clear-dark - defaults to normal Select style
  • .tabbed-nav.thin - defaults to normal tabs style
  • table.wide - defaults to normal table size
  • .timeline.full-width - defaults to normal timeline size
  • .with-arrow-left - it defaults to a normal button style

The following classes have been removed and may create breaking changes:

  • .card__image-icon
  • .center - you can use .text-center
  • .form__subtext
  • .gap-0 - you can use .grid--collapsed
  • .grid__cell--span-4, .grid__cell--span-3, and .grid__cell--span-2 - you can use the grid column size classes
  • .grid--fill-first and .grid--fill-last - you can use the grid column size classes
  • .grid-cols-4, .grid-cols-3, and .grid-cols-2 - you can use the simple grid classes
  • .no-padding
  • .nopad, .nopadtop, and .nopadbottom
  • .padtop, .padtopshort, .padbottom, and .padbottomshort
  • .spacer
  • .subtitle
  • .video-thumb and .audio-thumb
  • .with-filters
  • .sans, .fixed, .serif, .thin, .light, .regular, and .bold
  • .profile, .profile .intro

v14.15.1

Form buttons should now use the button class to ensure they look the same as other Buttons

<input class="button" type="submit" value="..." />
<button class="button" type="submit">...</button>

v14.15.0

Deprecated

The following Inline Form classes has been removed:

  • .detached - it will now default to the default inline form
  • .big - it will now default to the normal sized inline form

v14.12.0

Deprecation notice

The following classes have been deprecated and will be removed in a later version:

  • .grid__cell, .grid__cell--span-x - they have been replaced with the equivalent .grid__col-x
  • .with-arrow-left, .button-hero, .button-hero-reverse, .button-hero-inverse, and .button-hero-reverse

Deprecated

The following classes have been removed:

  • .grid--cols-8 - .grid__col-2 is being used instead
  • .with-arrow - all buttons now have an arrow by default

v14.7.0

Icons using the .small class should be updated to use data-size="md" instead. If you are using any of following components, please update them:

Before

<span class="small" data-icon="...">...</span>

After

<span data-icon="..." data-size="md">...</span>

Icons using the .icon--hide-label class should be updated to use the data-hide-label="true" instead. If you are using any of following components, please update them:

Before

<span class="icon--hide-label" data-icon="...">...</span>

After

<span data-icon="..."  data-hide-label="true">...</span>

Article Footer now uses <span data-icon=""></span> instead of <svg>

Before

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-name"></use>
</svg>
Label

After

<span data-icon="name" data-size="md" data-hide-label="true">Label</span>

Card Icons now uses <span data-icon=""></span> instead of <svg>

Before

<svg class="card__image-icon" role="graphics-symbol" aria-label="...">
  <use xlink:href="#icon-name"></use>
</svg>

After

<span data-icon="name" data-size="lg"></span>

Button Cards now uses <span data-icon=""></span> instead of <svg>

Before

<svg class="button-card__icon icon" aria-hidden="true">
  <use xlink:href="#icon-chevron-right"></use>
</svg>

After

<span class="button-card__icon" data-icon="chevron-right" data-size="lg" ></span>

Profile header icon size was set by the component. It should be updated to use data-size="sm" instead as this will be removed in a later version.

Before

<ul class="profile-header__contact">
  <li>
    <span data-icon="...">...</span>
    ...
  </li>
</ul>

After

<ul class="profile-header__contact">
  <li>
    <span data-icon="..." data-size="sm">...</span>
    ...
  </li>
</ul>

Icons nested inside Buttons should now use data-size="xs" instead of the .small class

Before

<span class="small" data-icon="...">...</span>

After

<span data-icon="..." data-size="xs">...</span>

Footer Social Links icon size was set by the component. It should be updated to include data-size="md" data-label-size="md" instead as this will be removed in a later version.

Before

<footer class="cta">
  <div class="center">
    <a class="social" href="#">
      <div data-icon="...">Label</div>
    </a>
  </div>
</footer>

After

<footer class="cta">
  <div class="center">
    <a class="social" href="#">
      <div data-icon="..." data-size="md" data-label-size="md">Label</div>
    </a>
  </div>
</footer>

Quicklinks and Footer Quicklinks icon size was set by the component. It should be updated to include data-size="md" instead as this will be removed in a later version.

Before

<ul class="quicklinks">
  <li>
    <a href="#">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-name"></use>
      </svg>
      Lorem ipsum
    </a>
  </li>
</ul>

After

<ul class="quicklinks">
  <li>
    <a href="#">
      <div data-icon="name" data-size="md"></div>
      Lorem ipsum
    </a>
  </li>
</ul>

Deprecation notice

The following classes have been deprecated and will be removed in a later version:

  • Card Icons
    • .card__image-icon
  • Icons
    • .small - use data-size="md" instead
    • .large - use data-size="xxl" instead
    • .fill - use data-fill="true" instead
    • .icon--hide-label - use data-hide-label="true" instead
  • .video-thumb and .audio-thumb

v14.5.0

Deprecation notice

.grid--fill-first and .grid--fill-last classes have been deprecated and will be removed in a later version. .grid__cell--span-[2,3,4] can be used in its place.

Before:

<div class="grid grid--cols-3 grid--fill-first">
  <div></div>
  <div></div>
</div>

After:

<div class="grid grid--cols-3">
  <div class="grid__cell grid__cell--span-2"></div>
  <div class="grid__cell"></div>
</div>

Deprecated

The .black Tabs variation has been removed as it was almost identical to the Alternate tab colour variation. It now defaults to the default variation.

.grid--row has been removed as the Grid still functions correctly without it.

v14.1.0

Deprecation Notice

The title class has been deprecated and will be removed in a later version.

Before:

<h1 class="title">...</h1>

After:

<h1 class="text-center">...</h1>

The subtitle class haas been deprecated and will be removed in a later version.

Before:

<h1 class="subtitle">...</h1>

After:

<h1 class="text-level-3 text-center">...</h1>

v14.0.0

Deprecation Notice

  • .alt Background class has been deprecated and will be removed in a later version. You can use .bg-alt instead

Before:

<div class="alt">...</div>

After:

<div class="bg-alt">...</div>
  • .layout-sidebar__side__inner .subtitle has been deprecated and will be removed in a later version
  • .button.soft has been deprecated in favour of .button--secondary and will be removed in a later version

Deprecated

  • .button.warning, .button.cta, .button.brand, .button-small.warning, .button-small.cta, .butto-small.brand Button variations have been removed. They now default to the primary button
  • .wide, .short, and .reverse Page Header variations have been removed
  • Filtered Listings checkboxes are now the same colour. The following classes have been removed
    • .uomcontent .filtered-listing-select .filtered-listing-tag input[type='checkbox'][data-color='green'] + label
    • .uomcontent .filtered-listing-select .filtered-listing-tag input[type='checkbox'][data-color='bronze'] + label
    • .uomcontent .filtered-listing-select .filtered-listing-tag input[type='checkbox'][data-color='silver'] + label
    • .uomcontent .filtered-listing-select .filtered-listing-tag input[type='checkbox'][data-color='blue'] + label
    • .uomcontent .filtered-listing-select .filtered-listing-tag input[type='checkbox'][data-color='yellow'] + label
  • Modal data-modal-offset prop for setting custom offset has been removed
  • .uomcontent #uom-login.modal__dialog class has been removed from the Page Header

v13.2.2

Deprecated

All remaining .uomcontent [role='navigation']#globalsitemap css has been removed as it is no longer in use

Removed unnecessary .page-local-history css as it's only injected and styled in the Page Header

v13.2.0

Deprecation notice

The Section component has been deprecated and will be removed in a later version. It has been replaced with the Content Block

Before:

<section class="section">
  <div class="section__inner">...</div>
</section>

After:

<section class="content-block">
  <div class="content-block__inner">...</div>
</section>

v13.1.0

Sidebar Tabs now use <nav> instead of <ul>

Before:

<ul class="sidebar-tabs__list" role="tablist">
  <li>
    <a
      aria-controls="tab-sidebar-right-1"
      aria-selected="true"
      class="sidebar-tabs__tab"
      href="#tab-sidebar-right-1"
      role="tab"
    >
      Tab 1
    </a>
  </li>
</ul>

After:

<nav class="sidebar-tabs__list" role="tablist">
  <a
    aria-controls="tab-sidebar-right-1"
    aria-selected="true"
    class="sidebar-tabs__tab"
    href="#tab-sidebar-right-1"
    role="tab"
  >
</nav>

Deprecated

The following css has been removed as the <header> element was removed in a previous version

  • .uomcontent .page-header.fixed:not(.floating) header
  • .uomcontent .page-header header

Removed .uomcontent #uom-login.modal__dialog as it was not being used in the cms

v13.0.0

Breaking change

The grid now defaults to a one column grid instead of four. To use a four column grid you will need to add grid--cols-4

Before:

<div class="grid">...</div>

After:

<div class="grid grid--cols-4">...</div>

Deprecation notice

The grid column classes grid-cols-[2,3,4] have been renamed to grid--cols-[2,3,4]. Please update to these new classes as the old ones will be deprecated in a later version

Before:

<div class="grid grid-cols-2">...</div>

After:

<div class="grid grid--cols-2">...</div>

The Embedded media class embed--21_9 is now embed--widescreen. Please update to this new class as the old one will be deprecated in a later version

Before:

<div class="embed embed--21_9">...</div>

After:

<div class="embed embed--widescreen">...</div>

v12.4.0

Deprecated

The class headerless has been removed and is no longer required. The codebase has been adjusted to allow the same functionality without the need for <div class="headerless"></div> in the markup. You can safely remove usage of this class in your codebase.

Remove:

<div class="headerless"></div>

v11.5.0

Updated Mega menu wrapper to a header

Before:

<div class="uom-megamenu">
  <div data-um-mega-menu="..."></div>
</div>

After:

<header class="uom-megamenu">
  <div data-um-mega-menu="..."></div>
</header>

v11.4.0

Deprecated

Timetable component has been removed and no longer works. If you were using it on your website you can now remove any references to it.

Classes marked for deprecation in v11.1.0 has been removed:

  • Global - .noborder, .invisible, .hide-text, .youtube5container, .youtube5placeholder, .contrib, .quarter, .margin-rule, .tilt-before, .tilt-after, .with-tilt-sibling, .showie
  • Accordion - .accordion__noanim
  • Button - .button-fill
  • Enquiry - .enquiry-form__thanks
  • Filtered listings - .filtered-listing-item--green, .filtered-listing-item--bronze, .filtered-listing-item--silver, .filtered-listing-item--blue, .filtered-listing-item--yellow
  • Form - .align-checkbox, .newsletter-box
  • Header - .bottom-align-inverted, .no-filter, .filter-blue, .filter-green, .filter-yellow, .filter-head, .stage, .fixed-bg, .embed-video-button, .video-loop
  • Listings - .listing--crop-height
  • Nav - .col-3, .sitemap-trigger
  • Search - .search-autocomplete
  • Timeline - .has-accordion
  • Typography - .timetable, .main-title, .line

v11.3.0

Deprecated

The class .linkgroup-title marked for deprecation in v11.1.0 has been removed.

v11.1.0

Breaking change

The recommended id has been changed: main ➡️ main-content. You should update your website and use main-content from now on.

<div role="main" id="main-content">...</div>

Deprecated

Maps component has been removed and no longer works. If you were using it on your website you can now remove any references to it.

<div class="map-canvas">...</div>

Custom .highlight class for h1 has been removed.

<h1 class="highlight">...</h1>

v11.0.0

Breaking change

<div role="main">...</div> now requires an id. We recommend main-content as the Mega menu uses it.

View the Document Structure code example on Getting Started

<div role="main" id="main-content">...</div>

Deprecated

Classes marked for deprecation in v7.0.0 have been removed.

  • .soundcloud-cover and .soundcloud
  • .video .video--21-9 and .half .video
  • .diamond-mask and .staff-listing-detailed--diamond
  • .inset-left and .inset-right

Other deprecated classes have been removed.

  • .headerless
  • .gmap__canvas

Removed no-js from <html> tag.

Before:

<html lang="en" class="no-js">

After:

<html lang="en">

We now recommended you use the integration build for gen4.

Before:

<link href="https://dds-gen4.web.unimelb.edu.au/latest/latest/client.css" rel="stylesheet"  />
<script src="https://dds-gen4.web.unimelb.edu.au/latest/latest/client.js" async=""></script>

After:

<link href="https://dds-gen4.web.unimelb.edu.au/latest/integration/client.css" rel="stylesheet"  />
<script src="https://dds-gen4.web.unimelb.edu.au/latest/integration/client.js" async=""></script>

v10.1.0

Survey prompt has been removed and no longer works. If you were using it on your website you can now remove any references to it.

<link rel="stylesheet" href=".../prompt.css" />
<script id="uom-prompt-script" src=".../prompt.js"></script>
<script id="uom-prompt-template" type="text/template">...</script>

Announcement component has been removed and no longer works. If you were using it on your website you can now remove any references to it.

<div class="page-announcement">
  <a class="page-announcement__message" href="...">...</a>
  <button class="page-announcement__close" type="button">...</button>
</div>

Forms micro-library has been removed and no longer works. If you were using it on your website you can now remove any references to it.

<link rel="stylesheet" href=".../forms.css" />
<script src=".../forms.js"></script>

v9.2.0

Required node version has been updated from v12.0.0 ➡️ v12.22.0.

v9.0.0

Required node version has been updated from v8.16.0 ➡️ v12.0.0.

v8.6.0

Dropped support for IE9, IE10, and IE11 🎉

Deprecated

.ie9, .ie10, .ie11 classes have been removed. You can safely remove any custom classes targeting those browsers

v8.5.0

Deprecated

The generic .grey class has been removed.

<h1 class="grey" src="..." />
<p class="grey" src="..." />

Removed --col-primary-light-grey css variabled as it is not used in Gen2. Please update any usage of this variable in any custom css you may have.

v8.1.6

Pathfinder headings now use <h3> instead of <strong> tag to meet WCAG guidelines. The <strong> tag will be deprecated in a future release.

v8.1.5

Required node version has been updated from v6.9.3 ➡️ v8.16.0

v8.1.0

Deprecated

The following image classes have been removed:

<img class="desaturate" src="..." />
<img class="semi-desaturate" src="..." />

v7.0.0

Deprecated

Features marked for deprecation in v6.0 have now been removed.

  • .listing
  • .feature-listing and .feature-listing-3
  • paragraph elements inside .navigation-block-listing items
  • .navigation-block-listing.stacked, .navigation-block-listing > ul.wide, and .navigation-block-listing > ul.narrow
  • .top-unit

Profile headers and People search results

Using an img element inside profile headers and people search results is now deprecated. This does not affect profile header min. Please use a div with a background image instead:

Before:

<img class="profile-header__photo" src="..." alt="" width="..." height="..."
<img class="person__photo" src="..." alt="" width="..." height="..."

After:

<div class="profile-header__photo" style="background-image: url(...);"></div>
<div class="person__photo" style="background-image: url(...);"></div>

Lists

Class ticked-list can no longer be used on a parent of the list element; it must be used on the list element itself:

No longer supported:

<div class="ticked-list"><ul> ... </ul></div>

Correct:

<ul class="ticked-list">...</ul>

Steps lists and accordions

Lists used inside steps lists and accordions must now be direct children of the root list items.

This is fine

<ol class="steps">
  <li>
    <h2>Headline</h2>
    <ul>
      <li>Item</li>
    </ul>
  </li>
</ol>

This is not fine

<ol class="steps">
  <li>
    <h2>Headline</h2>
    <div>
      <ul>
        <li>Item</li>
      </ul>
    </div>
  </li>
</ol>

Document structure

The document structure no longer includes HTML5shiv for IE8 and lower. Please update your site's main layout file, as well as any stand-alone pages:

Remove

<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]-->

Turbolinks

The design system no longer listens for Turbolinks events page:load and page:restore. Instead, you should listen for them and call the new API methods yourself:

document.addEventListener('page:load', window.uom.applyInjection);
document.addEventListener('page:load', window.uom.initAllComponents);
document.addEventListener('page:restore', window.uom.applyInjection);
document.addEventListener('page:restore', window.uom.initAllComponents);

JS API

The following JavaScript APIs have changed:

  • window.UOMloadInjection ➡️ window.uom.applyInjection
  • window.UOMloadComponents ➡️ window.uom.initAllComponents
  • window.UOMbind & window.UOMbindIcons ➡️ window.uom.initComponent
  • window.cssesc ➡️ window.uom.vendor.cssesc
  • window.loadScript & window.loadStylesheeet ➡️ window.uom.utils.loadScript & window.uom.utils.loadStylesheeet

v6.0.0

Alerts

Alerts are now called notices. The type of the notice must now be specified with a separate class

Before:

<p class="alert-success">Success!</p>

After:

<p class="notice notice--success">Success!</p>

Tabs

The tabbed-course class is now deprecated. It was just an alias for tabbed-nav, so you can use this class instead to implement full-width tabs.

Before:

<div class="tabbed-course" data-tabbed="" id="nav"></div>

After:

<div class="tabbed-nav" data-tabbed="" id="nav"></div>

Local Navigation

The local navigation markup has changed: the root element with id=sitemap must no longer have class no-js.

Before:

<div id="sitemap" class="no-js" role="navigation"></div>

After:

<div id="sitemap" role="navigation"></div>

People

Diamond staff listing now requires an extra class:

<ul class="staff-listing-detailed staff-listing-detailed--diamond">...</ul>

Tables

Sortable tables are no longer automatically sorted on page load. You can opt-in to this behaviour by adding the data-sort-initial attribute to the heading cell of the column you wish to sort.

<th data-sort-initial="" scope="col">...</th>

window.loadScript()

window.loadScript() now returns a promise instead of accepting a callback

Before:


window.loadScript('https://some.url', function () {
  // success callback
});

After:

window.loadScript('https://some.url')
  .then(function () {
    // success callback
  })
  .catch(function () {
    // failure callback
  });