Office UI Fabric Introduction by Amie Seisay - A Stylish Framework for Office Apps

introducing office ui fabric n.w
1 / 14
Embed
Share

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.

  • Office UI Fabric
  • Front-end framework
  • Amie Seisay
  • Styling
  • Office365

Uploaded on | 0 Views


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


  1. Introducing Office UI Fabric Amie Seisay www.seisayitsolutions.com amie@seisayitsolutions.com @AmieSeisay

  2. Thanks to our sponsors Platinum Gold Bronze Northern VA CodeCamp Spring 2016 @AmieSeisay

  3. Thanks to host sponsor Northern VA CodeCamp Spring 2016 @AmieSeisay

  4. 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

  5. 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

  6. Getting started is easy! @AmieSeisay

  7. 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

  8. Option 2 - Download GitHub: https://github.com/OfficeDev/Office-UI-Fabric @AmieSeisay

  9. 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

  10. Framework Features Styles: http://dev.office.com/fabric/styles Typography (size, weight, color) Icons Animations Language Optimized Fonts Responsive Grid @AmieSeisay

  11. Framework Features Components: http://dev.office.com/fabric/components Breadcrumbs Button Dialog People Picker Spinner @AmieSeisay

  12. 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

  13. 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

  14. 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

Related


More Related Content