Office UI Fabric


The front-end CSS framework for building experiences for Office and Office 365.

Developed by Organization:OfficeDev

Used languages: CSS(409.83 kB), JavaScript(60.31 kB), HTML(18.50 kB), TypeScript(14.63 kB)

Written Sass Less JS
Framework design metro
Feature type full

Current version


251.86 kB

Last release

Apr 16, 2019

Created at May 20, 2015

Last commit

Apr 5, 2019

Open Issues








Release Notes on April 16, 2019 for 10.0.0

This release updates Fabric to include a new set of styles that support the Fluent Design System.

What this release includes

The Fluent style updates include new colors, type styles, depths (shadows), and motion helpers. Here are details on some of the style updates:

  • Colors are updated to include neutrals that are warmer and more approachable. There are also new color palettes for different types of use cases, like Personas, Communication, and a shared set for common components like personas, sites, and more.
  • Typography has been updated to a new common type ramp that is or will be in use across core Microsoft apps, leveraging the latest type weights from Fluent.
  • Depth styles now include a common set of shadow levels from Fluent, which can be applied to context menus, dialogs, panels, and other surfaces.
  • Motion styles have been updated to match the latest Fluent styles.

Note: this release is also backwards-compatible with 9.x classes, meaning it does not remove any existing class names. We recognize that most Fabric Core users are likely using these classes, so we've retained them in .MDL2.scss files. We will monitor their usage to see if it makes sense to remove them in the future.

What this release does not include

We aren't including the new Office App Icons in this release (#1162). We're still working on some details to release these soon, but in the meantime, we want to get the base Fluent styles out the door.

What is Fluent?

Fluent is Microsoft's Design System, which includes the following principles:

  • Adaptive: Experiences feel natural on each device
  • Empathetic: Experiences are intuitive and powerful
  • Beautiful: Experiences are engaging and immersive

You can read more about these principles on the Fluent Design System website.

Breaking Changes

To cleanly support the new Fluent styles, the contents of some .scss files no longer include their MDL2 styles, e.g. _Animation.scss. Those have been moved to *.MDL2.scss files, e.g. _Animation.MDL2.scss. While this is not technically a breaking change if you're using Fabric.css, it will be breaking if you are using any of the MDL2 variables & mixins from the below files in 9.x.

9.x filename | 10.x filename --- | --- _Color.Variables.scss | _Color.Variables.MDL2.scss _Font.Variables.scss | _Font.Variables.MDL2.scss _Color.Mixins.scss | _Color.Mixins.MDL2.scss _Font.Mixins.scss | _Font.Mixins.MDL2.scss _Animation.scss | _Animation.MDL2.scss _Font.scss | _Font.MDL2.scss

If you are consuming these .scss files directly downstream, you may need to switch to the MDL2 variants to include those classes in your compiled SCSS. To use the MDL2 variables and mixins, consider importing dist/_References.scss, which imports all Fluent and MDL2 .scss files.

What else is new

  • #1144: Adds variable CDN path for icons and fonts (thanks @thornyweb!)


  • The MDL2 styles are deprecated in the 10.x releases, but for backwards-compatibility will not be removed until a future date.

In this page, you can compare and find Frontend framework for your development in the following categories. Best CSS frameworks to use 2017(based on current maintenance), skeleton framework to start the project immediately, grid support frameworks, material design framework, AngularJS 1 supported frontend framework, Angular 2 supported CSS framework, ReactJs supported frontend framework, metro design framework, etc...

Frameworks can compare based on filesize, currently maintained by contributors, documentation supports and etc...