All About Office UI Fabric Fabio Franzini @franzinifabio

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

What is Office UI Fabric?

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)

Open Source https://github.com/OfficeDev

Why I can use Fabric?

Real World Examples

Products using Fabric + 45 additional Microsoft sites and products

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

Inside Fabric

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.

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

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

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

How to use

How to use – Fabric Core

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

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

Future

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

Resources

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