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-fcl(font color)

ms-icon

ms-bgc(background color)

OneDrive

ms-ContextualMenu

ms-bg-color

ms-icon

ms-font (size)

Outlook Web App

ms-fcl(font color)

ms-icon

ms-font-weight

ms-bg-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

• Package managers• Bower

• $ bower install office-ui-fabric

• npm• $ npm install office-ui-fabric

• NuGet• PM> Install-Package office-ui-fabric

• Build from source

<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">

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

Robust, up-to-date components built with the React framework.

Fabric JS

Simple, visuals-focused components that you can extend, rework, and build on.

ngFabric

Community-driven project to build components for Angular-based apps.

Fabric iOS

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.