Microsoft has recently released a new front-end framework for developers publicized as the Office UI Fabric. This mobile-first framework is highly responsive similar to the well-known Bootstrap framework. It is being designed to empower the developers to create easily web-based experiences with the use of the familiar Office Design Language.
Microsoft Office UI Fabric
Said Microsoft:
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.
Features
- Easy to apply CSS styles to your web applications.
- Availability of various reusable components such as layout, input, navigation and content (list item, table views and persona card).
- Easy to integrate into the web apps by simply adding some JavaScript + CSS file reference into your HTML file.
- Controls for SharePoint add-ins as well as various standalone websites that launch from the App Launcher.
- Detailed Persona Card – a control to bind the Persona card component in the Office UI Fabric.
Microsoft takes into account the Office Design Language and its interaction patterns for designing its apps. Using Fabric will enable the users to develop the add-ins based on its standard colors, icons, typography, and more. Hence, it avoids the style overriding for other frameworks. Additionally, it also includes many new components that are not yet supported by the other frameworks.
Office UI Fabric has already been used internally on various Office 365 products which include Delve, OneDrive.com, Outlook.com, and the Video Portal. It works with all the Office clients (Windows desktop, MAC desktop, web browser and iOS on iPad) that support Office Add-ins.
The Microsoft Office Team is currently working on various controls that include the Office 365 Web App Chrome Control and the File Picker control. These features are supposed to release in the future version of the Office UI Fabric.
The framework is currently available for the public on GitHub. Click here if you want to have hands-on the source code.
