The front-end framework for building experiences for Office and Office 365 Office UI Fabric is a responsive, mobile-first, front-end framework that you can use to apply the Office Design Language to your web experiences. Whether you’re creating a new app or add-in or updating an existing one, Fabric makes it easy to get up and running. Built by Microsoft designers and design developers for Microsoft (and you). Just like other popular frameworks, but built from the ground up for Office 365 without excessive overriding. All about styling instead of function, so you can focus function and not look and feel. Integrates with plain JavaScript and frameworks such as Angular, & React.

1. Intro to the
Office UI Fabric
Presented by : Thomas Daly

2. About Me
Thomas Daly – tdaly@bandrsolutions.com
• Branding & UI Developer @ B&R Business Solutions
• 15+ years in web dev, 10+ in SharePoint
• Speaker | Blogger | Community Leader
• Office Server and Services MVP 2017
• Involved in the Office 365, Azure & SharePoint community
• New Jersey Office 365 User Group @ Microsoft - Iselin, NJ [Every 4th Tues]
• SharePoint Saturday New York @ Microsoft – Times Square [July 2017]
• NJ Azure Bootcamp @ Microsoft – Iselin, NJ [April 22, 2017]
• SharePoint Saturday NJ - [2013-2014]
• My SharePoint Blog
• Git Hub [corp directory / o365 sticky footer / bootstrap navigation]
• Recently Presented at
• SharePoint Saturday DC (June 2017)
• SharePoint Saturday Baltimore (May 2017)
• SharePoint Saturday Houston (March 2017)

4. Office UI Fabric
The official front-end framework for building experiences that fit
seamlessly into Office and Office 365.

5. What is Office UI Fabric?
• The front-end framework for building experiences for Office and
Office 365
• Office UI Fabric is a responsive, mobile-first, front-end
framework that you can use to apply the Office Design
Language to your web experiences. Whether you’re creating a
new app or add-in or updating an existing one, Fabric makes it
easy to get up and running.
• Built by Microsoft designers and design developers for
Microsoft (and you).
• Just like other popular frameworks, but built from the ground up
for Office 365 without excessive overriding.
• All about styling instead of function, so you can focus function
and not look and feel.
• Integrates with plain JavaScript and frameworks such as
Angular, & React.
Microsoft’s
Front End
Framework
Office Design
Language
Open Source
(GitHub)
Responsive
& Mobile
Styles, Icons &
Components
Focus on
function not
look & feel
Integrates w/
Javascript,
Angular or
React

6. Office Design Language
• A term used to describe the overarching scheme or style.
• Defines a way to create unique and consistent look and feel
across the entire platform of products
• Other examples you might have heard of
• Microsoft Metro / Metro UI
• Microsoft Fluent Design System
• Material Design

7. Open Source
• Developed by Microsoft
• Open to public
• You can contribute by filing bug
reports, make feature requests and
ask questions
https://github.com/OfficeDev

8. Philosophy
• All about styling.
• Focuses on look and feel, so you can
just worry about function.
• Helping developers both inside and
outside of Microsoft be as efficient as
possible

9. Let’s take a look Real World Examples

10. • The framework is used internally on products within Office 365—such
as our suite branding, OneDrive.com, Outlook.com, Delve and the
Video Portal.

11. OneDrive

14. Inside the Office UI Fabric Styles, Icons, Components

17. Styles
The Fabric Core project includes all of the base styling that’s used throughout
Microsoft. Explore each page to learn more about the core elements of Office's
design language.
Official fonts and icons
Core Fabric styling includes the icons,
type, and colors we use to design and
build our products.
Microsoft’s palette
Making a custom component? These
elements of our design language help you
get started.
https://dev.office.com/fabric?id=0#/styles

18. Components
Fabric’s robust, up-to-date components are built with the React framework. Look
through the component list to see the building blocks that are available using Fabric
React.
Reusable patterns
Fabric’s components help you get
buttons, navigation, and more that look
like Office quickly and easily. They also
contain extra functionality that helps
your app act like Office too.
Used in Office products
Many Fabric React components are used
in our products. We make improvements
and bug fixes frequently, ensuring they
work as designed across all of
the supported browsers.
https://dev.office.com/fabric?id=0#/components

19. Using the Office UI Fabric Getting Started

20. Where would I use this?
• When you want to create stylish, responsive, mobile apps or interfaces
• Typically when building new applications
• SharePoint / Office 365 Add-Ins
• MVC Applications
• Traditional web development (HTML, CSS, JavaScript)
• Office Add-Ins
• Angular & React specific versions available
• If you are already using existing front end framework you might not want to
mix the two.

21. Getting Started – Fabric Core

22. Additional Info
Other ways to get Fabric Core
You can download a copy of Fabric for your project or add it through a package manager.
from the source code.
Need an icon or feature Fabric Core doesn’t have?
Check the Fabric Core Trello board and vote up the request so we can track it. If you don’t
an issue in the repository and we’ll add the card for you.
Usage of Fabric assets, such as fonts and icons, is subject to the assets license agreement.

23. Getting Started – Fabric JS

24. Getting Started – Fabric JS

25. Getting Started – Fabric JS
Other ways to get Fabric JS
To build Fabric JS locally, you can follow the steps outlined in the building documentation. To
such as NuGet, npm, or Bower, you can follow the package manager documentation.
Need a component Fabric JS doesn’t have?
Check the Fabric JS Trello board and vote up the request so we can track it. If you don’t see an
issue in the repository and we’ll add the card for you.

26. Demos Let’s Play

27. Key Takeaways
• Office UI Fabric is a front end framework for Microsoft Office web applications and Add-Ins (like
Bootstrap)
• It can be used to rapidly create responsive and mobile friendly application interfaces that look
similar to existing applications and are consistent across browsers / devices
• Composed of a set of Typography, Icons and Components
• Requires knowledge of HTML and Classes to use the Fabric Core
• Requires knowledge of HTML, CSS & JS to use the Fabric Core JS (Components)
• Additional versions are available for Angular and React (Microsoft is using the React version..
Hint hint)
• The website and GitHub contain the most up to date information – follow that for examples and
updates

28. Questions / Comments

29. Contact
https://www.slideshare.net/tommdaly
https://github.com/tom-daly/demos
email: tom.m.daly@gmail.com