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.
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.
This code represents the minimum recommended HTML structure for an add-in that uses Office UI Fabric.
<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 –>
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?