 Hi, my name is Humberto Lesama, Senior Program Manager in Office Extensibility. Today, I'm going to talk about Office UI Fabric, where it is and how to use it. I'm also going to give you a quick demo of Fabric in action. Fabric is an open source framework to help you quickly build web applications that look and feel like Office. Many like to refer to Fabric as the equivalent of bootstrap for Office because it helps you build your UI faster. A good way to think about Fabric is as the skin of your application. Fabric includes lots of components to get you going, typography, colors, icons, animations, and skins for various components to quickly build web applications that look and feel like Office. Some of these components include buttons, text fields, toggles, but also some styles for Office-specific items like People Picker and ListViews. You can use Fabric on any Office Power web application, such as Office 365 apps, SharePoint add-ins, and Office add-ins. Please note that the core source of Fabric is open source under the MIT license. However, the font style Fabric references are licensed to use in Office add-ins, which in this context means any Office Power web app. Get started using Fabric, it's simple. The quickest way is reference Fabric CSS file from more CDN. Then if you want to use components, you also need to download and reference their sample JavaScript files from GitHub. You can use individual files for each component, or you can include all of them at once. Then use the appropriate classes in your markup. For components, we have some sample HTML that shows you how to use them. And that's it, you're on your way to creating awesome web apps. Now we're gonna show you Fabric in action. First on a website and then inside an Office adding. Here you can see a sample video portal built using Fabric. Showcases components like the navigation bar, typography, colors, and the responsive grid. For example, take a look at what happens when I research the screen. You can see that because it's using the responsive grid, it nicely adapts to the space that is available. All the way to small form factor like for example, a phone. You can see that all the images, sizes, and the grid adapts, but also the navigation bar adapts. That's because Fabric, all the components in Fabric are responsive components. Now let's take a look at the source starting with the HTML. Here you can see the source that is behind that page. And it showcases a couple of different things. First, as we mentioned before, all you have to do is reference Fabric CSS components. And then all you have to do is use the classes throughout. For example, here you're seeing that I'm using the navigation bar and then I'm just filling in with items using the appropriate classes. Pretty straightforward. It's also noteworthy to mention that this sample makes extensive use of less, including variables and mixings. You can see both the source of the HTML here, but you can also have access to the actual list files used for the sample. This showcases another aspect of Fabric because it's open source, you can actually take the list files and change it to suit your needs. As you can see, we're going to get a website that looks and feels awesome and has the office design language. It's super simple. Now let's take a look at how you can quickly build an office adding using Fabric. This is how an adding that uses Fabric looks like. As you can tell, it fits right at home with a modern look that harmoniously integrates with office. In this case, worth. Not only that, but because the adding uses standard web technologies, it is easier to plug in Fabric because it just like building a webpage. Adding is not only allowed you to interact with documents, they also provide APIs that make the adding feel more integrated. For example, let me close the adding here and then switch the theme of office. Let me pick the dark gray theme. You can see that the theme of office changed, but let's see what happened with the adding. Because the adding is using our team in APIs along with Fabric components, the adding was able to pick up the theme. It is important to highlight that the team in API, it's independent of Fabric, but they are designed to work together. So the result is an adding that looks and feels right at home and follows the office theme. Behind the scenes, the adding is doing exactly the same thing that we mentioned before. It references Fabric and uses components and classes throughout. Let me show you the source code really quick. This is the adding that I just showed you. You can see, similar to this example before, that I'm referencing Fabric CSS classes, which are right here. And then in this case, I decide to load specific components that I'm using. For example, the pivot, the search box, drop down and the list item. And then all I had to do is use those classes throughout. For example, here, I'm using the responsive grid to define my rows and columns. Then below, I'm using the search box. Again, using the corresponding classes like Ms-searchbox. Then you can see that I'm using the navigation bar. To get the idea, it's pretty straightforward to use Fabric. Super simple, yet super powerful. You can get the source of both samples that we show you right on GitHub. We mentioned that the fastest way to get going is to reference Fabric from the CDN, but you can also get Fabric from any of these popular sources. GitHub, particularly if you want to get your hands on the source code, also Bower or NPM, or as a Nougat package which makes it a snap to consume it right from within Visual Studio. Fabric is an open source project and we would love to get your contributions. Both reports of fixes, optimizations and suggestions for new components are all welcome. We've also seen some also community projects being built around Fabric. Some notable examples are projects to create Angular Directives and React components. Very exciting. If you want to learn more about Fabric, head to def.office.com slash Fabric. What are you waiting for? Go ahead and create some amazing looking apps and add-ins. Thank you for watching and happy coding.