2. All About Office UI Fabric
Fabio Franzini
@franzinifabio

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

9. Why I can use Fabric?

10. Real World Examples

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

12. Fabric in Microsoft Products
1/1/2019 1:40 PM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Fabric in Microsoft Products
Azure DevOps
SharePoint
OneDrive
CommandBar
DetailsList
ContextualMenu

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 Core & Fabric React
1/1/2019 1:40 PM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Fabric Core & Fabric React
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 React
ReactJS UI Components.
github.com/OfficeDev/office-ui-fabric-react
Basic Inputs
Navigation
Content
Pickers
Progress
Surfaces
Accessibility
File Type
Merge
Charting
Experimental
JavaScript utilities and resources.

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

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

26. Resources

27. Resources Fabric: https://dev.office.com/fabric
Fabric JS:
GitHub: Fabric Core
GitHub: Fabric React
GitHub: Fabric JS
Fabric Preview
Office UI Fabric Web Components Experiment