1. Office UI Fabric INTRO

2. The Pitch The pitch

3. Looks amazing!

4. Bad looking app Segoe UI Fonts! Official Microsoft Colors!

5. Great looking app

6. The Reality The reality

7. Started 2 years ago by a group of designers and 3 front-end devs including core colors, font, icons Now 10 front-end devs and designers who work in the OneDrive / SharePoint Design Studio OFFICE UI FABRIC The Team, Philosophy History

8. Fabric is a JavaScript framework agnostic, easy-to-apply representation of the Office 365 Design Language in CSS and HTML for Office and Office 365 Goal of helping Designers and Engineers inside and outside of Microsoft be as efficient as possible OFFICE UI FABRIC The Team, Philosophy Philosophy

9. OFFICE UI FABRIC Office 365 Chrome ms-fcl (font color) ms- icon ms-bgc (background color)

10. OFFICE UI FABRIC Outlook Web App ms-fcl (font color) ms- icon ms-font-weight ms-bg-color

11. OFFICE UI FABRIC OneDrive ms-ContextualMenu ms-bg-color ms- icon ms-font (size)

12. OFFICE UI FABRIC Consumers Outlook, Word, Excel, and PowerPoint Add-ins Consumers

13. Open source development Over 15k visits/month, ~70 unique clones/month Most popular repository in OfficeDev OFFICE UI FABRIC Open source

14. Engineering Distribution Distributed via NPM, Bower, NuGet, and a Microsoft CDN All code on GitHub for additional access and prior versions OFFICE UI FABRIC Code Distribution

15. DOCS SITE OFFICE UI FABRIC dev.office.com/fabric Interactive documentation site with responsive components, styles, and lots of documentation Always expanding and updating

16. What’s Included What’s included

17. Typography Fonts Colors Icons Office 365 Theming Animations Responsive Grid Components Localization New Investments OFFICE UI FABRIC In a Nutshell

18. OFFICE UI FABRIC +7 more Segoe UI, Type Ramp CSS classes representing the type ramp for the Office Design Language Helper classes for weight and color

19. OFFICE UI FABRIC 9 Theme Colors 22 Accent Colors 11 Neutral Colors Color O365 theme colors, neutral colors, MS Accent colors CSS classes for text, border, background, and hover states – just reference the class and you’re good to go Pulled directly from the MS palette Contrast ratio guidance baked into the site

20. OFFICE UI FABRIC Iconography The official icon font, with glyphs for applications and scenarios throughout O365 Simple implementation with CSS classes Localized for right-to-left languages IMPLEMENTATION

21. OFFICE UI FABRIC Responsive Grid Quickly create flexible layouts Consistent spacing and alignment 12-column, mobile-first grid

22. OFFICE UI FABRIC Localization Right-to-left CSS optimizations for icons, animations, and the grid Optimized font stacks for non- Western European languages FLIPS ICONS 633 633 REVERSES GRID LAYOUTS OPTIMIZES FONT FALLBACKS IMPLEMENTATION Application name...

23. OFFICE UI FABRIC... IMPLEMENTATION Motion CSS classes for 3 types of animations: slide, scale and fade Several variations for each type, e.g. most have “in” and “out” variants 24 animations Here is how the name of the class describes the animation:

24. OFFICE UI FABRIC Responsive UI elements used throughout Office 365 These are common, cross-product patterns (e.g. not bespoke) HTML, CSS, presentational JavaScript Framework-agnostic “components”, not data-bound “controls” Components

25. OFFICE UI FABRIC Inputs

26. OFFICE UI FABRIC Pickers

27. OFFICE UI FABRIC Layout

28. CONTENT OFFICE UI FABRIC Content

29. FABRIC AS PALETTE OFFICE UI FABRIC Fabric as a Palette Think of Fabric as a Palette to help you paint your UI Pick, choose, and modify to suit the needs of your project and your customer

30. TOOLING OFFICE UI FABRIC Tooling Gulp is used for automated building, watching “Bundling” tool recently added for creating custom bundles of just what you need Recently completed conversion from LESS to SCSS

31. The Future The future

32. Roadmap We have a roadmap in our repo Things we hope to get to, component requests, and more! OFFICE UI FABRIC Roadmap

33. Core colors, hashing algorithm, and type ramp Controls underway More information and documentation will be available soon! iOS Fabric for iOS Released OFFICE UI FABRIC

34. Design Language updates Design Language Updates OFFICE UI FABRIC New, updated iconography Updated components Carry a similar look and feel to Windows 10 Next ~6 months

35. upcoming Upcoming Work OFFICE UI FABRIC Moving to TypeScript Toolkits that can be leveraged by Designers using the tools they love More new components as our products grow and new patterns emerge

36. Find us on GitHub! Got a question, comment, or suggestion? OFFICE UI FABRIC https://github.com/OfficeDev/Office-UI-Fabric

37. Thank you! Thanks!