officedev / office-ui-fabric-core

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

Office UI Fabric Core

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

Fabric is a responsive, mobile-first collection of styles and tools designed to make it quick and simple for you to create web experiences using the Office Design Language.

Latest version: 11.0.1

CONTENTS

• What's included
• Get started
• Learn more
• Contribute to Fabric
• Licenses
• Changelog

What's included

This repository contains the core styles used across all aspects of Fabric including icons, type, fonts, colors, the grid, etc. This is a separate project from Office UI Fabric React, which contains the React components.

Get started

For a quick start, reference the latest release of Fabric from a CDN or add a copy to your project. See get started on the Office UI Fabric site for full details on the most common ways to get started with the core along with a description of what's included.

If you'd like to get Fabric through a package manager such as Bower, npm, or NuGet, check out the package manager docs.

Want to customize Fabric for your project? See building Fabric to learn about the build process.

Learn more

New to Fabric? Start with the project's site to understand its purpose and explore the full set of styles and components from Office UI Fabric React.

When you're ready to create an Office Add-in with Fabric, take a look at the Use Office UI Fabric with Office Add-ins on MSDN article.

Contribute to Fabric

Bug reports, feature requests, and questions are posted on the issue tracker. For details on our contribution process and how we label issues, see our contributing page.

Licenses

All files in this GitHub repository are subject to the MIT license. This project also references fonts and icons from a CDN, which are subject to a separate asset license.

Changelog

We use GitHub Releases to manage our releases, including the changelog between every release. View a complete list of additions, fixes, and changes since 1.0 on the releases page.

Join the Microsoft 365 Developer Program

Join the Microsoft 365 Developer Program to get resources and information to help you build solutions for the Microsoft 365 platform, including recommendations tailored to your areas of interest.

You might also qualify for a free developer subscription that's renewable for 90 days and comes configured with sample data; for details, see the FAQ.

---

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

office-ui-fabric-core's Issues

Document how to open/close a dialog

I cannot seem to find those two javascript files ( Jquery.Dialog.js & Dialog.js ) that are required for the dialog to be available anywhere in the project

once the build is done, I believe they should exist in this directory

Suggestion: how to add the app launcher to our own o365 apps/sharepoint add ins?

I just noticed this sp user voice idea was implemented, however there is another one very related to this.
http://officespdev.uservoice.com/forums/224641-general/suggestions/6785967-please-create-a-my-app-launcher-chrome-control

Is this on the roadmap for this same UI Fabric?,

List Grid doesn't render correctly on screen widths between 480px and 1025px

On screen widths between 480px and 1025px items in a List Grid are not rendered properly due to limited space. Currently the only responsive state is below 480px width where items are rendered using 100% width in a single column. Other than that items are rendered in three columns which causes to poor UX on screen widths below 1050px and even worse below 800px.

From what I've seen the 100% width should be applied already below 850px so that a list item has sufficient space for actions and primary text. Between 850px and 1050px items in a grid could be displayed in two columns and above 1050px in three columns. These dimensions are excluding any paddings and margins that might be around a List Grid so you might want to include them in the media queries.

CommandBarItem does not show command text in mobile / narrow view

The CommandBarItem does not show commandText, either in UI or via Tooltip, when the page is narrow. There doesn't seem to be a way to force commandText to show, either (unless I missed that somewhere).

It'd be nice if i could specify (similarly to --iconOnly) that i only want to show commandText, or that i want to force commandText to show even if the screen format suggests otherwise.

Layout problem when using the image ListItem component with is-selectable class

Combining the image ListItem component with the is-selectable class leads to selection checkmark overlap with the image...

Mention that license is MIT in FAQ

I'm lazy and had to go click on the license, it would be nice if there was one line on this in the FAQ.

Vertical NavBar

Hi,

Is there sample for vertical NavBar? The one in the current demo shows only a horizontal layout. Option to switch it vertical or Horizontal would be great.

Segoe UI Regular EastEuropean, in 2015?

Why does a font named Segoe UI Regular EastEuropean exist in 2015? I thought we are all embracing Unicode out there…

Any idea of a modal/dialog widget?

Are you planning to add a new widget of modal or dialog, just like jquery dialog? It is needed sometimes. Will be appreciate when that possible.

Library needs Typescipt Definitions

Would make the widgets a lot more useful if they had some typescript definition files.

some navbar issues

1, the upload menü item ''fall out"
2, when the drop down is open, you can select the menü items behind the drop down
(IE, version: 11.0.10011.0)

Issue Tracker list missing labels mentioned in contributing doc

The contributing mentions labels used in the issues list for questions... but seems they are missing from the list... only thing present are the OOTB ones

Icons

It seems like there is a problem with displaying Icons in the Icons sample.

Some Samples Don't work

Some samples I tried (in dist/samples) reference JS code that does not exist. For example dist\samples\Components\Table\index.html has a reference to Jquery.Table.js, Table.js: both of which do not exist. Same for Breadcrumb sample. Those are the ones I tried, but maybe there are others.

Link to React components project

I started implementing the Office UI Fabric components in React a few days ago since we'll most likely be using those in future projects. The basic input components are mostly done and tested. The documentation is also being worked on but it's more of a demo/sample at the moment.

Anyway, in case somebody wants to contribute, feel free to drop me a message. There's still much left to do!

Input masks

Can you please add input masks for currency, date, time etc.?

Some icons are missing

Some icons are not shown in the sample page. For example ms-Icon--onedrive, ms-Icon--thumbDown, ms-Icon--thumbUp, ms-Icon--officeThreshold, ms-Icon--office365, ms-Icon--office365Preview, etc

Pagination styles

Can you please add pagination styles for tables?

People picker

How to get the ids of people picker selected items.

DatePicker wrong z-index when using 1 directly below another

When using 2 DatePicker directly above each other then the textField below comes through the DatePicker at the top when the DatePicker is open. Luckily there is an easy fix!

Fix: .ms-DatePicker-picker--focused.ms-DatePicker-picker--opened { position:relative; z-index:10; }

Add repo description

Broken styling for underlined & required TextField

Adding is-required and ms-TextField--underlined to the same TextField component breaks the styling

Markup for the screenshot:

<div class="ms-TextField ms-TextField--underlined">
  <label class="ms-Label">Name:</label>
  <input class="ms-TextField-field" type="text">
</div>

<div class="ms-TextField is-required ms-TextField--underlined">
  <label class="ms-Label">Name:</label>
  <input class="ms-TextField-field" type="text">
</div>

Add "Push and pull" documentation

"Push and pull" for the grid is mentioned here, but not documented. Some guidance on how to use would be helpful.

cross origin font requests failing

Fonts are unable to load from the cdn referenced in the dist fabric.css - https://appsforoffice.microsoft.com/fabric/fonts/

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
File: SegoeUI-Regular.eot

Incomplete Button implementation in src folder

The documentation list four different variants of buttons, while in the source or after build dist folder only one button can be found.

Content grouping (Accordion)

Is there any components (current or upcoming) for grouping content? something like Accordion panels etc. or some other intuitive controls for grouping content under some common entities.

Docs could be improved to be a bit clearer on necessary JS for some components

Within the repo & on the supporting MSDN article there is mention that there are some...

JS files are currently sample code that you will likely need to modify for your particular needs

To me that implies that the sample code is how you might want to use it, but some controls have JS that IMHO is absolutely required... for instance the search box & dropdown components require it.

For instance… the dropdown shows this sample code… but with just that and the CSS, it won’t work.
https://github.com/OfficeDev/Office-UI-Fabric/blob/master/src/components/Dropdown/Dropdown.html

You MUST reference this file as well:
https://github.com/OfficeDev/Office-UI-Fabric/blob/master/src/components/Dropdown/Jquery.Dropdown.js

And then in the file where you added the dropdown, you must attach it like you see in this sample:
https://github.com/OfficeDev/Office-UI-Fabric/blob/master/dist/samples/Components/Dropdown/index.html#L26

IMHO, this type of information on what's required for each components should really be in the doc for the component. Is this the type of info you're looking for community contribution for?

when one dropdown is opened close another

i think when you open one, then another should be closed.

Missing component javascripts.

It seems like each of your Samples (in dist/samples/components/) are all missing their associated .js files. For example, the ChoiceField component index.html (see here: https://github.com/OfficeDev/Office-UI-Fabric/blob/master/dist/samples/Components/ChoiceField/index.html#L15) calls a file named ChoiceField.js which doesn't exist. Same thing for all the other components I've looked at.

Small examples with screenshots

All great libraries have a few small examples and screenshots visible or accessible from somewhere near the top of the README, it would be great if this had some.

Dialog examples missing required CSS classes

The example HTML provided for the LgHeader and Multiline dialogs are missing their required CSS classes, "ms-Dialog--lgHeader" and "ms-Dialog--multiline" respectively.

Also, the class required to reveal the close button in the dialog, "ms-Dialog--close", is never shown in the examples.

Angular Directives for UI Fabric Components

Other design languages like Bootstrap & Google's Material Design, there are projects that have created Angular directives for these design languages: UI Bootstrap & Angular Material.

• Any thoughts to something like ng-office-ui-fabric? Maybe either as part of this project or, to follow what those other projects do, have a separate project & repo for it?
• Is this something (a) you're working on or (b) the community should run with?

DatePicker fails on navigating to previous month

Timer control

Can you please add timer control?

npm install error

Followed the getting started instructions, after running npm install received the following error.

npm ERR! [email protected] postinstall: 'node node_modules/bower/bin/bower install'
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'node node_modules/bower/bin/bower install'
npm ERR! This is most likely a problem with the Fabric package, not with npm itself.

Running win 8.1

Replace LESS with Sass

Searchable Dropdowns

Can you please add Dropdowns with search feature (like jQuery chosen)?

Fileupload with drag and drop

Can you please add component for drag and drop file upload control?

Using Office UI Fabric for web Applications

Hi,

Will you be able to confirm if the Office UI Fabric can be used for applications other than Office Add-In developments i.e. general web application development (using ASP.NET).

I see a specific clause in the Font license that it must be used for Add-In development only. Is Office UI Fabric ready public, general usage in license perspective?

Support bower install

I didn't see this mentioned anywhere, but it would be nice to support installing the framework via bower by name (e.g. bower install office-ui-fabric or as a dependency in bower.json).

request new icons

https://twitter.com/johnnliu/status/641814696111173632

I noted we have:
.ms-Icon--coffee
.ms-Icon--circleCoffee

But we don't have
.ms-Icon--pint
.ms-Icon--beer
.ms-Icon--tea

What would be the process to request new icons and get them in for the next major release? e.g. /v2/

(not an urgent task, just asking about the process)

Sortable tables

How to use sortable tables? Can you please add samples/documentation for it?

datepicker markup too complex

to show a datepicker to a user, there are too many lines markup code.
is that possible to generate these markups via javascript, just like jquery ui datepicker do:
// input type='date'
//
//$('input[type="date"]').datepicker({});
//
this seems more convenient to use......

CommandBar Search item doesn't work in mobile / narrow pages

The CommandBar component's Search item only seems to work on large displays with enough real estate to show the search item text box. When collapsed, the search item doesn't do anything.

CSS Capitalization Conventions

There seems to be quite a bit of seemingly random capitalization of CSS classes within the samples.

The pattern that seems to be present is something like:

• Prefix with ms-
• Components are PascalCase (DatePicker)
• Properties (ms-TextField-field), Constants (ms-fontColor-white), and Sub-Components (ms-Icon--chevronRight) are camelCase.

Should these be made all lower case to conform with other similar web libraries? Or is there some precedent within other Office code that may be more important to conform to?

Make AMD compliant

Would be nice to support require

unminify the DatePicker.js file in src

the current source file of jquery.DatePicker.js is minified.

Continuous Integration via Travis for Bower/NPM

Fabric should have CI in place for testing and deploying builds to Bower/NPM.

Command Bar Search Field Unable to Close

On smaller screens and browser sizes the command bar search field is unable to be closed if text is not entered into the field.

Font License Link is broken

I was trying to see what the rules/licensing for using Segoe UI were, and the link in line 28 of _Fabric.Typography.Fonts.less is broken:

https://appsforoffice.microsoft.com/fabric/Segoe UI and Fabric CDN License.txt