# officedev/office-ui-fabric-core

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/officedev-office-ui-fabric-core).**

_How this analysis was created: the description and tags below were written by an AI model that read this project's README and public documentation pages; stars, license and language come straight from the GitHub API. The model does not read the source code._

3,744 stars · 459 forks · SCSS · NOASSERTION · archived

## Links

- GitHub: https://github.com/OfficeDev/office-ui-fabric-core
- Homepage: https://developer.microsoft.com/en-us/fabric
- awesome-repositories: https://awesome-repositories.com/repository/officedev-office-ui-fabric-core.md

## Description

This is a CSS UI framework and design system implementation used to build user interfaces that match the visual design of Office and Microsoft 365. It provides a standardized set of typography, color palettes, and grid layouts to ensure a consistent visual appearance across web applications.

The framework is designed for enterprise design system implementation, specifically for Microsoft 365 UI development and the styling of Office add-ins. It includes a dedicated iconography library of standardized icons to represent common actions and objects.

The system utilizes a token-driven design approach with Sass-based style compilation and BEM-based class naming. It covers layout management through atomic utility classes and responsive adjustments via conditional media querying, while allowing for dynamic theme injection through variables.

## Tags

### Web Development

- [Microsoft 365 UI Development](https://awesome-repositories.com/f/web-development/microsoft-365-ui-development.md) — Provides the framework necessary to build web interfaces that match official Microsoft 365 services.
- [CSS Media Queries](https://awesome-repositories.com/f/web-development/responsive-layout-adaptation/css-media-queries.md) — Uses CSS media queries to apply responsive layout adjustments based on viewport size.
- [BEM-Based Naming](https://awesome-repositories.com/f/web-development/syntax-conventions/bem-based-naming.md) — Implements the Block Element Modifier (BEM) naming convention to prevent selector collisions in large-scale stylesheets.

### Business & Productivity Software

- [Visual Styling](https://awesome-repositories.com/f/business-productivity-software/office-plugins/visual-styling.md) — Enables custom user interfaces for Office plugins to blend seamlessly with the native host application environment.

### User Interface & Experience

- [CSS Frameworks](https://awesome-repositories.com/f/user-interface-experience/css-frameworks.md) — Provides a comprehensive collection of pre-styled interface elements and layout patterns matching Office and Microsoft 365.
- [Design System Implementations](https://awesome-repositories.com/f/user-interface-experience/design-system-implementations.md) — Implements a design system with standardized typography, color palettes, and grid layouts for consistent visual appearance.
- [Design Token Systems](https://awesome-repositories.com/f/user-interface-experience/design-token-systems.md) — Implements a token-driven design system that maps visual specifications to central variables for unified updates.
- [Enterprise Design Standardization](https://awesome-repositories.com/f/user-interface-experience/enterprise-design-standardization.md) — Ensures a professional and unified look across large-scale business applications through enterprise design standardization.
- [Visual Style Application](https://awesome-repositories.com/f/user-interface-experience/visual-style-application.md) — Provides standardized typography, colors, and grid layouts to maintain a consistent look across user interfaces. ([source](https://cdn.jsdelivr.net/gh/officedev/office-ui-fabric-core@master/README.md))
- [CSS Utility Classes](https://awesome-repositories.com/f/user-interface-experience/css-utility-classes.md) — Provides a set of single-purpose CSS classes for managing spacing, alignment, and layout.
- [Icon Ecosystem Integrations](https://awesome-repositories.com/f/user-interface-experience/icon-ecosystem-integrations.md) — Integrates a standardized iconography library into the interface to represent common actions and objects. ([source](https://cdn.jsdelivr.net/gh/officedev/office-ui-fabric-core@master/README.md))
- [Iconography Libraries](https://awesome-repositories.com/f/user-interface-experience/iconography-libraries.md) — Ships a standardized collection of visual symbols to maintain a uniform interface experience.
- [Interface Iconography](https://awesome-repositories.com/f/user-interface-experience/interface-iconography.md) — Provides a consistent library of interface icons to help users recognize common actions and objects.
- [Theme Token Injections](https://awesome-repositories.com/f/user-interface-experience/styled-properties/css-custom-property-bindings/theme-token-injections.md) — Injects dynamic brand colors and typography settings into the global style sheet using CSS custom properties.

### Development Tools & Productivity

- [Sass Compilers](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/template-compilation-tools/template-compilation-tools/sass-compilers.md) — Utilizes Sass compilation to process nested stylesheets and mixins into static CSS.