Microsoft has released a new framework for developing an awesome front-end called Office UI Fabric. So the big question is why did Microsoft created this framework? We already have a ton of different frameworks for front-end development like Bootstrap, Semantic UI, 960 Grid System and many more.

The short answer is that we did not have a framework for creating Office or SharePoint add-ins that integrates with the looks of Office applications.

Since the introduction of SharePoint 2013 and Office 2013 we as developers have a new option to integrate our applications in SharePoint and Office. The add-in model is in basics just a web application that integrates in SharePoint and Office. Until a few months ago we could not make our add-in look like a part of Office. Andrew Connell wrote a great blog in February of 2015 that we needed guidelines for integrating in Office. The answer to this is the Office UI Fabric that is posted on GitHub.

What did Microsoft create

Microsoft created a responsive, mobile-first front-end framework to make it simple to create a web experience using the Office Design Language. In this framework we do not only have styling but also reusable components like navigation, input, layout and even content like list items, table views and persona cards

Figure 1 Office UI reusable components

Microsoft uses this framework also in their own applications like Delve, Outlook.com, OneDrive.com and the Video Portal, so it is not only for add-ins but can also be used completely outside the Office applications.

Not only the basics are covered in this framework, Microsoft also added JavaScript? controls like a persona card and search. With these controls I created a corporate directory for my customer.

Figure 2 Office UI persona controls

We also created an SharePoint add-in that uses this framework, The Sogeti O365 Site Provisioning. Microsoft did not only created the Office UI Fabric, they also released UX-design Guidelines that discusses the high level considerations for designing add-ins. To answer the title, Office UI fabric has most of the features that has Bootstrap but adds some specific tools and features for the Office developer.

On December 1st 2015 I will do a session about Office UI Fabric. If you want to be there sign? up here.