Changing Bootstrap for Angular-Material with ngbp
I posted some time ago about how to get up and running with AngularJS on Windows courtesy of the ngbp bootstrapping framework, which provides not only AngularJS, but grunt for build, bower and npm for package management and jasmine & karma for unit testing as well as a host of other goodies (Font Awesome, Bootstrap styling, etc). If you’re starting with AngularJS and you haven’t yet checked out ngbp, then do yourself a favour – thanks again to Josh David Miller for all his work on this.
I’ve recently starting taking more of an interest in UI design, and came across the Material Design framework from Google. While I do have some reservations about behemoths like Google with a vested interest promoting their own design guide on the rest of the net, let’s leave that for another post in another time.
Back to the here and now, for engineers or non-artistic types like myself Material Design seems a comprehensive framework for providing dos and don’ts in your UI design. I also like the material metaphor and I can relate to it easy. On top of that, I think its clean, simple and effective.
Google do seem to be hitching their wagon to Material Design with more and more of their own sites looking more materially uniform, and they have provided the new Polymer framework for web development as well as providing an Angular-Material equivalent library.
With this, I decided to give my recent work a little bit of a reboot to embrace the Material Design philosophy by using the Angular-Material library. If you’ve started with ngbp, and want to port over to Angular-Material then here are the steps I took to make this possible:
1. Uninstall bootstrap & angular-bootstrap.
The Bower dependencies dictate that if you want to install Angular-Material you need AngularJS 1.3 at least. The bootstrap & angular-bootstrap libraries require 1.2.28 of AngularJS, which is gonna hold it back. While you can still install Angular-Material, etc you will immediately get problems with your toolbar (fundamental to the design really). A stackoverflow post I read said this was due to the version of AngularJS not being as up-to-date as it should be. Get rid of them, you aren’t gonna need them anyway.
From the root of your ngbp project (where you run your grunt command):
> bower uninstall bootstrap
> bower uninstall angular-bootstrap
2. Update AngularJS
Update to the latest stable version of angular via bower using:
> bower update angular
3. Install Angular-Material
Update to the latest stable version via bower using:
> bower install angular-material
4. Install material-design-icons
You’re gonna want to use the Material Design icons where possible. While not essential this is probably recommended. You could continue with Bootstrap or Font Awesome icons but it isn’t gonna look right. My recommendation is to go all-in. (see Material Design on system icons for reasons):
> bower install material-design-icons
5. Update your build references
After this, you will have to update your build.config.js to include:
- angular-material vendor js files
- angular-animate vendor js files
- angular-aria vendor js files
- angular-material css file
- any material design icon svg files you want in your app. (ngbp recommends to use explicit file references rather than wildcards here, which I think is a good idea to lighten the number of svg files you are including in the build to only those you will use)
6. Start reworking your app
Tip: At present, the menu component to match the Polymer & Material Design menu for android expandable menu isn’t available for Angular-Material. To get a simple menu, I used the mdList, mdItem & mdItemContent elements, wrapping mdButton elements. Then for every mdButton, ensured flex attribute was true, layout=”row” & layout-align=”start”.