The Australian Government coat of Arms

Communities of practice

Communities of practice

Recommendation/Best practices on using Components with Bootstraps

designsystem

#1

I am pretty new to the Digital Design Service and the UI Pattern Library. I went through the documentation. I believe this would be a frontend library as a common language between government websites.

However, I wonder could this library work with bootstrap3/4 side by side? I found there are still lots of component in bootstrap which cannot find in the UI Pattern Library yet. Is there any best practices I can follow when I use both at the same time.


#2

Hi @mattlee, welcome to the community.

You are correct, this is a Design System for the whole of Australian Government. It is flexible and can slow be used to build other websites.

This library is made to be used with other frameworks easily. You can choose individual components and download them how you like. Or you can npm install the components and create a small development environment.

If you want to jump into using the Design System with Bootstrap, there is two approaches.

  • Use a bootstrap CDN and a minified css from the Design System. The downside of this is you will not be able to change the variables, use functions or mixins.

  • Get the bootstrap source files and the Design System sass modules and run your own build pipeline to convert the sass to css. You can then import one css file and modify the variables.

For any missing components, I recommend checking out the suggest a component and in progress component sections. If there is something missing please let us know.