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).
The framework is used internally on products within Office 365—such as our suite branding, OneDrive.com, Outlook.com, Delve and the Video Portal.
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.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<!-- Application content goes here -->
<h1 class="ms-font-su">Why, hello, world.</h1> <!-- jQuery - Needed for Fabric Components JS -->
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.
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.
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.
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.
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:
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.
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