Design Custom add-ins for Office with the new Microsoft Office UI Fabric
On Aug 31st, Microsoft announced the general availability of Office UI Fabric, it’s available as an open source project on GitHub. Office UI Fabric is a front-end framework for developers, that’s 
mobile-first and responsive. Office UI Fabric is designed to create web experiences using the Office Design Language. With Office UI Fabric you can get go from layout to finished product quickly. You are able to create new apps from scratch or improve and update on your current apps.
Office UI Fabric styling:
You are able to add CSS styles to your web applications with Office UI Fabric, typography, colors, icons, animations, responsive grid layouts and localization.
Reusable components:
- Input
- Layout
- Navigation
- Content
Office UI Fabric’s framework is used internally on products within Office 365, like OneDrive.com, Outlook.com, Delve and Video Portal. As well, Office UI Fabric’s framework has been shared with Microsoft partners in their Preview Program. You will begin to see add-ins available in the Office Store that will be updated to use Office UI Fabric. This will potentially increase your consistent use of add-ins that in turn will increase your day-to-day productivity.
You can easily integrate Office UI Fabric into a Microsoft web application, all you need to do is add JavaScript into the web append reference the CSS file form the CDN in your HTML file.
This code 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>
This code will work across Office Clients where Office add-ins are supported, currently the Windows desktop, web browser, Mac desktop and iOS on iPad are supported.
Office UI Fabric can be integrated with SharePoint add-ins and will optimized for SharePoint in the future.
Is CGNET using Office UI Fabric?
We eventually want to make a SharePoint add-in that will let us post our SharePoint blog posts directly to our personal and business social media accounts.
What kind of SharePoint or Office add-ins are your organization looking to make?
0 Comments