Registry / web-framework / office-ui-fabric-core

office-ui-fabric-core

library11.1.0jsnpmunverified

This package, `office-ui-fabric-core`, provides the foundational CSS styles, typography, icons, and grid system for implementing the Microsoft Office Design Language, now largely aligned with the Fluent Design System. It is the front-end framework for building user experiences for Office and Office 365, distinct from the React-based component library `office-ui-fabric-react`. The current stable version is 11.1.0, with minor releases and bug fixes occurring every few months. Its key differentiators include providing pre-built styles that ensure visual consistency with Microsoft's product suite and offering a mobile-first, responsive design approach. It is primarily consumed as a CSS stylesheet, either via CDN or package managers like npm, rather than through JavaScript module imports.

web-framework

npm install office-ui-fabric-core

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · OFFICE-UI-FABRIC-C

office-ui-fabric-core

web-frameworkjavascriptv11.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

CSS via CDN

✓ <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.1.0/css/fabric.min.css" />

This is the quickest way to include Fabric Core styles in an HTML file without a build process.

CSS via Bundler

✓ import 'office-ui-fabric-core/dist/css/fabric.min.css';

✗ const fabricStyles = require('office-ui-fabric-core/dist/css/fabric.min.css');

For JavaScript projects using a bundler like Webpack or Rollup, import the minified CSS file directly. Requires appropriate CSS loaders.

SCSS Mixins/Variables

✓ @import '~office-ui-fabric-core/dist/sass/fabric';

For SASS/SCSS projects, you can import the core SASS files to utilize mixins and variables, assuming your build process is configured to resolve `~` to `node_modules`.

Demonstrates including Office UI Fabric Core via CDN and applying basic typography, grid, color, and icon classes.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fabric Core Quickstart</title>  <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.1.0/css/fabric.min.css" /> <style> body { padding: 20px; } .ms-Grid { margin-top: 20px; } </style> </head> <body> <h1 class="ms-font-su ms-fontColor-themePrimary">Hello, Fabric Core!</h1> <p class="ms-font-l">This is a simple paragraph styled with Fabric Core typography.</p> <div class="ms-Grid"> <div class="ms-Grid-row"> <div class="ms-Grid-col ms-sm6 ms-md4 ms-lg3"> <div class="ms-bgColor-themeLight ms-fontColor-neutralDark ms-p-10">Column 1</div> </div> <div class="ms-Grid-col ms-sm6 ms-md4 ms-lg3"> <div class="ms-bgColor-themePrimary ms-fontColor-white ms-p-10">Column 2</div> </div> <div class="ms-Grid-col ms-sm6 ms-md4 ms-lg3"> <div class="ms-bgColor-neutralLight ms-fontColor-neutralDark ms-p-10">Column 3</div> </div> </div> </div> <i class="ms-Icon ms-Icon--Accept ms-font-xxl ms-fontColor-greenDark" aria-hidden="true"></i> <span class="ms-font-xl">Accept Icon</span> </body> </html>

Debug

Known issues

breakingVersion 11.0.0 removed 4 icons from the icon font set to align with Fabric React's icon updates. If you were using these specific icons, they will no longer render.

fix

Review your usage of Fabric icons and replace any removed icons with available alternatives from the updated icon set, or provide custom SVG assets. Consult the Fabric documentation for the current list of available icons.

affects: >=11.0.0

breakingVersion 10.0.0 introduced significant updates to styles, including new colors, type styles, depths (shadows), and motion helpers, aligning with the Fluent Design System. This can lead to visual changes or inconsistencies in existing applications.

fix

Thoroughly test your application's UI after upgrading to ensure visual consistency. Update custom styles that might conflict with the new Fluent defaults. Refer to the official Fluent Design System documentation and Fabric Core changelog for detailed style guidelines.

affects: >=10.0.0

gotchaOffice UI Fabric Core is a standalone CSS framework and is distinct from Office UI Fabric React (`@uifabric/react` or `@fluentui/react`). They are separate projects with different consumption models and goals.

fix

Ensure you are referencing the correct documentation and installation instructions for Fabric Core if you only need the CSS styles, and Fabric React if you need React components. Do not mix and match CDN links for Core with `@fluentui/react` component usage unless specifically documented.

affects: >=1.0.0

gotchaWhile the code in this repository is MIT licensed, the fonts and icons referenced via CDN are subject to a separate asset license. Developers must review and adhere to this separate license.

fix

Review the asset license at `https://static2.sharepointonline.com/files/fabric/assets/license.txt` to understand the usage terms and restrictions for fonts and icons provided through Microsoft's CDN.

affects: >=1.0.0

gotchaIn version 9.3.0, animation and transition classes experienced a bug due to incorrect media query usage, causing them to not work on many browsers. This issue was fixed in version 9.3.1.

fix

If your application relies on Fabric Core's animation or transition utility classes, ensure you are using version 9.3.1 or higher to guarantee correct functionality across various browsers.

affects: 9.3.0

Errors

Common errors & fixes

Icon 'your-removed-icon-name' is not displaying.

The specific icon used was removed from the icon font set in Fabric Core v11.0.0.

fix

Consult the updated Fabric Core icon documentation or the changelog for version 11.0.0 to identify removed icons. Replace the missing icon with an available alternative or provide a custom SVG icon.

Styling inconsistencies or unexpected visual changes after upgrading Fabric Core.

Major style updates were introduced in version 10.0.0 to align with the Fluent Design System, altering default colors, typography, depths, and motion.

fix

Review your application's custom CSS for overrides or assumptions based on older Fabric Core styles. Update your styles to be compatible with the new Fluent Design System guidelines and re-evaluate visual regressions.

Webpack or other bundler fails to resolve 'office-ui-fabric-core/dist/css/fabric.min.css'.

Your bundler is not configured to correctly handle CSS imports from `node_modules` or is missing the necessary loaders.

fix

Ensure your bundler (e.g., Webpack, Rollup) has appropriate loaders (e.g., `css-loader`, `style-loader`) configured to process CSS files from `node_modules`. Verify the import path is correct and points to the `dist` directory.

Upgrade

Version history

11.1.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

25 hits · last 30 days

node

Bingbot

Resources

githubhttps://github.com/OfficeDev/Office-UI-Fabric-Core ↗

packagehttps://www.npmjs.com/package/office-ui-fabric-core ↗

homepagehttps://developer.microsoft.com/en-us/fluentui ↗