Microsoft has gone to great lengths to bring modern development practices (and thus, modern developers) to the Office Platform. And by modern, I mean Web development (JavaScript, CSS, HTML, etc.). Office has a great history of extensibility but, it was stuck in the WinForm and COM methods and mannerisms.
Over the last 5 years (give or take a year), Microsoft has invested heavily in a new extensibility that places Office squarely within the wide-open world of modern development. And to make life easier for everyone (developers and users alike), Microsoft has tools to help you build good-looking and solid user interfaces. This tool is Office UI Fabric, ‘the official front-end framework for building experiences…seamlessly into Office and Office 365′.
What Is Office UI Fabric?
Like the official description above says, it’s a front-end framework that allows you to build UIs for your Office Web-based add-ins. By using Fabric, you are using the same UI elements & controls used by the Office team. Thus, your add-in looks like a natural part of the Office UI instead of some beastly Franken-UI that can be typical of developer designs.
Said another way, Fabric is the official design language of the Office UI. It is the formal definition of colors, styles, shapes, layouts, typography, etc.
Why does it exist (what problem does it solve?)
I try to view things from Microsoft’s point of view. They don’t just spend money just because, they try to be strategic with it. Thus, as I see it, Fabric solves two problems:
1. Poor User Experiences
Developers tend to focus on the functionality of the applications. Design is functional at best and all-too-often, the user needs a shot of whiskey and high-level of patience to figure out how to use the application. Fabric solves the problem of the add-in being an ugly freak-of-nature. Properly implemented and followed by a developer, Fabric goes a long way to making the add-in easy to use (but there are no guarantees).
2. Developer Adoption of the Add-in Model
By releasing a framework that makes it easy to build a good-looking UI, developers can build a useful add-in without the negative UI comments from their user base.
Think about this, how many times have you built something cool and powerful only to have the users turn their nose and complain about the UI? You built something useful but the users hate it because it’s ugly. Sure, they missed the forests for the trees but maybe, so did you?
Fabric makes it easy to build a custom user interface (and experience) in Office and SharePoint. You can spend the majority of your cycles on the actual business rules — the things that really matter!
What’s Included with Fabric?
As I mentioned earlier, Fabric provides UI elements and components. These include items in the following categories:
- Icons
- Typography
- Color schemes
- Icons
- Controls
In addition, Fabric has a few frameworks to match your needs:
- Fabric Core — includes only the base styles (icons, fonts, colors) used by Microsoft. Core does not include controls.
- Fabric JS — These are JavaScript components that can be placed in your UI. They have Fabric already implemented. You just reference the library and place your controls into your add-in…no framework required.
- Fabric React — If you are using React, use this version of the Fabric controls.
- Fabric Angular — If you are using Angular, you will want to use this community-driven project that provides angular-based, Fabric controls.
- Fabric iOS — Contains both styling and components in native Swift. It also contains some extras components unique to iOS.
How to Get Going Today
The best thing to do is to read Microsoft’s documentation on MSDN. Learn how to reference Fabric in your project and how to make use of its assets. I recommend the following articles:
- Use Office UI Fabric 2.6.1 in Office Add-ins
- Use Office UI Fabric JS in Office Add-ins
- Use Office UI Fabric React in Office Add-ins
These should whet your appetite. Good luck out there!
