use office ui fabric to design applications that blend ... · office ui fabric in a nutshell fabric...
Post on 25-May-2020
5 Views
Preview:
TRANSCRIPT
Use Office UI Fabric to design applications
that blend seamlessly into Office
Jinghui Zhang
Microsoft Software Engineer
Office UI Fabric in a nutshell
Fabric is a front-end developer toolkit that
implements the Office and Office 365 design
language in code
We use it inside the company to help build
our UI/UX
It’s free and open source so developers
outside of Microsoft can build UI/UX that fits
seamlessly into Office by using the same
“paint” that we use in our products
You’re using what we use!
Our tools, available for you• Fabric team works in the open, but also builds SharePoint, OneDrive’s
front-end
Feedback, requests• Issues, feature requests, component requests
Contributions!• Bug fixes, documentation updates, and flexibility improvements
Who inside of Microsoft uses Fabric?
Office 365 Suite
ms-fcl(font color)
ms-icon
ms-bgc(background color)
OneDrive
ms-ContextualMenu
ms-bg-color
ms-icon
ms-font (size)
Outlook Web App
ms-fcl(font color)
ms-icon
ms-font-weight
ms-bg-color
Where is Fabric recommended?
Office Add-ins (v2.6.1, currently)
Office 365 applications
SharePoint
Fabric is baked into the SharePoint Framework
Get Started
• Include Fabric CND reference
• For components, also download the sample JS from GitHub and use/change as needed
• Use appropriate classes
Ways to Get Fabric
• Download the source cod from GitHub
• Reference the CDN
• Package managers• Bower
• $ bower install office-ui-fabric
• npm• $ npm install office-ui-fabric
• NuGet• PM> Install-Package office-ui-fabric
• Build from source
<link rel="stylesheet" href="http://appsforoffice.microsoft.com/fabric/2.2.0/fabric.min.css"><link rel="stylesheet" href="http://appsforoffice.microsoft.com/fabric/2.2.0/fabric.components.min.css">
Fabric Use
•Office 365 apps• SharePoint Add-ins•Office Add-ins
The core of Fabric is open source. However the fonts referenced by Fabric are licensed to use in web apps/add-ins powered by Office. See license for detail.
Work Across Office Clients
Windows Desktop Browser iPad
How to learn more about Fabric
What’s included with Fabric Core?
What’s included with Fabric’s Components?
Fabric sub-projects
Fabric React
Robust, up-to-date components built with the React framework.
Fabric JS
Simple, visuals-focused components that you can extend, rework, and build on.
ngFabric
Community-driven project to build components for Angular-based apps.
Fabric iOS
Native Swift colors, type ramp, and components for building iOS apps.
Browser support (where applicable)
Fabric React component library
Set of components built on the React framework• More functionality than before, just the view layer
Used to build modern SharePoint• Works great with the SharePoint Developer Framework
Used across Office 365 (and Microsoft)• Teams across the company use and contribute to the library
Made available for those who also choose the tech• Interested in or already using React? Try this!
Fabric JS component library
Presentation focused & framework agnostic• Simple components with basic functionality that doesn’t depend on a
JavaScript framework
Built using Handlebars• Helps us build Fabric’s components modularly; less code redundancy
Uses TypeScript• Linting, predictability
Few dependencies• Removed jQuery so it’s lighter (excluding the DatePicker)
ngOfficeUIFabric component library
Community-driven project• Forked from the Fabric JS components
Native Angular 1.x directives for Office UI Fabric• Implementations of the JS components using Angular
Not a Microsoft project, but useful• Proving how the open source model works
Fabric iOS
Simple Office 365 styling for iOS in Swift• Type ramp, colors, icon recommendations
Basic native customizations and components• Native button, label, and textfield customizations; InitialsView and
LogoView components
Used in SharePoint’s iOS app• Joint effort between SharePoint’s Design Development team and
SharePoint engineering
Distribution
Available via NPM, Bower, NuGet, Microsoft CDN
All code on GitHub for you to clone, build, and use
• Source of truth is on GitHub
OfficeDev on GitHub
Learning more
To see all the assets and tools provided by the Fabric toolkit, check out the website: http://dev.office.com/fabric
Reach out to the team at on GitHub!
See the code (and the team’s interactions with developers) on our repositories: Fabric Core, Fabric JS, and Fabric React
DEMO
Thank You!
Questions?
© Microsoft Corporation. All rights reserved.
top related