explaingit

officedev/office-ui-fabric-core

Analysis updated 2026-07-03

3,745SCSSAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

Office UI Fabric Core is Microsoft's CSS framework providing the typography, color palettes, icons, grid system, and spacing rules you need to make any web app look like a Microsoft Office or Microsoft 365 product.

Mindmap

mindmap
  root((office-ui-fabric-core))
    What it provides
      Typography styles
      Color palettes
      Icons and fonts
      Responsive grid
    How to use
      CDN link
      npm or NuGet package
      CSS class names
    Customization
      SCSS variables
      Brand color override
      Office pattern compliance
    Companion project
      Fabric React components
      Buttons and dropdowns
      Separate repo
    Target users
      Office Add-in devs
      Microsoft 365 builders
      Web app designers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Style a web app or Office Add-in to visually match Microsoft Office 365 without designing the look from scratch

USE CASE 2

Apply Office typography, colors, and spacing to HTML elements using provided CSS class names

USE CASE 3

Use the responsive grid system to build layouts that adapt to different screen sizes in the Office design language

USE CASE 4

Customize the SCSS variables to adjust colors and styles to fit your own brand while following Office design patterns

What is it built with?

SCSSCSSnpmBowerNuGet

How does it compare?

officedev/office-ui-fabric-coreanomalyco/guidekeldos-li/typora-latex-theme
Stars3,7453,6835,804
LanguageSCSSSCSSSCSS
Setup difficultyeasymoderateeasy
Complexity2/53/51/5
Audiencedeveloperdeveloperwriter

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Fonts and icons are loaded from a Microsoft CDN and carry a separate asset license, review it before commercial Office Add-in submission.

Use freely for any purpose including commercial use as long as you keep the MIT copyright notice, the fonts and icons load from a CDN and carry a separate Microsoft asset license.

In plain English

Office UI Fabric Core is a CSS framework published by Microsoft for building web experiences that look and feel like Office and Microsoft 365 products. It provides the foundational visual styles that Microsoft uses across its productivity applications: typography, color palettes, icons, fonts, spacing rules, and a responsive grid system. If you are building a web app, an Office Add-in, or anything else that needs to match the look of Microsoft Office, this library gives you the base styles to do that without designing them yourself. You include the CSS in your project, apply the provided class names to your HTML elements, and your content takes on the Office design language. This repository covers only the core styles. There is a companion project called Office UI Fabric React that provides the actual interactive components (buttons, dropdowns, menus, etc.) built as React components. The two projects are separate: this one handles the visual foundation, the React project handles the components. The library is available through common package managers including npm, Bower, and NuGet, or it can be loaded directly from a CDN without installing anything. Microsoft also offers a customization path if you need to adjust the default styles to fit your own brand while still following the Office design patterns. The project is maintained by Microsoft's Office developer team and is licensed under the MIT license. The fonts and icons it references are loaded from a CDN and carry a separate asset license. The repository's issue tracker is used for bug reports and feature requests, and the project has a contribution guide for developers who want to submit changes.

Copy-paste prompts

Prompt 1
Show me how to load Office UI Fabric Core via CDN in an HTML page and apply the Office typography and color classes to a heading and a paragraph.
Prompt 2
I'm building an Office Add-in task pane. Walk me through using Office UI Fabric Core CSS classes to match the Office font, color palette, and button appearance.
Prompt 3
Show me the Office UI Fabric Core responsive grid classes and how to use them to create a two-column layout that collapses to one column on mobile.
Prompt 4
How do I customize Office UI Fabric Core SCSS variables to use my brand colors while keeping the Office spacing and typography structure intact?
Prompt 5
What is the difference between Office UI Fabric Core and Office UI Fabric React, and when should I use each one when building a Microsoft 365 app?

Frequently asked questions

What is office-ui-fabric-core?

Office UI Fabric Core is Microsoft's CSS framework providing the typography, color palettes, icons, grid system, and spacing rules you need to make any web app look like a Microsoft Office or Microsoft 365 product.

What language is office-ui-fabric-core written in?

Mainly SCSS. The stack also includes SCSS, CSS, npm.

What license does office-ui-fabric-core use?

Use freely for any purpose including commercial use as long as you keep the MIT copyright notice, the fonts and icons load from a CDN and carry a separate Microsoft asset license.

How hard is office-ui-fabric-core to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is office-ui-fabric-core for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub officedev on gitmyhub

Verify against the repo before relying on details.