Fabio Franzini gave a presentation on Office UI Fabric, Microsoft's front-end framework. He discussed that Fabric provides styles, icons, and components to build experiences that fit seamlessly into Office and Office 365. It is responsive, mobile-first, and integrates with JavaScript frameworks like React and Angular. He showed examples of Microsoft products using Fabric and reviewed how to get started with the different versions of Fabric like Core, React, and JS. Finally, he discussed future plans to update Fabric with Fluent Design and provided resources to learn more about Fabric on GitHub.

1. 6th October 2018
Milan

2. All About Office UI Fabric
Fabio Franzini
@franzinifabio

3. #SPSMilan

4. A Huge “Thank You!” To Our Sponsors …

5. Agenda
• What is Office UI Fabric (Fabric)?
• Real World Examples
• Inside Fabric
• How to use
• Future
• Resources

6. WHAT IS OFFICE UI FABRIC?

7. What is Office UI Fabric (Fabric)?
• The official front-end framework
for building experiences that fit
seamlessly into Office and Office
365.
• Focuses on look and feel, so you
can just worry about function.
• Responsive, mobile-first, front-
end framework.
• Contains Styles, Icons and
Components.
• Integrates with CSS, plain
JavaScript, React, Angular.
• Built by Microsoft (Open Source)
Microsoft’s
Front End
Framework
Office Design
Language
Responsive &
Mobile
Styles, Icons
&
Components
Integrates w/
Javascript,
React or
Angular
Open Source
(GitHub)

8. Open Source
https://github.com/OfficeDev

9. Why I can use Fabric?

10. REAL WORLD EXAMPLES

11. Products using Fabric
+ 45 additional Microsoft sites and products

12. OneDriveSharePointAzure DevOps
CommandBar
DetailsList
ContextualMenu
Fabric in Microsoft Products

13. INSIDE FABRIC

14. Get started
Styles
Fabric gives you
access to Segoe,
Microsoft’s official
typeface, along
with the color
palette, type ramp,
icons, and
responsive grid for
Office 365.
Icons
Fabric includes
Office’s official
product icons.
Fabric also provides
a suite of product
and document
symbols, so you can
use the same
metaphors we use.
Components
Components are
the building blocks
of your UI. Fabric
has a variety of
components,
including
navigation,
commands,
containers, and
content.
Design Toolkit
The Fabric design
toolkit is built with
Adobe XD and
provides controls
and layout
templates that
enable you to
create seamless,
beautiful Office
experiences.

15. Design Toolkit
Tools and resources for designing responsive experiences using Fabric styles and components, built
using Adobe XD and Sketch.

16. Choose the version of Fabric
Fabric Core
Core elements
of the design
language,
including icons,
colors, type,
and grid
Fabric React
Robust, up-to-
date
components
built with the
React
framework
Fabric JS
Provides you
with simple
components
that don't
require a
specific
framework.
AngularJS
Community-
driven project
to build
components
for Angular-
based apps

17. Fabric React
ReactJS UI Components.
github.com/OfficeDev/office-ui-fabric-react
Basic Inputs
Navigation
Content
Pickers
Progress
Surfaces
Accessibility
Styling @uifabric/styling
Icons @uifabric/icons
File Type Icons @uifabric/file-type-icons
Merge Styles @uifabric/merge-styles
Charting controls @uifabric/charting
Experimental controls @uifabric/experiments
JavaScript utilities and resources.
Fabric Core
Atomic styles. Pure CSS.
Fonts & Typography
github.com/OfficeDev/office-ui-fabric-core
Color Palettes
Branded Assets
Motion Helpers
Responsive Grid
Localization Utilities
Iconography
Fabric Core & Fabric React

18. HOW TO USE

19. How to use – Fabric Core

20. How to use – Fabric React
npm --save install office-ui-fabric-react

21. How to use – Fabric JS
DO NOT USE THE FABRIC JS
• https://andrewconnell.com/blog/avoid-the-office-ui-fabric-javascript-package

22. DEMO

23. FUTURE

24. Fabric + Fluent
Design system updates aiming to create
experiences that will be adaptive, empathetic
and beautiful across modalities.
Changes in Fabric will focus on colors,
typography, shadows, animations, minor
component adjustments.
• Fabric’s Fluent updates will be an evolution
of styles, not a revolution of layouts.
• Because of this, existing Fabric investments
will be safe.
• aka.ms/fabric-preview

25. DEMO

26. RESOURCES

27. Resources
• Fabric:
https://dev.office.com/fabric
• Fabric JS:
https://dev.office.com/fabric-js
• GitHub: Fabric Core
https://github.com/OfficeDev/office-ui-fabric-core
• GitHub: Fabric React
https://github.com/OfficeDev/office-ui-fabric-react
• GitHub: Fabric JS
https://github.com/OfficeDev/office-ui-fabric-js
• Fabric Preview
https://aka.ms/fabric-preview
• Office UI Fabric Web Components Experiment
https://github.com/fabiofranzini/office-ui-fabric-web-components-experiment

28. QUESTIONS&
ANSWERS

29. Thank You!

30. 6th October 2018
Milan