Intro to the Office UI Fabric
Download as PPTX, PDF1 like883 views
The document introduces Office UI Fabric, a front-end framework developed by Microsoft for creating responsive experiences in Office and Office 365 applications. It emphasizes styling over functionality, providing components, icons, and styles that help developers quickly build cohesive applications. The framework is open-source and integrates with various JavaScript frameworks, promoting efficient development across web platforms.
![About Me
Thomas Daly – tdaly@bandrsolutions.com
• Branding & UI Developer @ B&R Business Solutions
• 15+ years in web dev, 10+ in SharePoint
• Speaker | Blogger | Community Leader
• Office Server and Services MVP 2017
• Involved in the Office 365, Azure & SharePoint community
• New Jersey Office 365 User Group @ Microsoft - Iselin, NJ [Every 4th Tues]
• SharePoint Saturday New York @ Microsoft – Times Square [July 2017]
• NJ Azure Bootcamp @ Microsoft – Iselin, NJ [April 22, 2017]
• SharePoint Saturday NJ - [2013-2014]
• My SharePoint Blog
• Git Hub [corp directory / o365 sticky footer / bootstrap navigation]
• Recently Presented at
• SharePoint Saturday DC (June 2017)
• SharePoint Saturday Baltimore (May 2017)
• SharePoint Saturday Houston (March 2017)](https://image.slidesharecdn.com/intrototheofficeuifabric-170615152343/85/Intro-to-the-Office-UI-Fabric-2-320.jpg)
Intro to the Office UI Fabric
- 1. Intro to the Office UI Fabric Presented by : Thomas Daly
- 2. About Me Thomas Daly – tdaly@bandrsolutions.com • Branding & UI Developer @ B&R Business Solutions • 15+ years in web dev, 10+ in SharePoint • Speaker | Blogger | Community Leader • Office Server and Services MVP 2017 • Involved in the Office 365, Azure & SharePoint community • New Jersey Office 365 User Group @ Microsoft - Iselin, NJ [Every 4th Tues] • SharePoint Saturday New York @ Microsoft – Times Square [July 2017] • NJ Azure Bootcamp @ Microsoft – Iselin, NJ [April 22, 2017] • SharePoint Saturday NJ - [2013-2014] • My SharePoint Blog • Git Hub [corp directory / o365 sticky footer / bootstrap navigation] • Recently Presented at • SharePoint Saturday DC (June 2017) • SharePoint Saturday Baltimore (May 2017) • SharePoint Saturday Houston (March 2017)
- 4. Office UI Fabric The official front-end framework for building experiences that fit seamlessly into Office and Office 365.
- 5. What is Office UI Fabric? • The front-end framework for building experiences for Office and Office 365 • Office UI Fabric is a responsive, mobile-first, front-end framework that you can use to apply the Office Design Language to your web experiences. Whether you’re creating a new app or add-in or updating an existing one, Fabric makes it easy to get up and running. • Built by Microsoft designers and design developers for Microsoft (and you). • Just like other popular frameworks, but built from the ground up for Office 365 without excessive overriding. • All about styling instead of function, so you can focus function and not look and feel. • Integrates with plain JavaScript and frameworks such as Angular, & React. Microsoft’s Front End Framework Office Design Language Open Source (GitHub) Responsive & Mobile Styles, Icons & Components Focus on function not look & feel Integrates w/ Javascript, Angular or React
- 6. Office Design Language • A term used to describe the overarching scheme or style. • Defines a way to create unique and consistent look and feel across the entire platform of products • Other examples you might have heard of • Microsoft Metro / Metro UI • Microsoft Fluent Design System • Material Design
- 7. Open Source • Developed by Microsoft • Open to public • You can contribute by filing bug reports, make feature requests and ask questions https://github.com/OfficeDev
- 8. Philosophy • All about styling. • Focuses on look and feel, so you can just worry about function. • Helping developers both inside and outside of Microsoft be as efficient as possible
- 9. Let’s take a look Real World Examples
- 10. • The framework is used internally on products within Office 365—such as our suite branding, OneDrive.com, Outlook.com, Delve and the Video Portal.
- 11. OneDrive
- 14. Inside the Office UI Fabric Styles, Icons, Components
- 17. Styles The Fabric Core project includes all of the base styling that’s used throughout Microsoft. Explore each page to learn more about the core elements of Office's design language. Official fonts and icons Core Fabric styling includes the icons, type, and colors we use to design and build our products. Microsoft’s palette Making a custom component? These elements of our design language help you get started. https://dev.office.com/fabric?id=0#/styles
- 18. Components Fabric’s robust, up-to-date components are built with the React framework. Look through the component list to see the building blocks that are available using Fabric React. Reusable patterns Fabric’s components help you get buttons, navigation, and more that look like Office quickly and easily. They also contain extra functionality that helps your app act like Office too. Used in Office products Many Fabric React components are used in our products. We make improvements and bug fixes frequently, ensuring they work as designed across all of the supported browsers. https://dev.office.com/fabric?id=0#/components
- 19. Using the Office UI Fabric Getting Started
- 20. Where would I use this? • When you want to create stylish, responsive, mobile apps or interfaces • Typically when building new applications • SharePoint / Office 365 Add-Ins • MVC Applications • Traditional web development (HTML, CSS, JavaScript) • Office Add-Ins • Angular & React specific versions available • If you are already using existing front end framework you might not want to mix the two.
- 21. Getting Started – Fabric Core
- 22. Additional Info Other ways to get Fabric Core You can download a copy of Fabric for your project or add it through a package manager. from the source code. Need an icon or feature Fabric Core doesn’t have? Check the Fabric Core Trello board and vote up the request so we can track it. If you don’t an issue in the repository and we’ll add the card for you. Usage of Fabric assets, such as fonts and icons, is subject to the assets license agreement.
- 23. Getting Started – Fabric JS
- 24. Getting Started – Fabric JS
- 25. Getting Started – Fabric JS Other ways to get Fabric JS To build Fabric JS locally, you can follow the steps outlined in the building documentation. To such as NuGet, npm, or Bower, you can follow the package manager documentation. Need a component Fabric JS doesn’t have? Check the Fabric JS Trello board and vote up the request so we can track it. If you don’t see an issue in the repository and we’ll add the card for you.
- 26. Demos Let’s Play
- 27. Key Takeaways • Office UI Fabric is a front end framework for Microsoft Office web applications and Add-Ins (like Bootstrap) • It can be used to rapidly create responsive and mobile friendly application interfaces that look similar to existing applications and are consistent across browsers / devices • Composed of a set of Typography, Icons and Components • Requires knowledge of HTML and Classes to use the Fabric Core • Requires knowledge of HTML, CSS & JS to use the Fabric Core JS (Components) • Additional versions are available for Angular and React (Microsoft is using the React version.. Hint hint) • The website and GitHub contain the most up to date information – follow that for examples and updates