Office Fabric-UI (JS)

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.

Bootstrap Library Replacement

There have been user voices related to the Office Fabric-UI JavaScript framework, and newer ones that target web components. At this point, it’s safe to say that Microsoft is definitely not going to update the Office Fabric-UI JavaScript framework. I will continue to support any issues reported for this library, but do not plan to add new features.

My recommendation is to use the gd-sprest-bs library, which extends the Bootstrap Framework.

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 -->
</div>

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
    $REST.JS.Fabric.TextField({
        el: document.querySelector("#tb")
    });
}, "gd-sprest-js.js");
</script>

JavaScript Library References

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

// Import the office fabric-ui core + fabric-ui js components styling
require("gd-sprest-js/build/lib/css/fabric.min.css");

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";