
Office UI Fabric - BobNisco
https://github.com/OfficeDev/Office-UI-Fabric
======
mbesto
> Does not support IE8. [0]

Thank you MS, this is well-needed ammo.

[0] [https://github.com/OfficeDev/Office-UI-
Fabric/blob/master/gh...](https://github.com/OfficeDev/Office-UI-
Fabric/blob/master/ghdocs/GETTINGSTARTED.md#supported-browsers)

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

~~~
acdha
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](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.

------
jbrantly
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/ghdocs/FEATURES.md) [https://github.com/OfficeDev/Office-
UI-Fabric/blob/master/gh...](https://github.com/OfficeDev/Office-UI-
Fabric/blob/master/ghdocs/COMPONENTS.md)

~~~
jasonkester
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...](https://camo.githubusercontent.com/6f327f2c8f7c225358d52bec9155dd5d50cfaa08/687474703a2f2f6f6475782e617a75726577656273697465732e6e65742f6769746875622f696d672f506572736f6e61436172642e706e67)

------
untog
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.

~~~
jbigelow76
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._

~~~
oblio
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.

~~~
jbigelow76
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 :)

------
tajen
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...](http://patents.stackexchange.com/questions/4020/protecting-
a-user-interface-design-patent-and-or-copyright)

Any further answer is welcome.

~~~
icebraining
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).

------
paulojreis
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.

~~~
zodiakzz
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.

~~~
paulojreis
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).

------
ckluis
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.

~~~
jbigelow76
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.

------
gapchuboy
Naming hell again by Microsoft.

Why fabric?

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

Azure has App fabric and fabric controller.

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

------
donutdan4114
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.

~~~
joshuacc
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.

~~~
bennylope
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.

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

~~~
Flenser
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/](http://sassbreak.com/ruby-sass-libsass-differences/)

------
nailer
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...](https://github.com/OfficeDev/Office-UI-
Fabric/blob/master/ghdocs/FEATURES.md#typography)

~~~
gordjw
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.

------
rw2
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.

------
aaronbrethorst
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 ...

~~~
dragonwriter
> 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](https://en.wikipedia.org/wiki/Search_engine_results_page)

~~~
aaronbrethorst
doh, thanks for the correction!

------
urs2102
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.

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

------
metaphorical
Any demo link?

~~~
nailer
[https://github.com/OfficeDev/Office-UI-
Fabric/blob/master/gh...](https://github.com/OfficeDev/Office-UI-
Fabric/blob/master/ghdocs/FEATURES.md)

------
toolz
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?

~~~
vukers
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...](https://blogs.office.com/2015/08/31/introducing-office-ui-fabric-your-
key-to-designing-add-ins-for-office/)

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

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

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

~~~
jevgeni
Or Multiple Sclerosis.

------
brokentone
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...

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

