
Bootstrap for Facebook apps - llambda
http://ckrack.github.com/fbootstrapp?
======
chris_engel
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.

~~~
chefsurfing
Hi Chris, do you think you could extract and share your knowledge and
stylesheets the way that FB Bootstrap does?

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

~~~
herval
Php newbie factoid: every single php programmer I know ends up developing a
framework of their own.

Why does this happen (appearently) more on PHP than other languages? (please
correct me if I'm statistically wrong)

~~~
chris_engel
Maybe because it's easier than learning an existing one? I don't know.

The reason why I created my facebook framework: there simply is no other.

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

~~~
kuroir
To me it seems that he wanted to go the CSS3 way rather than the Facebook way
of doing things (multiple dom elements for single UI parts).

~~~
dmerfield
CSS3 won't affect the color of a border or gradient (most of which are wrong).

------
MikeW
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!

~~~
cmer
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!

~~~
LocalPCGuy
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?

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

~~~
chris_engel
If some other people have also problems with IE, facebook and session cookies,
have a look at this reciep, i wrote. The solution is pretty easy.
[http://recipes.wearekiss.com/view/platform/problem-
solutions...](http://recipes.wearekiss.com/view/platform/problem-
solutions/make-ie-keep-session-cookies)

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

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

------
jamesjyu
Good opportunity: sell themes for twitter bootstrap. Make it a marketplace.

------
wiradikusuma
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!

~~~
ben_hall
Great idea, however I imagine most applications wouldn't need to be cross-
platform.

------
100k
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.

------
debaserab2
Careful when branding your apps to look like Facebook.

[https://developers.facebook.com/docs/guides/policy/policy_ch...](https://developers.facebook.com/docs/guides/policy/policy_checklist/english/)

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

------
madrox
Great, FB-styled bootstrap. Naturally, the typography is terrible. =[

------
skbohra123
I was recently working on a facebook app and thought of something similar, you
have beaten me to it. Great work! Kudos!

~~~
funthree
Here is a similar facebook bootstrap that I started, functional but still a
WIP.

<https://github.com/tblobaum/bootstrap/tree/2.0-wip>

------
dertag
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>

------
tar
Great. I just wish Facebook would provide something like this themselves.

------
playhard
Brilliant!!! i foresee less ugly looking apps!

------
johnernaut
Twitter bootstrap turned blue. You could have at least been a bit more
creative than creating an almost identical clone.

------
shadowmint
humm.

Given that Facebook apps are completely dominated by large companies these
days, I'm puzzled by how useful this would be.

Are people really still building FB applications?

I thought the only real action these days was in the mobile space.

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

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

