Microsoft launches Office UI Fabric front-end framework for developers

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.

Rapid Mobile

Rapid Mobile uses cookies, tokens, and other third party scripts to recognise visitors of our sites and services, remember your settings and privacy choices, and - depending on your settings and privacy choices - enable us and some key partners to collect information about you so that we can improve our services and deliver relevant ads.

 

By continuing to use our site or clicking I Accept, you agree that Rapid Mobile and our key partners may collect data and use cookies for personalised ads and other purposes, as described more fully in our privacy policy.

 

You can change your settings at any time by clicking Manage Settings or by visiting our Privacy Centre for more detailed information.

 

Privacy Settings saved!
Cookie Services

When you visit any website, it may store or retrieve information on your browser, mostly in the form of cookies.Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

These cookies allow us to count visits and traffic sources, so we can measure and improve the performance of our site.

We track anonymized user information to improve our website.
  • _ga
  • _gid
  • _gat

Decline all Services
Accept all Services