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