Announcing improved support in SharePoint Framework for Office UI Fabric Core

The goal of the SharePoint Framework is to allow both Microsoft and customers to build rich, engaging, and consistent user experiences on top of SharePoint. Within the SharePoint product, Office UI Fabric delivers a robust and consistent design language across various experiences such as modern team sites, modern pages, and modern lists. Office UI Fabric is also available for developers using the SharePoint Framework when building custom SharePoint solutions.  As new capabilities evolve in the SharePoint product – for example, new site theming options – Office UI Fabric evolves as well. Developers need a staged approach for how they integrate these changes over time into their SharePoint Framework projects.

Starting with the SharePoint Framework yeoman generator version 1.3.4, SharePoint Framework developers can now more robustly use Office UI Fabric Core styles within SharePoint Framework components – web parts and extensions.  A new package, @microsoft/sp-office-ui-fabric-core, contains a subset of Fabric Core styles supported in SharePoint. With this initial release, the following core styles are supported in the package:

• Typography
• Layouts
• Colors
• Themes
• Text Direction

Note that the following are not yet supported in the package:

• Animations
• Icons

This new package provides for a more focused and robust way for developers to incorporate Office UI Fabric components and includes new syntax recommendations for using Office UI Fabric Core.

With the updated generator, the default project templates will come with the new sp-office-ui-fabric-core package included and consume core styles from the package instead of using global CSS styles.

For more information on the Office UI Fabric Core integration, please refer to the following documentation: Office UI Fabric Integration in SharePoint Framework.

As always, we are listening for feedback and let us know if you have any issues or suggestions via the SharePoint Developer Tech Community.