I really hate to rant. I love the idea of this and worked on a thing like a "fb bootstrap" By myself for quite a while now.
Having done many fb apps and making heavy use of twitter bootstrap by myself for other projects recently (oh god, app development on lightspeed!) i first looked at it thrilled: hey cool- this will come in handy! But after about 5 seconds: wtf?
This is just twitterbootstrap painted blue.
Using this for your facebook apps would NOT give them a genuine facebook look but make them only look cheap.
The typo is not right. Font sizes, line spacing - everything. Forget about the columns. They are twitterstyle, not facebook. Buttons? They are grey and blue, yes - but not facebook style. Tables? Not at all. I could continue this list for every single element! Facebook has unique tabs, unique breadcumbs. Completely missing!
My quick advice for getting a nearly facebook-like style in your appe in seconds: embed their CSS in your header. When you investigate a bit how they build their page elements, you can mimic their style really quick.
And for the "fb bootstrap": nice idea. Awful implementation. Stay away from it. But everyone has to decide for himself - seems like most people like it, tough.
If I manage to spend 1-2 days on cleaning up and documenting my framework (be warned, it's PHP based) I will open a github project and post it here on HN.
I think you're being too critical and you're at risk of coming off as a know-it-all here. On the whole you're right in your criticisms but I think you're taking too narrow of a view of this.
First off, it's close enough. Close enough is more than enough for something like this as Facebook has rules about looking too much like the rest of the site. Having it be close but not quite Facebook-style is great for plausible deniability if they ever gave you a problem and you were inclined to try to defend yourself (it may be a losing battle but at least you have the option).
The author makes it clear that it's based on Twitter's bootstrap so it's not surprising to see it just "painted blue" as you say. Honestly, I looked at this and saw that it was more than enough to get you started.
Whenever you create a boilerplate, especially one that you release to the public, you walk a fine line between offering a solid, customizable foundation and giving people far too much structure that they have to undo. Every single framework I've ever seen (even the one I made for myself) has been criticized for being pretty much a completed project sans content. It's almost a losing battle. Give people too much and they complain it's no longer a boilerplate. Give them too little and they say there's not enough for it to be useful. I think this project walks that line quite nicely.
So I guess what I'm saying is give the guy a break. This is cool and useful. It doesn't look cheap either. I think you went too far with that statement. It isn't totally Facebook style but close enough goes a long way. I absolutely am not trying to be antagonistic. Everyome has the right to criticize especially since this got posted here on HN. I don't want to say you can't criticize but just be fair about it. It isn't as bad as you make it out to be. To me it's not bad at all. Though it may be bad to you, which is okay, don't you think there's at least some good things about it? I don't know, I have this weird paternal instinct that kicks in whenever I see criticism I think is too harsh.
The point is: download twitter bootstrap, open the variables.less file, tweak some colors to blue and grey and thats it. There is nothing what makes this a "facebook bootstrap" of any kind - and that's what I was saying.
update
It seems like the guy is still working on it - so maybe it just became popular too quickly before its ready.
On a second look, the dialogs look much better now.
And as I sayed in my original post: everyone has to decide for himself ;)
PS:
If facebook ever thinks you have done wrong, there will be no chance for "plausible deniability" because they simply delete your content and will never contact you or answer your mails. So why don't be perfect in the first place?
Why did you almost-but-not-exactly replicate Facebook's style conventions?
The small-but-significant differences between this framework and Facebook (e.g. button styling!) will make any app built using this look decidedly sketchy.
This was the first thing I noticed too. It seems like an odd mix between Bootstrap itself and Facebook's styling. For example, the box-shadow when focusing on text input.
Wonderful. I recently built a Facebook iFrame app and burned so many hours trying to make my app look vaguely inline with what a user expects a facebook. This is absolutely the perfect kit for that. It's a really terrible reflection on Facebook that they didn't provide exactly this themselves.
Every other "platform" provides UI guidelines with libraries/frameworks to allow others build products native to their platform. Facebook have made no good attempt at this, which is why this is a great project!
I'm going through this now so I'm equally excited. A little bit off-topic, but how did you deal with the back button problem?
Currently, if my user navigates a few pages deep in my app and clicks the back button, it exits the app and goes back to Facebook. Quite annoying... Thanks!
Because the app is in an iFrame, you can just use regular linked files and then the back button works as expected.
If you do that though, there are a few other issues - you may have to account for pages that do/don't have the Facebook signed_request post data - i.e. you probably need to store it in a session or cookie (and deal with the relevant IE7 cookie + iFrame issues by settings P3P header if you support IE7. Can't remember offhand if it is a problem in IE8.)
Obviously more complex apps where navigation is handled through AJAX get tricky when you can't access the container frame. Maybe look into history.js (https://github.com/balupton/History.js/) and see if it works in a Facebook app?
History.js looks promising. I'll definitely dig deeper. Using regular A tags does not work, however, hence my question.
I decided not to support IE7 since this is a brand new app. It will be IE8+. I had to deal with the P3P issue in the past and it was a pain. Hopefully IE8 isn't as picky.
Thanks for the help! I now have something to investigate.
I had trouble doing just this, mainly because of how IE handles cookies on 304. I used this Gem for a Rails app (~1 year ago): https://rubygems.org/gems/rack-p3p.
You could do something hacky with pushState [0], but it would take a considerable amount of work to make it work. I can't even think of a way to implement it, but you could try something out.
Your other option is to have a back button in your iframe in a prominent location and hope your user uses that instead of the browser back button.
If you somehow figure out a way to make pushState work, you should probably still have a back button in your app, for old browsers. Or at least display it for only old browsers.
Facebook actually passes the path from the canvas url to your iframe. So what I do is make all the targets "_top" and point to my canvas url. No need for complicated JS stuff. :D
As the developer of a couple of Facebook apps, I have to ask: do apps HAVE to "look inline" with Facebook? Is there any proof or anything showing that apps that use the same typography and style as Fb instead of their own visual style fare any better?
Brilliant. That said, as someone working heavily with Bootstrap these days, I suggest that you rebase this off of the 2.0-wip branch as a lot has changed (for the better) there.
This is great! Here's an idea: bootstrap with "pluggable" skin (Twitter, Facebook, Google+) so you can make your app standalone (use Twitter style) or inside Facebook (use Facebook style), etc.
I'm not sure if this bootstrap is already compatible with Twitter's (i.e. as simple as changing CSS file), haven't tried this bootstrap thing, but it would be great if it is!
Excellent. I was just working on a project that used Bootstrap, which worked great until I had to implement Facebook notifications (which must be viewed in a canvas app). Bootstrap is too wide for that.
"App does not use Facebook trademarks or express or imply any affiliation with or endorsement by Facebook"
This is a rather vague statement that I could easily see being used as the justification for squashing someone's app. This is why I've always made sure any FB app I make doesn't completely rip-off Facebook styling but contains enough of my own styling to not appear to be part of Facebook.
Great bootstrap, but there seems to be a problem with inline labels in Chrome (Ubuntu 10.10). Twitter's labels work fine though.
I played with CSS a bit and the labels don't like Lucida grande, obviously: http://imgur.com/XJ51Z
I think it looks awesome, it really does! However twitter bootstrap looks really generic therefor can be used any place, Fbootstrapp looks a lot like Facebook and cannot be used for much else beside Facebook apps without looking like a rip off.
The info page pretty explicitly says that Fbootstrapp is designed for building Facebook apps; if you're building something that wasn't meant to be viewed within an iframe on FB's page, you're looking at the wrong tool.
Having done many fb apps and making heavy use of twitter bootstrap by myself for other projects recently (oh god, app development on lightspeed!) i first looked at it thrilled: hey cool- this will come in handy! But after about 5 seconds: wtf?
This is just twitterbootstrap painted blue. Using this for your facebook apps would NOT give them a genuine facebook look but make them only look cheap.
The typo is not right. Font sizes, line spacing - everything. Forget about the columns. They are twitterstyle, not facebook. Buttons? They are grey and blue, yes - but not facebook style. Tables? Not at all. I could continue this list for every single element! Facebook has unique tabs, unique breadcumbs. Completely missing!
My quick advice for getting a nearly facebook-like style in your appe in seconds: embed their CSS in your header. When you investigate a bit how they build their page elements, you can mimic their style really quick.
And for the "fb bootstrap": nice idea. Awful implementation. Stay away from it. But everyone has to decide for himself - seems like most people like it, tough.