Develop using Office Graph API

OfficeApplication Support
Platform/OS Support Windows Online Mac/iOS
Excel Word PowerPoint Outlook OneNote
Android
(soon)
SharePoint

Calendar
https://graph.microsoft.com
And more …
Mail
PeopleDocuments
Acesso à dados e
inteligência pelo
Microsoft Azure
Permite um
desenvolvimento
consistente
da platforma
Para ambos
corporativo ou
usuário
Excel
Notebooks
Office Graph
Groups
Users

Sideloading
Distribuição Pública
(add-ins & apps)
Office Store Outlook add-in
Deployment
SharePoint Catalog
Centralized
Deployment
Azure Management
Portal

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

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

OFFICEUIFABRIC
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

OFFICEUIFABRIC
Iconography
The official icon font, with glyphs for
applications and scenarios throughout
O365
Simple implementation with CSS classes
Localized for right-to-left languages
<i class=“ms-Icon ms-Icon--mail”></i>
IMPLEMENTATION

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

OFFICEUIFABRIC
Localization
Right-to-left CSS optimizations for
icons, animations, and the grid
Optimized font stacks for non-Western
European languages
FLIPS ICONS
6 3 3
633
REVERSES GRID LAYOUTS
OPTIMIZES FONT FALLBACKS
IMPLEMENTATION
<!doctype html>
<html dir=“rtl”>
<head>
<title>Application name</title>
<link rel=“stylesheet” href=“fabric.rtl.css”>
</head>
...
</html>

OFFICEUIFABRIC
<nav class=“LeftNav ms-u-slideRightIn40”>
...
</nav>
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:

OFFICEUIFABRIC
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

CONTENTOFFICE UI FABRIC
Content

FABRICASPALETTEOFFICE 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

TOOLINGOFFICE 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

https://msdn.microsoft.com/en-us/library/tcyt0y1f.aspx

https://msdn.microsoft.co
m/en-
us/library/hhf98b5c.aspx

https://github.com/WordDocX/DocX

https://dev.office.com/docs/add-ins/outlook/metadata-for-an-outlook-add-in

https://dev.office.com/docs/add-ins/develop/localization

https://msdn.microsoft.com/en-
us/library/system.io.packaging.pa
ckagedigitalsignaturemanager(v=
vs.110).aspx

https://dev.office.com/docs/add-ins/develop/privacy-and-
security?product=word

Develop using Office Graph API

Develop using Office Graph API

More Related Content

What's hot

Similar to Develop using Office Graph API

More from Rodrigo Kono

Recently uploaded

Develop using Office Graph API

Editor's Notes