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).
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:
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.
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.
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:
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.
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...
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.
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.
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.
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.
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.
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.
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.
> 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!
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.
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'.
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.
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 ...
> 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.
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.
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 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.
Without the dollar sign the potential for error is obviously far greater, for instance somebody might have thought he was referring to Martin Scorsese.
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...
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.
Thank you MS, this is well-needed ammo.
[0] https://github.com/OfficeDev/Office-UI-Fabric/blob/master/gh...