New Resource Site - Demos & Samples for Office UI Fabric

Discover my request for Angular directives for Office UI Fabric and the similarities I've observed with other design languages' directives.

A few weeks back I blogged about the release of the Office UI Fabric. By now I hope you’ve had some time to play around with it.

When it came out I immediately put in a feature request on the site for Angular directives the same way we have 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. As you can see from the resolution of that issue, as well as from a dialog in a public Yammer network with the project owner at Microsoft, I took it upon myself to spin up a community project…

wait… I’m getting ahead of myself…

But more on that in my next blog post… for now let’s focus on something else…

What Developers Need: Samples and Reference Demos

Before we create an Angular directive body of work, we first need something to base them on. How would we know what to measure success against? Sure, the Office UI Fabric has some docs, but we don’t have complete samples or a site where we can easily see how things work like you do with something like Bootstrap. Agreed?

So let’s get that going…


I’ve created a new site, and flushed out the Features section to meet what is in the v1.0.0 release of the Office UI Fabric. This includes pages for typography, icons, colors, localization, the responsive grid and animations… take a look for yourself!

Yes, the Office UI Fabric does have this in their repository however there’s not much interactivity. What you’ll see in the site is a way to test the animations and even see some plunks (live running code you can fork & tweak like this one for animations).

What’s Next? Where Do We Go From Here?

Components! All those cool buttons, tables, dropdown lists people pickers…. all the stuff we really want to get our hands on. You can see the list of things that are planned on the site’s issue list on GitHub.

Right now I’m the only one working on this project & I haven’t started on the components yet. I’m working on a template to follow so you can easily see the HTML, CSS and JavaScript needed to implement each control in an easy way. That’s coming soon-ish.

The #1 priority for this site is to have a page demonstrating, documenting and showing a working sample of each component that shipped in the Office UI Fabric… when we get there we’ll call it v1.0.0. You can track the milestone progress as we complete items on the issue list.

Take a minute to go check out the site and let me know what you think. The site is built using the fonts, colors & styles from the Office UI Fabric to eat our own dogfood!

Andrew Connell
Developer & Chief Course Artisan, Voitanos LLC. | Microsoft MVP
Written by Andrew Connell

Andrew Connell is a web & cloud developer with a focus on Microsoft Azure & Microsoft 365. He’s received Microsoft’s MVP award every year since 2005 and has helped thousands of developers through the various courses he’s authored & taught. Andrew’s the founder of Voitanos and is dedicated to helping you be the best Microsoft 365 web & cloud developer. He lives with his wife & two kids in Florida.

Share & Comment