
Office UI Fabric Introduction by Amie Seisay - A Stylish Framework for Office Apps
Learn about Office UI Fabric, a front-end framework introduced in 2015 by Amie Seisay. Discover its components, styling capabilities, and easy setup options to enhance your Office365 web apps and add-ins.
Download Presentation

Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Introducing Office UI Fabric Amie Seisay www.seisayitsolutions.com amie@seisayitsolutions.com @AmieSeisay
Thanks to our sponsors Platinum Gold Bronze Northern VA CodeCamp Spring 2016 @AmieSeisay
Thanks to host sponsor Northern VA CodeCamp Spring 2016 @AmieSeisay
Background Skills SharePoint Server Farm Architect Credentials Bachelors and Masters in Computer Science Company Owner, Seisay IT Solutions Developer Clients Federal Government County Government Associations Medical Insurance MCTS, CTT+, ITIL SharePoint Trainer @AmieSeisay
Intro to Office UI Fabric Introduced in August 2015 Front end framework used for styling Office365 web apps and Office Add-ins Consists of responsive, mobile friendly design components and styles Based Office Design Language @OfficeUIFabric @AmieSeisay
Getting started is easy! @AmieSeisay
Option 1 - Fabric CDN Reference the Fabric CDN in the <head> section of your page <link rel="stylesheet" href="http://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css"> <link rel="stylesheet" href="http://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.mi n.css"> @AmieSeisay
Option 2 - Download GitHub: https://github.com/OfficeDev/Office-UI-Fabric @AmieSeisay
Option 3 Package Manager Install with a Package Manager Npm $ npm install office-ui-fabric Bower $ bower install office-ui-fabric NuGet Package Manager PM> Install-Package office-ui-fabric @AmieSeisay
Framework Features Styles: http://dev.office.com/fabric/styles Typography (size, weight, color) Icons Animations Language Optimized Fonts Responsive Grid @AmieSeisay
Framework Features Components: http://dev.office.com/fabric/components Breadcrumbs Button Dialog People Picker Spinner @AmieSeisay
Tools for Development Flexible with the Editors you are already using NotePad ++ SharePoint Designer Visual Studio Visual Code And others Chrome Extension Fabric Explorer @AmieSeisay
Demo and Build! Let s take a look at some samples Next let s build something together That s right! Pull out your laptops!!! @AmieSeisay
Resources Office UI Fabric: http://dev.office.com/fabric Office UI Fabric for iOS: http://dev.office.com/fabric/blog and https://github.com/OfficeDev/Office-UI-Fabric-iOS Code Snippets and Fabric Explorer by David Mann: http://blog.mannsoftware.com/?p=2371 @AmieSeisay