Skip to main content
Microsoft 365
Subscribe
3 min read

Introducing Office UI Fabric—your key to designing add-ins for Office

By

Today we are announcing the general availability of Office UI Fabric on GitHub. Office UI Fabric is a responsive, mobile-first, front-end framework for developers, designed to make it simple to quickly create web experiences using the Office Design Language. It’s simple and familiar to get up and running with Office UI Fabric—whether you’re creating a new app from scratch or adding new features to an existing one.

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.

Along with styling, there are reusable components such as input, layout, navigation and content (persona card, list item and table views).

Introducing Office UI Fabric 2

The framework is used internally on products within Office 365—such as our suite branding, OneDrive.com, Outlook.com, Delve and the Video Portal.

Introducing Office UI Fabric 3

Not only has the framework been tested with internal engineering teams on production products, it was also shared with our partners in our Preview Program. You will start to see the add-ins in the Office Store updated to use Office UI Fabric, which will increase the consistency of add-ins you use to increase your productivity day-to-day.

It is very straight forward to integrate Office UI Fabric into a web application. Simply add some JavaScript into your web application and reference the CSS file from the CDN in your HTML file. The following starter template represents the minimum recommended HTML structure for an add-in that uses Office UI Fabric.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Application Name</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Fabric core -->
        <link rel="stylesheet" href="css/fabric.min.css">
        <link rel="stylesheet" href="css/fabric.components.min.css">    <!-- Application-specific CSS -->
        <link rel="stylesheet" href="/css/[your application].css">
    </head>
    <body>
        <!-- Application content goes here -->
        <h1 class="ms-font-su">Why, hello, world.</h1>    <!-- jQuery - Needed for Fabric Components JS -->
        <script type="text/javascript" src="js/jquery.js"></script>
    </body>
</html>

It is designed to work across Office Clients where Office add-ins are supported. Right now that is the Windows desktop, web browser, Mac desktop and iOS on iPad. The images below illustrate the use of typography, the font icons (search icon), the search box styling, the pivot navigation, the drop-down styling and the list item component on various platforms.

Introducing Office UI Fabric 4a - cropped2 Introducing Office UI Fabric 4b - cropped Introducing Office UI Fabric 4c - cropped2
Windows desktop Browser iPad

Office UI Fabric can be used with SharePoint add-ins and standalone websites launched from the App Launcher. One thing to note is that it hasn’t been optimized for these scenarios just yet. This is something that the team is working on for future releases.

Documentation

The documentation is written as part of the GitHub repo in sync with the releases. This is a new initiative for engineering, and the results so far have really shown the value in this collaborative approach between our internal teams (program managers, developers and technical writers) and our external communities. There are great visuals in the documentation that help developers understand what is available in Office UI Fabric.

Introducing Office UI Fabric 5

In addition to the Office UI Fabric documentation in the GitHub repository, there are new Office add-in UX Design Guidelines that discuss at a higher level considerations when designing your add-ins.

Controls

We have also been busy shipping our first controls that leverage the Office UI Fabric. These controls can be used in Office add-ins, SharePoint add-ins and standalone websites with a few lines of code.

Below is a screenshot showing the People Picker Control using the styling elements of Office UI Fabric:

Introducing Office UI Fabric 6

Another widely used control is the Detailed Persona Card, which takes the Persona Card component in Office UI Fabric and makes it a bindable control that can be used in a few lines of code.

Introducing Office UI Fabric 7

There are more controls in the pipeline, including the Office 365 Web App Chrome Control for use with standalone web applications launched from the App Launcher and a File Picker control for use with OneDrive for Business and SharePoint files in the user interface. For more information on these controls please check out the Office 365 JavaScript Controls documentation.

So what are you waiting for? Head over to github.com/OfficeDev/Office-UI-Fabric and get started!

—Jeremy Thake, technical product manager for the Office 365 team

Related Posts