Microsoft officially announced Office UI Fabric this week. In case if you are wondering what Office UI Fabric is:
The front-end framework for building experiences for Office and Office 365.
Fabric is a responsive, mobile-first, front-end framework, designed to make it quick and simple for you to create web experiences using the Office Design Language. It’s easy to get up and running with Fabric—whether you’re creating a new Office experience from scratch or adding new features to an existing one.
It is now easy to build your SharePoint add-ins, or any web application for that case and apply the beautiful Office UI styles, typography and icons. The Office UI Fabric with SharePoint Add-ins FAQ covers some guidance/questions around applying Fabric styles in SharePoint add-ins.
I took the liberty to apply Office UI Fabric styles to the default ASP.NET MVC template in Visual Studio which is also used as the default MVC web application project for your provider-hosted SharePoint add-in in Visual Studio. The result is beautiful!
The project is available in OfficeDev GitHub repo:
How to Run this Sample
To run this sample, you need:
From your Git Shell or command line:
git clone https://github.com/OfficeDev/FabricSharePointAddin-Template.git
- Open the project in Visual Studio 2015
- Simply Build the project to restore NuGet packages
- In the Solution Explorer, click on FabricSharePointAddin.SharePoint project
- In the Properties Window, scroll to reveal the Site URL property and enter your SharePoint developer site URL:
For those who are wondering how the layout is structured, here is a picture that shows the layout plan:
Step 3: Build and Debug your web application
Now you are ready for a test run. Hit F5 to test your add-in.