Use Office UI Fabric to design
applications
that blend seamlessly into Office
Jinghui Zhang
Microsoft Software Engineer
Office UI Fabric in a nutshell
Fabric is a front-end developer toolkit that
implements the Office and Office 365 design
language in code
We use it inside the company to help build
our UI/UX
It’s free and open source so developers
outside of Microsoft can build UI/UX that fits
seamlessly into Office by using the same
“paint” that we use in our products
You’re using what we use!
Our tools, available for you
• Fabric team works in the open, but also builds SharePoint, OneDrive’s
front-end
Feedback, requests
• Issues, feature requests, component requests
Contributions!
• Bug fixes, documentation updates, and flexibility improvements
Who inside of Microsoft uses Fabric?
Office 365 Suite
ms-icon
ms-fcl
(font color)
ms-bgc
(background
color)
OneDrive
ms-icon
ms-ContextualMenu
ms-bg-color
ms-font (size)
Outlook Web App
ms-icon
ms-bg-color
ms-font-weight
ms-fcl
(font color)
Where is Fabric recommended?
Office Add-ins (v2.6.1, currently)
Office 365 applications
SharePoint
Fabric is baked into the SharePoint
Framework
Get Started
• Include Fabric CND reference
• For components, also download the sample JS from GitHub and use/change as
needed
• Use appropriate classes
Ways to Get Fabric
• Download the source cod from GitHub
• Reference the CDN
<link rel="stylesheet" href="http://appsforoffice.microsoft.com/fabric/2.2.0/fabric.min.css">
<link rel="stylesheet" href="http://appsforoffice.microsoft.com/fabric/2.2.0/fabric.components.min.css">
• Package managers
• Bower
• $ bower install office-ui-fabric
• npm
• $ npm install office-ui-fabric
• NuGet
• PM> Install-Package office-ui-fabric
• Build from source
Fabric Use
• Office 365 apps
• SharePoint Add-ins
• Office Add-ins
The core of Fabric is open source. However the fonts referenced by Fabric are licensed to use in web apps/add-ins powered by Office. See license for detail.
Work Across Office Clients
Windows Desktop
Browser
iPad
How to learn more about Fabric
What’s included with Fabric Core?
What’s included with Fabric’s Components?
Fabric sub-projects
Fabric React
Fabric JS
ngFabric
Fabric iOS
Robust, up-to-date
components built with
the React framework.
Simple, visualsfocused components
that you can extend,
rework, and build on.
Community-driven
project to build
components for
Angular-based apps.
Native Swift colors,
type ramp, and
components for
building iOS apps.
Browser support (where applicable)
Fabric React component library
Set of components built on the React framework
• More functionality than before, just the view layer
Used to build modern SharePoint
• Works great with the SharePoint Developer Framework
Used across Office 365 (and Microsoft)
• Teams across the company use and contribute to the library
Made available for those who also choose the tech
• Interested in or already using React? Try this!
Fabric JS component library
Presentation focused & framework agnostic
• Simple components with basic functionality that doesn’t depend on a
JavaScript framework
Built using Handlebars
• Helps us build Fabric’s components modularly; less code redundancy
Uses TypeScript
• Linting, predictability
Few dependencies
• Removed jQuery so it’s lighter (excluding the DatePicker)
ngOfficeUIFabric component library
Community-driven project
• Forked from the Fabric JS components
Native Angular 1.x directives for Office UI Fabric
• Implementations of the JS components using Angular
Not a Microsoft project, but useful
• Proving how the open source model works 
Fabric iOS
Simple Office 365 styling for iOS in Swift
• Type ramp, colors, icon recommendations
Basic native customizations and components
• Native button, label, and textfield customizations; InitialsView and
LogoView components
Used in SharePoint’s iOS app
• Joint effort between SharePoint’s Design Development team and
SharePoint engineering
Distribution
Available via NPM, Bower,
NuGet, Microsoft CDN
All code on GitHub for you to
clone, build, and use
• Source of truth is on GitHub
OfficeDev on GitHub
Learning more
To see all the assets and tools provided by the Fabric toolkit,
check out the website: http://dev.office.com/fabric
Reach out to the team at on GitHub!
See the code (and the team’s interactions with developers) on our
repositories: Fabric Core, Fabric JS, and Fabric React
DEMO
Thank You!
Questions?
© Microsoft Corporation. All rights reserved.