Office Fabric-UI (JS)

1 minute read

Microsoft is no longer maintaining this Framework. Use the Office Fluent-UI React or Bootstrap JavaScript Library Instead

The gd-sprest-js library contains JavaScript components designed for SharePoint 2013/Online, using the Office Fabric UI JavaScript Framework to create an Office 365 modern experience.

Getting Started

The library supports various ways of SharePoint development. The Office Fabric-UI css will need to be referenced, if it’s not already available on the page.

Fabric Element

To ensure the styling doesn’t conflict with other customizations, this library will require a “Fabric” element.

<div class="fabric">
  <!-- styling applied here -->

gd-sprest-js JavaScript References

The dist directory contains the js references:

Office Fabric-UI CSS References

The build directory contains the css references for importing. The Office Fabric-UI Core version used by the latest Office Fabric-UI JavaScript is 5.0.1. There is a github issue with a request to update it. Feel free to post a comment there to help keep that framework updated.

  • (349 KB) fabric.css - The Office Fabric-UI Core + Office Fabric-UI JavaScript Components + gd-sprest-js Components styling.
  • (294 KB) fabric.min.css - The minified version of the fabric.css file.
  • (155 KB) fabric.components.css - The Office Fabric-UI JavaScript Components + gd-sprest-js Components styling.
  • (122 KB) fabric.components.min.css - The minified version of the fabric.components.css file.

No Build Example

  • Step 1

Download the minified version of the library from above.

  • Step 2

Add a script editor webpart to the page, and set the content

<div id="tb" class="fabric"></tb>
<script type="text/javascript">
// Wait for the script to be loaded
SP.SOD.executeOrDelayUntilScriptLoaded(function() {
    // Render a text field
        el: document.querySelector("#tb")
}, "gd-sprest-js.js");

JavaScript Library References

// Import the library
var $REST = require("gd-sprest-js");

// Import the office fabric-ui core + fabric-ui js components styling

TypeScript Library References

// Import the components
import { Components, Fabric, WebParts } from "gd-sprest-js";

// Import the office fabric-ui js components styling
import "gd-sprest-js/build/lib/css/fabric.components.min.css";