Article
0 comment

Office UI Fabric is now fully supported for use with bower.io

Bower and Office UI Fabric

Last week I played a little bit with node.js, gulp and Office UI Fabric. When I tried to install this UI Framework through bower.io i wanted to inject this bower components directly into my source code via gulp-wiredep. Sadly this failed because somehow the packages was broken. After a short research i found the reason for that and fixed it right in the framework on GitHub.

The cause of this issue

The most important file in the bower component is the bower.json file that is well documented. The problem was that the Office UI Fabric hasn’t had a main section included.

Main section of bower.json of Office UI Fabric

Main section of bower.json of Office UI Fabric

This section describes all the main components that need to be included in your source code. The famous wiredep tool fetches this information and wire those dependencies directly into your HTML or CSS files.
I committed this issue to the project as well as fixed it right away.
It was just a small change that makes a lot difference on using this tool. So I forked the project made the adjustments and spend a pull request.
The best thing was that the Microsoft Team approved my pull request just in a couple of hours. Keep up with the good stuff, even as I know there are a lot of things to do.

From now on Office UI Fabric is fully supported in the use with bower.io.

bower install office-ui-fabric

Office UI Fabric for Angular use

If you like to use Office UI Fabric together with AngularJS. There is another great option that Andrew Connell launched this week. His project is called “ng Office UI Fabric“. This is also available through bower.

Simply try this:

bower install ng-office-ui-fabric

Or visit the project site on GitHub. It is a community project so if you like to help with some stuff check out his blog and you will find more information on how to join.

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.