Be notified of new releases
Create your free GitHub account today to subscribe to this repository for new releases and build software alongside 28 million developers.Sign up
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.
- 3 new callout variations:
.callout--infohave joined the gang.
- The tag [definition] lists from the more complex lists are in high demand, so are now available universally anywhere via the
.tagsclass. See the example markup from the complex lists.
- 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.
- 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
form, so after testing we updated some of the form markup snippets to explicitly demo linking a
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-describedbyin either this approach or the use of hint text.
$mobilebreakpoint 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 - 2016-11-10
- Switches from flexbox to floats for the site navigation feature.
- Undoes link-button mixin application to the
1.10 - 2016-11-8
- New: site navigation and page header features — see § Navigation: Site navigation and § Page header in the Design Guide.
- The same link styles (via the
articleare now applied to
- Removes the min-width from the
- Footer improvements:
- improves margins when footer link
uls collapse in mobile–tablet views and footer crest margins
- centers image and copyright footer content in mobile view.
.ledehas been added, synonymous with
.abstract, accessible on block elements (not
- Link styles are now applied to the
<main>element instead of
1.9 - 2016-11-07
- Moved font sizing declarations to
body, rather than applying them to
dd, etc. directly. This should avoid the need to apply
font-size: 1emresets for nested content, eg a
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
mainnow receives the same
padding-topat mobile sizes that it received at tablet+ sizes (fix for content hugging the top of
.inline-tab-navas 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.
- Renamed the design guide website to DTO Design Guide & UI-Kit.
- Renamed complete example page to 'all' (
- Reformatted component example
.hbsfiles to a max line character length of 80.
- Update name of Slack channel from
- Changes current uppercase site title topbar to be set-case and removes
- Added styles for accordions used in the primary content area
details, and when used in widgets or filters:
accordion-stylesmixin for creating alternative accordion styles if required. See
- Changed visual design throughout (minor).
- Changed local navigation font size to be smaller than body copy for better visual hierarchy.
mixinsfor IE-conditional styles and stylesheets for old IE versions
- Changed structure of
- Changed animation of collapsible elements from CSS to JS transitions
- Changed undocumented (experimental) header styles to use a background image instead of CSS gradient.
- 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-verticallist types to match H4 to address issues with visual hierarchy versus semantic hierarchy #299.
- Change git merge strategy for CHANGELOG.md to reduce conflicts
- Added guide to /docs/ on installing and using UI-Kit via
- Desktop: Content area is now 12 columns wide to accommodate larger block elements. In response basic text elements
h1-h6, p, li, dlnow have a max-width for readability. See
- Desktop: Added
.content-full-widthas a method of making basic text elements fill to 12 columns if required (see above).
%base-vertical-listand the vertical lists have re-written, switching from flexboxes to Neat columns, providing IE9/10 support. Also done for top set of footer links (
- 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).
- Fixed HTML validation errors PR 311
.ua-notificationclass for issuing top-of-page User Agent (browser) notifications (eg for browsers we have difficulty supporting) in the
- Link styles are now applied to any
articlethat is a direct child of the page's
- Removed inline icon images from
ui-kit.min.cssand include them in
- Images (SVG & PNG) are optimised before being zipped and saved to
- Added guidance for font usage and accessibility (documented under § Typography - Typeface).
- IE conditional styling statements added for the gov.au demo:
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.
gulpbuild commands to use
npm scripts(documented in the README)
- Fixed Header title image not fluid-width on small screens
- 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 (
- 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