Developing with Office UI Fabric

Fabric helps you create a front-end experience for your app that aligns with the Microsoft Office experience. This course will give you demos for many Fabric components like display and navigation, and you'll even learn how to use Fabric in Angular.
Course info
Rating
(11)
Level
Intermediate
Updated
Mar 24, 2016
Duration
2h 54m
Table of contents
Getting Started Developing with Fabric
Handling Multiple Resolutions with the Responsive Grid
Building Forms
Improving User Interactions with Display Components
Enhancing Layout and Navigation
Building Fabric and Contributing to the Project
Using Fabric in Angular
Resources & Fabric Futures
Description
Course info
Rating
(11)
Level
Intermediate
Updated
Mar 24, 2016
Duration
2h 54m
Description

With Fabric, Microsoft Office's front-end framework, you can easily build web apps that look and feel like Office. This course, Developing with Office UI Fabric, picks up where the Introducing Office Fabric course left off, showing detailed demos of each Fabric component at the code level alongside the results in the browser. First, you'll start by setting up your first Fabric elements and learning about its responsive grid. You'll then move on to building forms and working with code for display, layout, and navigation components. Finally, you'll learn about how to use Fabric in Angular and receive the latest updates on the roadmap for Fabric. By the end of this course, you'll understand how to use Fabric to a front-end experience for your user that integrates wonderfully with the front-end experience of Microsoft Office 365.

About the author
About the author

Dave is a start-up co-founder and CTO, an 11-time Microsoft MVP, and full-stack web developer, trainer and author focusing on JavaScript, NodeJS, document DBs and C#.

More from the author
Learning RxJS Operators by Example Playbook
Intermediate
3h 48m
Dec 19, 2018
Functional JavaScript Libraries Playbook
Intermediate
2h 59m
Jun 1, 2018
Constructing a User Interface with Angular
Intermediate
4h 35m
Feb 5, 2018
More courses by David Mann
Section Introduction Transcripts
Section Introduction Transcripts

Handling Multiple Resolutions with the Responsive Grid
Let's start diving in and working with some Fabric elements. We're going to start with the responsive grid, which allows us to really, really easily support multiple resolutions in our UIs. If you're not familiar with or using grids in your applications, you really need to start. They offer a lot of functionality and ask very little of us. There are dozens of grid systems out there, arguably the most well known are Bootstrap and Foundation. The Fabric grid is going to be pretty similar. We saw a slide similar to this in the introducing Fabric course so I'm not going to spend a whole lot of time on it here. Grid systems are generally based on a 12 column layout using media queries to determine how wide each column is on the screen based on the total width of the available window. Fabric has six different sizes, each coming into play at a certain minimum window size. For example, any window or resolution up to 479 pixels wide is going to be considered small, 480 through 639 medium, 640 to 1023 large, et cetera. We'll see these sizes coming up in the demos repeatedly. The rest of this module is demos. We're going to start with the basics and then move on to more advanced topics like pushing and pulling columns across a row, hiding columns in certain resolutions, and finally, using offsets to position columns within a row. By the time we're done you'll know everything there is to know about using the Fabric grid.

Building Forms
Now let's start digging into some of the components provided by Fabric. There are currently 29 components in Fabric, some quite simple, some considerably more complex. We're going to start by taking a look at the components that are typically used in forms to collect data from users. There are eight Fabric components often used in forms. We're going to cover each of them in a series of demos in just a minute. They start from simple labels, radio buttons and checkboxes, toggles, buttons, dropdowns, text fields, and finally more complex controls like the PeoplePicker and a DatePicker. And we're going to take a look at each of these in the collection of demos inside this module. In each demo we'll examine the HTML and the CSS classes required for the component as well as, where it makes sense, the JavaScript that calls the plug-in or other functions that allow the component to do its work. And in some cases we'll also look at some sample code that shows you how you can begin to interact with the components. Things like programmatically adding users into a people picker, and some other things as well. Let's jump into those demos.

Improving User Interactions with Display Components
The next group of components we're going to examine are what I've termed display components. That's not an official breakdown inside Fabric, but I just kind of needed a way to group things together for the sake of this course. So display components are those that are typically used to show information to users, although some of them do have some editable aspects and so could really be used to collect or update information as well. There are eight sets of components in this grouping and we're going to cover each of them in a series of demos in just a few minutes. They start from dialogs and an associated overlay, although you could really use the overlay elsewhere too. Then callouts, a replacement for the standard HTML table that's easier to style and offers a couple of other benefits as well, list and list items, and then a few that are variations on a theme, all used to display and work with information about people. Persona, Org Chart, Persona Card, and Facepile. As before, each components or set of components have their own demo and each demo will examine the HTML and CSS classes required for the component as well as, where applicable, the JavaScript that calls the plug-in or other functions that allow the component to do its work.

Enhancing Layout and Navigation
The last set of components we're going to take a look at are those used to help build the layout and navigation of your page. There are 11 components in this grouping. We're going to cover each of them in a series of demos in just a minute. They start from a simple Spinner and Link, then Breadcrumbs, Progress Indicator, Message Banner, Search Box, Panel, Pivot, Contextual Menu, NavBar, and CommandBar. As before each component or set of components have their own demo and each demo will examine the HTML and CSS classes required for the component as well as, where it makes sense, the JavaScript that calls the plug-in or other functions that allow the component to do its work (Loading).

Building Fabric and Contributing to the Project
Fabric is an open source and Microsoft is taking pulled requests. This means that you're free to contribute back to the project if you add some interesting capability or fix a bug, even a documentation bug. Even if you don't contribute back though, there could still be reasons why you would want to fork the project and maintain your own separate code base. Generally this would be because you need to maintain your own or your company's own specific flavor of Fabric. You've made some changes that are unique to your use and you either can't contribute them back to the core project or they don't make sense or won't be accepted into the core. Maybe you've changed the way a component works based on your needs, but the core repo doesn't want that different implementation. Whatever the reason, it's not unusual to maintain your own repo tied back to the core. This allows you to make your own changes, but still choose which changes made by others to the core project you want to incorporate into your instance. We're going to cover the entire process of forking and cloning the official repo to get your own copy, looking at the layout and pieces of the project, examining how the project is built and the output of a build, and finally we'll take a look at fixing a bug submitting a pull request back to the core repo for consideration.