Figure 1, Angular and Bootstrap make beautiful and functional applications
When developing add-ins for Office and SharePoint, I typically use the Bootstrap styles and components. While this approach gives me all the benefits stated previously, it does present some challenges matching the standard look and feel of the Office suite. The problem for developers is that the UI components that are part of the Bootstrap world were not created with Office and SharePoint in mind. Consequently, your add-in may look good, but it may also give the user that vague feeling that it doesn’t quite fit. What we really need are styles and components that offer the beauty and ease of Bootstrap, work well with Angular, and fit nicely into Office and SharePoint. Fortunately, Microsoft has answered our needs with the Office UI Fabric.
Introducing the Office UI Fabric
Last month the Office team announced the release of the Office UI Fabric for general availability. The Office UI Fabric is a responsive, mobile-first, front-end framework for developers creating solutions for Office and SharePoint. The framework consists of styles and components that give your applications the same look and feel as Office and SharePoint. In short, it’s Bootstrap for Office and SharePoint.
The Office UI Fabric defines 10 base font classes that represent the typography used throughout Office and SharePoint. Each base class uses the Segoe UI font and varies by size. There are also several helper font classes that alter the text weight.
9 different themes are defined, making it easy to create a consistent feel in your application. Along with custom icons and animations, look and feel is easy. The Office UI Fabric also provides localization support with right-to-left (RTL) styles and language-optimized fonts.
Just like Bootstrap, the Office UI Fabric also defines a 12-column, responsive grid structure. The grid defines row and column styles just like Bootstrap. The grid is also responsive so you can use classes to define how it should change as the device size changes. Again, this is exactly like the Bootstrap grid, but made for Office and SharePoint.
The Office UI Fabric includes 26 components like menus, breadcrumbs, buttons, tables, and cards. Each component consists of some template HTML and a style sheet. Generally, you can use the components by simply copying the HTML into your project. You can review the complete Office Add-In Design Guidelines online to ensure consistency. Figure 2 shows a sample dialog box with a clean, consistent look. My only disappointment is that I wish the components came packaged as Angular directives. Looks like that is a good opportunity for a community project.
Figure 2, A sample Office UI Fabric dialog box
Using the Office UI Fabric
Using the Office UI Fabric in your Office and SharePoint development is straightforward. As an example, I created an Outlook add-in that allows a user to pick from a list of “quick responses” when answering an e-mail. The add-in is built using the Angular framework with the set of quick responses maintained in a SharePoint online list. Figure 3 shows the responses surfaced when the user responds to an e-mail. Notice how the look and feel fits right in with Outlook.
Figure 3, An Outlook add-in utilizing the Office UI Fabric
Once the basic add-in structure was complete, I added the references to the Office UI Fabric. The styles are available from a content delivery network (CDN) link. The components, however, must be copied from the raw HTML in the OfficeDev repository.
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
I used the styles, responsive grid, and button component in my Outlook add-in. The experience was similar to using Bootstrap, except the documentation on GitHub for the Office UI Fabric is not nearly as complete as for Bootstrap. Nonetheless, I was able to create the simple interface shown in Figure 3 without too much difficulty. The code in listing 1 shows the HTML for the user interface.
Listing 1, A simple Office UI Fabric interface
<div class="ms-fontColor-themeDarker" style="margin:5px;">
<div class="ms-font-s-plus" style="padding-bottom:5px;">
Select a quick response from the choices below:
<div data-ng-hide="!workingOnIt">Retrieving quick responses...</div>
<div class="ms-Grid-row" data-ng-repeat="response in responses" style="padding-bottom:5px;">
<div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg10">
<div class="ms-font-m ms-fontWeight-semibold">
<div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg2">
<button class="ms-Button ms-Button--primary"
My first experience with the Office UI Fabric was a good one. I found the styles and components easy to use and would recommend them to Office and SharePoint developers. The framework would benefit from some additional documentation and samples as well as the development of Angular directives. For a first release, however, the framework seems solid. Developers should begin to use it immediately for Office and SharePoint development.