Office UI Fabric | Hacker News Reader

Office UI Fabric

github.com

233 pointsBobNisco67 comments

> Does not support IE8. [0]

Thank you MS, this is well-needed ammo.

[0] https://github.com/OfficeDev/Office-UI-Fabric/blob/master/gh...

But supports old Safari on Windows and no Firefox on Android?

Safari on Windows isn't terribly surprising since it's probably based on a set of core features they need and there's a long list of things which are in old Safari but not IE8:

http://caniuse.com/#compare=ie+8,safari+5.1

Firefox on Android seems like it might just be something which they don't see enough demand for to make it an officially supported browser. It'd be interesting to see whether it actually works on office365.com.

See the table on this page [1].

The Office365 team is pretty aggressive about dropping support for IE8 and—beginning next year—IE9.

[1] https://support.office.com/en-US/article/Office-365-system-r...

A lot of Microsoft product is leaving aside these old browser. For example, Visual Studio Online is supporting 11 and Edge only (with all other browser like Chrome and Firefox, etc).

Seems their policy is to support the latest or two latest versions of any major browser. Given that IE11 is said version, supporting a version from 3 releases ago (4, if you count Edge) would be pretty strange. Specially since IE releases actually come in a much longer schedule than Chrome or Firefox releases.

For those looking for examples of what it looks like:

https://github.com/OfficeDev/Office-UI-Fabric/blob/master/gh... https://github.com/OfficeDev/Office-UI-Fabric/blob/master/gh...

Hmm... Not quite the example I was hoping for. There are some cool looking components in there, so naturally I wanted to dig in to the source and see how complex the markup needs to be to pull that off.

Turns out it's actually pretty simple. Just include this IMG tag:

https://camo.githubusercontent.com/6f327f2c8f7c225358d52bec9...

The key part:

Fabric solves many of the same problems that other front-end frameworks do, in a way that is specific to Microsoft. We have our own design language and interaction patterns that all Microsoft apps share.

This is specifically designed for people to make add-ons to Office 365 that look like they belong as part of the software. While I don't doubt you could use it standalone, I don't see MS advocating that you do.

I don't agree, it seems to be a subtle attempt to spread the Office brand by means of trying to make it's styling more prevalent. The first line of the release seems to point at using the UI outside of Office as well as with add ons:

Office UI Fabric is a responsive, mobile-first, front-end framework for developers, designed to make it simple to quickly create web experiences using the Office Design Language.

Well, this is the best kind of promotion: we get quality stuff for free, they get free exposure and also seem hip, unlike Microsoft circa 2010.

Yeah I didn't mean it as a dig when I mentioned the spreading of the Office brand. I will finally be able to build an app that doesn't linger in default Bootstrap styling forever :)

Serving a very similar role to Salesforce's Lightning Design System: http://www.lightningdesignsystem.com/. Build your extension in the native UI, but go ahead and use it anywhere if you want.

How legal is it? Ok it's MIT license, but if I use a UI design, do I infringe on Microsoft's imtellectual property? Is UI design copyrightable? I have the same question for another UI framework, which by default comes with the creator's design guidelines: Is it enough to change the color of the header to avoid brand confusion and be safe from infringement?

From what I can gather, UI design patents actually exist. However Apple won against Samsung but lost a case against Microsoft, which demonstrates that it's still important to patent UI functionnality (such as the bounced scroll) in addition to the graphical elements. http://patents.stackexchange.com/questions/4020/protecting-a...

Any further answer is welcome.

IANAL, but in some jurisdictions, there's something called promissory estoppel - essentially, if you promise something that is expect to lead people to act in a certain way, you can't then sue them later for doing so. Microsoft themselves have successfully used that defense against Motorola Mobility (though that case was relative to the price of the licenses, not whether they could use it at all).

This is a styling framework. No patentable concepts. The code itself might fall under copyright law (which is MIT license), but not the visuals. If anything would apply there, it is probably more like trademark law, but this seems far afoot.

Looks good and seems well built.

However - like Bootstrap - it has this kind of mark-up that I'm starting to strongly dislike:

   <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg10">Second</div>

I get that this - like Bootstrap - is nice to get a quick start and start deploying but, as thing grows, it gets harder and harder to maintain.

I'm not all for a semantics panacea but this is hard to read and, I imagine, harder for the browser to parse. Nowadays, I'd rather be very dumb with CSS (just one class) and let SASS handle the complexity.

In this case, I'd create a class with an adequate and meaningful name and, in SASS, do the composition they're doing in the class attribute - @extend the needed column definitions per media-query. I like the idea of having the class/style composition duty done at SASS compile time and not by the browser at runtime.

These become much more usable when you use something like sass.

You have a class name that makes sense and import the boostrappy styles into it.

Erm, you are simply misinformed. I use Bootstrap and I never use any presentational classes, these are just provided for convenience (although a huge amount of people abuse them).

Bootstrap provides LESS mixins like .make-row(), .make-*column() etc. to keep your CSS semantic.

I am not misinformed regarding Bootstrap; unfortunately I have extensive experience with it. :) Anyway, I should have remarked the fact that mixins do exist and semantic class names are totally possible with Bootstrap.

I was just pointing out the kind of mark-up which appears in the example I quoted and, typically, in Bootstrap-powered stuff. It's not a problem with the framework, of course, but - as you said - people abuse the pre-made classes. Regarding Bootstrap in particular, I think most people just import the compiled stylesheet (so, no mixins & other assorted goodies).

What I don't understand is why they felt the need to come up with their own implementation of Bootstrap? Don't get me wrong, I agree that it looks well thought out but why not just use Bootstrap for layout rather than reinventing the wheel? (Apologies if this is a stupid question.)

This looks like it could benefit from a parent site explaining/showcasing all the features. What I could see so far looks like a big step up for many LOB applications.

Especially for a ui library.

Agreed. At first I thought it was some kind of UI/scripting add-on for Office extensions, it took a re-read to realize it was more akin to Bootstrap and Foundation.

It's there now, you just need to install a local copy.

Agree -- for a CSS framework, this repo is strangely heavy on text, and not on demos.

There are examples though:

https://github.com/OfficeDev/Office-UI-Fabric/blob/master/gh...

Naming hell again by Microsoft.

Why fabric?

Windows Server AppFabric https://msdn.microsoft.com/en-us/library/Ff384253(v=Azure.10...

Azure has App fabric and fabric controller.

Maybe because they didn't want to use "framework".

I've mentally added "fabric" to my list of buzzwords.

And http://fabricjs.com is a separate JS framework for doing layout on an HTML5 Canvas.

Maybe a play on Google's "Material Design" ?

Built with LESS...

What's the current state of SASS vs. LESS? It seems like a lot more CSS frameworks are using SASS and it has more plugins, tools, mixins, etc. But I haven't kept tabs on it in a while.

For a long time, Bootstrap was the flagship Less project, but they've recently switched to Sass. Some of the increasing momentum in Sass is probably due to libsass, a C-based Sass compiler that can be used without depending on Ruby. (And is also much faster.)

Just FYI: Neither Sass nor Less should be written in all-caps. See the respective websites.

libsass is - understandably - a few versions behind the Ruby implementation. Most of the project teams I've been on working with Sass have opted for the Ruby implementation as a consequence.

The ruby version is on feature freeze until libsass catches up.

citation now I'm on desktop:

> In fact, Ruby Sass will not release any new features until LibSass catches up. Once it does, there will be feature parity between the two moving forward. Soon, we’ll have the blazing speed of LibSass with all the features of Ruby Sass!

http://sassbreak.com/ruby-sass-libsass-differences/

It's worth noting that libsass's source map support is still ironing out bugs (i.e. https://github.com/sass/libsass/pull/1463), though it seems that the compilation itself is relatively solid. My team finds that the time saved in compilation for a Flask app is worth source maps sometimes not working. Your mileage may vary, though.

Usually it doesn't matter what it's written in, because unless a company wants their site to look like a template, everything will be overwritten. And the value of the base idioms will still be retained for the dev team.

Since this looks like it's to help create a consistent look & feel for Office UI, I'm not sure why they chose LESS. :) Most likely that's what they were familiar with, and maybe they wanted to keep dependencies low. But there's always Stylus [1], and it's at least as powerful as SASS. Plus it has better macro integration, which is very convenient when you forget to call @mixin.

    Sytlus "border-radius: 5px;" vs SASS "@include border-radius(5px);"

The main reason LESS isn't desirable is it's very restricting & has no lexical scoping, which makes writing plugins such as spriting very awkward to write.

[1] https://learnboost.github.io/stylus/

I'm guessing that the whole point of this framework is that you can build internally-used webapps that feel like Office. So in that case, you would absolutely want your code to 'look like a template'.

Looks like there's a more discussion of Sass on Stackoverflow than Less - http://www.arepeopletalkingaboutit.com/tags/less,sass

For what it's worth, Bootstrap 4 is switching from Less to Sass - http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/

Neither, the cool kids are using Radium https://github.com/FormidableLabs/radium :-J

I posted earlier in this thread that this looks like the first time you can use Segoe UI legally in a web app: that's wrong. Fabric CSS doesn't actually include the webfonts.

https://github.com/OfficeDev/Office-UI-Fabric/blob/master/gh...

Seems to be licensed on a "per core" basis from Monotype.

Perhaps I'm missing something, but that makes no practical sense to me. Typography.com's model of per site licensing is much more understandable.

Why is there no demo website? No front-end framework should be without a component (listing each component) and a demo section. This is shoddily done compared to Google's material lite.

The fourth and fifth results on Google for "fabric" are:

    Fabric - Twitter's Mobile Development Platform

    https://get.fabric.io/

    With Fabric, you'll never have to worry about
    tedious configurations or juggling different
    accounts. We let you get right into coding and
    building the next big app.

    Welcome to Fabric! — Fabric documentation

    www.fabfile.org/

    Fabric is a Python (2.5-2.7) library and
    command-line tool for streamlining the use
    of SSH for application deployment or
    systems administration tasks. It provides ...

I thought I heard that name before...

To be fair, they call it "Office UI Fabric" almost everywhere.

A development platform and command line tool are not going to be mistaken for a UI Library. Different domains - so naming conflicts is not a problem.

Now if Fabric (FabFile) and Fabric (Twitter) were both UI Libraries like Fabric (Office), there might be an issue there.

There's also http://fabricjs.com, a HTML5 Canvas library

> The fourth and fifth SERPs on Google for "fabric" are

A nitpick, perhaps, but SERP is "search engine results page" [0] -- a page of results from a search engine. Those are the fourth and fifth results -- all on the first SERP -- not the fourth and fifth SERP.

[0] see, e.g., https://en.wikipedia.org/wiki/Search_engine_results_page

doh, thanks for the correction!

This would definitely benefit from having a link to a demo or at least to a webpage implementing the compontents rather than asking users to download and then go through a process to try out samples to view them.

On the positive side, it's good to see no support for IE8.

If you go to the "Features" link there is a screenshot of every component.

Any demo link?

https://github.com/OfficeDev/Office-UI-Fabric/blob/master/gh...

I don't do much front-end work, so maybe I'm just missing something, but are all of these frameworks really that much different? If this just for people who haven't learned one of the other frameworks or is there a compelling reason to switch?

I think all the front-end frameworks are pretty similar, but if you are building Office add-ins, or some other application that lives in that ecosystem, then there is value in adhering to consistent UI elements.

I think there may be additional insights on their announcement post: https://blogs.office.com/2015/08/31/introducing-office-ui-fa...

I think this is similar to the framework galore on the backend, many of them trying to do similar things in slightly different ways. The other thing that has caused explosion in front end frameworks is Github + NPM.

So this is M$'s response to Bootstrap which implements M$'s response to Material Design? Not bad! also RTL font support is nice.

Do you really need to use the dollar sign? That looks so childish.

Without the dollar sign the potential for error is obviously far greater, for instance somebody might have thought he was referring to Martin Scorsese.

Or Multiple Sclerosis.

Even though you're a troll, I will point out that the Metro design language was released before Material Design, so it can't be a response.

Thank you for that factoid. I actually forgot about this. :)

I'm having a little trouble figuring out exactly what this does, but while I do... I'm recalling the wonderful history Microsoft has with web dev -- Frontpage, IE 5.5, IE 6...

How is IE 5.5 "web dev"? That's like calling CPU design "embedded software development".

Don't talk smack about IE 5.5, unless you think AJAX was a bad idea.

On the other hand, Google dropped AtScript in Angular 2.0 in favor of TypeScript.

As to what it does, it feels similar to Google's Material Design Lite, in that it's a toolkit to target design idioms being pushed by a software company.

Reply on news.ycombinator.com