Introducing Office UI Fabric Amie Seisay amie@seisayitsolutions.com @AmieSeisay
Background Skills SharePoint Server Farm Architect Developer SharePoint Trainer Credentials Bachelors and Masters in Computer Science MCTS, CTT+, ITIL Company CEO and Founder, Seisay IT Solutions Clients Federal Government County Government Associations Hospital Construction Insurance
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
Getting started is easy!
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.min.c ss">
Option 2 - Download GitHub: https://github.com/OfficeDev/Office-UI-Fabric
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
Framework Features Styles: http://dev.office.com/fabric/styles Typography (size, weight, color) Icons Animations Language Optimized Fonts Responsive Grid
Framework Features Components: http://dev.office.com/fabric/components Breadcrumbs Button Dialog People Picker Spinner
Tools for Development Flexible with the Editors you are already using NotePad ++ SharePoint Designer Visual Studio Visual Code And others… Chrome Extension Fabric Explorer
Demo and Build! Let’s take a look at some samples Next let’s build something together That’s right! Pull out your laptops!!!
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
Thanks to our Sponsors! Platinum: Gold: Silver:
More Fun Stuff Raffle: Please join us in the Atrium at 5:15 PM for the raffle. We are raffling some exciting prizes including a Wacom tablet, a BB-8 droid, and who knows, maybe a Xbox One S (need to be present to win)!!! SharePint will be held at Mad Mex (370 Atwood St, Pittsburgh, PA 15213). While it starts at 5:45 PM, there’s no end time!!!! Pittsburgh Area SharePoint User Group Meets at the Microsoft office on the North Shore More Info: https://www.linkedin.com/groups/Pittsburgh-Area-SharePoint- User-Group-3769745/about
We do Request that… You fill out the Session Evals. These will also be your Raffle tickets. Print your name clearly if you intend to participate in the Raffle and drop the forms at the registration desk after the last session. You visit the sponsors. The event is possible due to their generous support and we request that you visit them and inquire about their products & services. Cell phones be kept on silent as a courtesy to other attendees and speakers