New Office UI Fabric Available for Designing Add-Ins for Office

Microsoft has an updated model for building apps (now called “Add-ins”) for SharePoint and Office.  These add-ins allow you to build extensions to these products and embed functionality into them through web based applications.  Add-ins can be found in the Office 365 App Store in Excel, PowerPoint, Word, etc. and in SharePoint as well.

image

Microsoft has now released a new design framework for ensuring your add-ins conform to the Office 365 user interface styles.  The framework is available on GitHub.

It is very straight forward to integrate Office UI Fabric into a web application. Simply add some JavaScript into your web application and reference the CSS file from the CDN in your HTML file. The following starter template represents the minimum recommended HTML structure for an add-in that uses Office UI Fabric.

Introducing Office UI Fabric 2

The framework is designed to work across Office Clients where Office Add-ins are supported including Windows desktop, web browser, Mac desktop and iOS on iPad.  The framework also provides out of the box controls that you can use within your add-ins such as people picker, persona card, file picker, etc.

There are also user interface design guidelines available here for styling your add-ins.