Whether you want to build apps that run in the Office ecosystem or just look like they do, Microsoft has released a new framework to help called Office UI Fabric.  This framework consists of JavaScript and CSS that allows you to style your applications using the same styles used by Microsoft for Outlook.com, OneDrive, and Delve.

Introducing-Office-UI-Fabric-3-1024x517

 

With Office UI Fabric you can apply simple CSS styles to make your web applications look and feel like the rest of Office. The styling takes into account typography, color, icons, animations, responsive grid layouts and localization.  — Office Blog

Setting up the framework is fairly straightforward and requires a minimal amount of JavaScript along with references to the required CSS files.  The framework is currently designed to work across Office clients where Office Add-Ins are supported including Windows desktop, web browser, Mac desktop, and iOS on iPad.  The framework also includes custom controls such as a People Picker or a Detailed Persona card pictured below.

Introducing-Office-UI-Fabric-7

For more information on the Office UI Fabric framework, read the Office Blog or go to Github for code and documentation.