v14.0.0

Before you upgrade, please take note of any breaking changes and deprecation notices which may affect your site. View the Upgrade Guide to see examples of how to address breaking changes.

This update contains the release of our new Visual Identity 🎉

VID updates 🎉

New features ✨

  • new logo component #576 #648 #737
    • add the modifier class logo__image--md or logo__image--lg to the <img> to use a medium or large sized logo
 <div class="logo">
  <a href="https://www.unimelb.edu.au" class="logo__link">
    <img
      alt="The University of Melbourne homepage"
      src="/link/to/logo.svg"
      class="logo__image"
    />
  </a>
</div>

<div class="bg-primary">...</div>

Tertiary:

<button class="button button--tertiary">...</button>
<a class="button button--tertiary" href="#">...</a>

Inverted:

<button class="button button--inverted">...</button>
<a class="button button--inverted" href="#">...</a>
  • new typography mixins levels 1 to 7. They have their font-family, font-size, font-weight, line-height, and letter-spacing pre-defined to ensure consistent typography is used throughout all components #562 #660
.example {
  @mixin typography-level-1;
}
  • new typography-uppercase mixin to set text-transform:uppercase and correct letter-spacing #583
.example {
  @mixin typography-uppercase;
}
  • chevron-left, chevron-up, and chevron-down have been added to Icons - #676 #768
  • icons can now be impored in the css with ~icons #676

Before:

mask: url('../icon-set/chevron-right.svg');

After:

mask: url('~icons/chevron-right.svg');
  • Fraunces web font is loaded locally using our cdn #754
  • replaced normalize.css with newer modern-normalize package #562 #788
  • replaced rgb-hex with color package #556
  • implemented css-has-pseudo/browser polyfill to support :has() on firefox #765

Bug fixes 🐛

  • some Timeline fixes #763
    • dots on alt background
    • mobile layout where the line sometimes didn't extend to the next item
  • removed width: 100% from Cards so it can work with the grid system #772
  • removed z-index from .page-inner as it was breaking the search overlay #601
  • updated .floating (when used with the Mega Menu) to be hidden using @mixin screenreaders-only instead of a negative margin #656
  • logo, menu, and search icons in the Page Header now align with majority of content on pages #756
  • Page Footer now aligns with the majority of content on pages #756
  • removed [role='main'] from assets/style-guide/layout/grid/_grid.css so the grid component can be used in the Page Footer #576
  • .screenreaders-only helper class was scoped to .uomcontent [role='main'] which prevented it from being used in the Page Footer. This has been changed to allow it to be used anywhere #576
  • updated screenreaders-only mixin to be completely hidden from the screen as it was 1px high before, which created a small white gap between the breadcrumbs and tabs #656
  • fixed some autoprefixer css warnings #708
  • removed legend from the filters on the Layouts page as it was showing the same text as the label #746

Deprecation Notice⚠️

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

Before:

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

After:

<div class="bg-alt">...</div>
  • .wide, .short, and .reverse Page Header variations have been removed #565
  • .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 #567
  • .layout-sidebar__side__inner .subtitle has been deprecated and will be removed in a later version #593
  • Filtered Listings checkboxes are now the same colour. The following classes have been removed #618
    • .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 #631
  • .uomcontent #uom-login.modal__dialog class has been removed from the Page Header #650
  • .button.soft has been deprecated in favour of .button--secondary and will be removed in a later version #657

Before:

<button class="button soft">...</button>
<a class="button soft" href="#">...</a>

After:

<button class="button button--secondary">...</button>
<a class="button button--secondary" href="#">...</a>
  • removed .categories class from Article Footer #641
  • all uses of the old brand colour & typography css vars have been removed. If you were using these variables directly in your custom codebase, refer to Theme page for all the new variable names #697

Other changes

Documentation updates

include component class="bg-primary"
  • Colour Palette web component now has a border set by default removing the need for show-border="true" #749
  • updated page titles to use title from global.version instead of hardcoded value #787
  • removed mocking of gen4 version to ensure some tests don't fail when a new version (lastest) is released #794
  • made it easier to create release notes #795
    • removed unnecessary issues from release notes as they are documented in their respective github pr
    • updated github pr links to use the #hash instead of the full github url
      • https://github.com/unimelb/Gen3/pull/123 ➡️ #123
    • added https://github.com/unimelb/Gen3/pull to eleventy/_data/global.js
  • created new stories
  • eleventy pages now have a unique eleventyNavigation key #797
  • fixed an issue where the menu on the Page Header wasn't closing when clicking on a level 2 or level 3 item #756
  • created updateInvalidSelects to dynamically add the invalid state to form elements on the documentation pages #633