Office UI Fabric INTRO

The Pitch The pitch

Looks amazing!

Bad looking app Segoe UI Fonts! Official Microsoft Colors!

Great looking app

The Reality The reality

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

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

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

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

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

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

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

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

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

What’s Included What’s included

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

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

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

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

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

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 REVERSES GRID LAYOUTS OPTIMIZES FONT FALLBACKS IMPLEMENTATION Application name...

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:

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

OFFICE UI FABRIC Inputs

OFFICE UI FABRIC Pickers

OFFICE UI FABRIC Layout

CONTENT OFFICE UI FABRIC Content

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

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

The Future The future

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

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

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

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

Find us on GitHub! Got a question, comment, or suggestion? OFFICE UI FABRIC

Thank you! Thanks!