1.11.0 - 2017-01-16

UI-Kit has grown up a bit more -- we now have an official URL! Check it out at http://guides.service.gov.au/design-guide/

• Most of the guidance previously sitting in the SASS partials have gracefully uprooted and migrated themselves into the new Design Guide repository, stored now in Markdown. They like their new home.
• The images loaded as content in the guide have also joined their friends in the new Design Guide repository.
• The English text in some of the markup examples have received some further tlc.
• Our browser support document was out of date. It’s been simplified a bit more, and updated to reflect testing conducted end-2016.

New goodies

• 3 new callout variations: .callout--success, .callout--error, .callout--info have joined the gang.
• The tag [definition] lists from the more complex lists are in high demand, so are now available universally anywhere via the .tags class. See the example markup from the complex lists.

Breaking changes

• The columns of footer menus that have had some organisational issues… the lists themselves contained their heading (thanks to @DJMyles for picking this up). They had crisis meeting: the resolution is each heading and list set gets its own special class (.footer-menu), and this way they get to remain friends. This fixes the semantics and makes it less difficult for CMS template engines to output the right headings and menus. See the footer navigation entry to see what the new markup looks like.

Bugfixes

• Fixed an obscure issue in Chrome when using a screen reader where labels in forms were rudely not being read out. As a consequence those labels are now being positioned using floats (oh you Chrome, you so random). While at it, the radio buttons and checkboxes decided to improve their distribution of whitespace a bit too. Thanks to @simonschwartz.
• It appears Apple’s VoiceOver has a hard time reading out the legend in a form, so after testing we updated some of the form markup snippets to explicitly demo linking a fieldset’s legend with an input (don’t worry: we also feel a bit disgusted that this might mean having to add extra ids). As ever, this is a good reminder that we need to make proper use of aria-describedby in either this approach or the use of hint text.
• Our $mobile breakpoint function had a minimum width set on the upper limit, which denied grid support to anything smaller than $mobile-minwidth (420px). Thanks @elisechant.

1.10.3

1.10.3 - 2016-11-10

• Switches from flexbox to floats for the site navigation feature.
• Undoes link-button mixin application to the header[role='banner'] from 1.10.0.

1.10.2

Bugfixes

• Fixed ui-kit.js Gulp task so that minified version is created

1.10.1 - 2016-11-8

Bugfixes

• Update version number in package.json so that it's SemVer valid (X.Y.Z)

1.10

1.10 - 2016-11-8

UI-Kit changes

Larger changes

• New: site navigation and page header features — see § Navigation: Site navigation and § Page header in the Design Guide.
• The same link styles (via the link-colours mixin) for article are now applied to header[role='banner'].
• Removes the min-width from the $mobile-only breakpoint.

Smaller changes

• Footer improvements:
  • adds ie-clearfix mixin
  • improves margins when footer link uls collapse in mobile–tablet views and footer crest margins
  • centers image and copyright footer content in mobile view.
• .lede has been added, synonymous with .abstract, accessible on block elements (not p tags).
• Link styles are now applied to the <main> element instead of <article>

1.9

1.9 - 2016-11-07

Large changes

• Moved font sizing declarations to body, rather than applying them to ul, ol, p, dt, dd, etc. directly. This should avoid the need to apply font-size: 1em resets for nested content, eg a p or ul > li inside a table > td.
  Adds a new gulp task (styleguide.data) which outputs a JSON file of all the SASS comment sections (and their children, nested). This is being used by the new dto-design-guide Jekyll repository.

Bugfixes

• main now receives the same padding-top at mobile sizes that it received at tablet+ sizes (fix for content hugging the top of main/the page header).
• Changes .inline-nav to .inline-tab-nav as actually documented.
• Fixed Vertical lists not displaying correctly in IE7-8.
• Fixes global menu not opening completely on iOS 9 #365.
• Fixes to button styles #328.
• Fix for missing feedback button on mobile #348. Header feedback button continues to be hidden on mobile but support is now provided for a feedback button to be used in the footer which is visible at mobile sizes.

Styleguide

• Renamed the design guide website to DTO Design Guide & UI-Kit.
• Renamed complete example page to 'all' (/examples/all.html).
• Reformatted component example .hbs files to a max line character length of 80.
• Update name of Slack channel from #govau-uikit/#govau-guides to #guides-uikit

UI-Kit changes

• Changes current uppercase site title topbar to be set-case and removes letter-spacing.

1.8.0 - 2016-09-09

UI-Kit changes

• Added styles for accordions used in the primary content area details, and when used in widgets or filters: details.accordion--controls.
• Added accordion-styles mixin for creating alternative accordion styles if required. See _accordions.scss.
• Changed visual design throughout (minor).
• Changed local navigation font size to be smaller than body copy for better visual hierarchy.
• Added mixins for IE-conditional styles and stylesheets for old IE versions
• Changed structure of assets/sass directory
• Changed animation of collapsible elements from CSS to JS transitions
• Changed undocumented (experimental) header styles to use a background image instead of CSS gradient.

Bugfixes

• Fixed poor wrapping of links that have an icon after them (%base-link-icon--after)) thanks to @alecky #340
• Added visible focus/hover on Local navigation menu button #323.
• Added styles for usage of placeholder links in the Local navigation #290.
• Changed headings 2 to 6 used in .list-horizontal or .list-vertical list types to match H4 to address issues with visual hierarchy versus semantic hierarchy #299.
• Change git merge strategy for CHANGELOG.md to reduce conflicts

Styleguide

• Added guide to /docs/ on installing and using UI-Kit via npm.

1.7.6 - 2016-09-01

UI-Kit changes

• Desktop: Content area is now 12 columns wide to accommodate larger block elements. In response basic text elements h1-h6, p, li, dl now have a max-width for readability. See _grid-layout.scss
• Desktop: Added .content-full-width as a method of making basic text elements fill to 12 columns if required (see above).
• Base %base-vertical-list and the vertical lists have re-written, switching from flexboxes to Neat columns, providing IE9/10 support. Also done for top set of footer links (.footer-top).

Styleguide

• Added a 'Zoo' example page (/examples/zoo.html) that demonstrates every element in the UI Kit
• Section index links now only show Section headings and not Sub-sections
• Omega reset mixin added to Grid settings (documented under § Grid - Helpers).

Bugfixes

• Fixed HTML validation errors PR 311

1.7.5 - 2016-08-25

UI-Kit changes

• Added .ua-notification class for issuing top-of-page User Agent (browser) notifications (eg for browsers we have difficulty supporting) in the _accessibility.scss partial.
• Link styles are now applied to any article that is a direct child of the page's main element.
• Removed inline icon images from ui-kit.css & ui-kit.min.css and include them in /latest/images/zip instead.
• Images (SVG & PNG) are optimised before being zipped and saved to /latest/images.zip.

Styleguide

• Added guidance for font usage and accessibility (documented under § Typography - Typeface).
• IE conditional styling statements added for the gov.au demo: head in examples/ edited so that ≤IE9 receives no styling except a warning message; ≥IE9 gets styling. These IE conditionals are solely for demo purposes and will be removed in the future.
• Updated gulp build commands to use npm scripts (documented in the README)

Bugfixes

• Fixed Header title image not fluid-width on small screens

1.7.4 - 2016-08-17

Accessibility testing

Added automated accessibility testing (WCAG2.0 AA) using Pa11y CLI and HTML_CodeSniffer (run with node test/pa11y.js).

UI-Kit changes

• Support to grey out disabled/non-functional anchors/links (largely for prototyping) via .placeholder-link (documented under § Link styles).
• Source files for Examples now use a common layout file (examples/layouts/default.html)
• Added the Respond polyfill for CSS3 media query support in IE6-8
• Removed the Selectivizr polyfill so as to not trigger quirks mode in IE8