The Australian Government coat of Arms

Communities of practice

Communities of practice

ABS Beta using the design system


#1

There was a request made via the feedback form on https://beta.abs.gov.au/ for more information about the front-end framework we used. But I’m unsure who made the request. Happy to answer any questions though about ABS Beta.


#2

Thanks @Nathan.McDowell, I didn’t make the request but now I am curious :smiley: what framework are you using?


#3

Guilty :raising_hand_man: I couldn’t determine what you were using, and thought it would be a great idea for your team to share! I can see parts of the designsystem coming through!


#4

Found him! Happy to share. We are using the Australian Government Design System as the framework and the design system components where appropriate. You’ll notice the grid, callout box, breadcrumbs, buttons, accordions etc from the design system being used.

The bits that aren’t using the design system are;

  • Accessible interactive graphs are using Highcharts library.
  • Custom description popup
  • Custom sticky inline nav for long pages
  • Testing out using a more humanist font for to its superior readability (for users who may be dyslexic) and scalability. More testing needed before that’s locked in if its worth the additional load time (however small).
  • Custom svg sprite for icons

We can’t run pancake/npm inside the ABS because of the firewall, so the sass is just being compiled using Scout app. Still very much in a dev stage so code isn’t optimised yet.

Shoot through any specific questions you may have and also share your feedback if you have any. ABS Beta will continue to operate as a place where we share concepts and look for participants to complete some tests.


#5

Highcharts was also used for accessible charts on https://github.com/govau/smart-cities (which IIRC also embeds a table version of the data?)