Microsoft launches Office UI Fabric front-end framework for developers

Last updated:

Microsoft has announced the release of Office UI Fabric, a new front-end framework for developers. Office UI Fabric is a responsive, mobile-first, front-end framework designed to make it simple to quickly create web experiences using the Office Design Language.

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

Office UI Fabric is mainly built for Office Add-ons – however, if you’re a web developer, you can use the framework to build websites which include a similar design to Microsoft’s own design for its services.

According to Microsoft, Fabric is different than other frameworks like Bootstrap:

“Fabric solves many of the same problems that other front-end frameworks do, in a way that is specific to Microsoft. We have our own design language and interaction patterns that all Microsoft apps share.

Like other frameworks, Fabric speeds up development by ensuring that your add-ins use standard typography, colors, icons, and more. You don’t have to spend time overriding the styles of other frameworks. Fabric also includes components the other frameworks don’t have.”

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.

<html>
    <head>
        <meta charset=“utf-8”>
        <meta httpequiv=“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”>    <! Applicationspecific CSS >
        <link rel=“stylesheet” href=“/css/.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>

Office UI Fabric is Open Source and is avalable to developer on GitHub now.