{"library":"office-ui-fabric-core","title":"Office UI Fabric Core","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install office-ui-fabric-core"],"cli":null},"imports":["<link rel=\"stylesheet\" href=\"https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.1.0/css/fabric.min.css\" />","import 'office-ui-fabric-core/dist/css/fabric.min.css';","@import '~office-ui-fabric-core/dist/sass/fabric';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Fabric Core Quickstart</title>\n  <!-- Reference Fabric Core via CDN -->\n  <link rel=\"stylesheet\" href=\"https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.1.0/css/fabric.min.css\" />\n  <style>\n    body { padding: 20px; }\n    .ms-Grid { margin-top: 20px; }\n  </style>\n</head>\n<body>\n  <h1 class=\"ms-font-su ms-fontColor-themePrimary\">Hello, Fabric Core!</h1>\n  <p class=\"ms-font-l\">This is a simple paragraph styled with Fabric Core typography.</p>\n\n  <div class=\"ms-Grid\">\n    <div class=\"ms-Grid-row\">\n      <div class=\"ms-Grid-col ms-sm6 ms-md4 ms-lg3\">\n        <div class=\"ms-bgColor-themeLight ms-fontColor-neutralDark ms-p-10\">Column 1</div>\n      </div>\n      <div class=\"ms-Grid-col ms-sm6 ms-md4 ms-lg3\">\n        <div class=\"ms-bgColor-themePrimary ms-fontColor-white ms-p-10\">Column 2</div>\n      </div>\n      <div class=\"ms-Grid-col ms-sm6 ms-md4 ms-lg3\">\n        <div class=\"ms-bgColor-neutralLight ms-fontColor-neutralDark ms-p-10\">Column 3</div>\n      </div>\n    </div>\n  </div>\n\n  <i class=\"ms-Icon ms-Icon--Accept ms-font-xxl ms-fontColor-greenDark\" aria-hidden=\"true\"></i>\n  <span class=\"ms-font-xl\">Accept Icon</span>\n</body>\n</html>","lang":"html","description":"Demonstrates including Office UI Fabric Core via CDN and applying basic typography, grid, color, and icon classes.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}