5 ms·

Bootstrap for Facebook apps

325 points by llambda 15y ago

100k 15y ago
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.
latchkey 15y ago
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.
madrox 15y ago
Great, FB-styled bootstrap. Naturally, the typography is terrible. =[
arturventura 15y ago
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 15y ago
  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.
- dangrossman 15y ago
  That's the point of the project. > Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps
MikeW 15y ago
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 15y ago
  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!
  - neilparikh 15y ago
    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. [0] -https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#section_6 https://developer.mozilla.org/en/DOM/Manipulating_the_browse...
    - cmer 15y ago
      I think pushState might be the solution indeed. I was hoping for something a bit simpler. Thanks for the help! For the record, this screencast helped me: http://railscasts.com/episodes/246-ajax-history-state http://railscasts.com/episodes/246-ajax-history-state
      - neilparikh 15y ago
debaserab2 15y ago
Careful when branding your apps to look like Facebook. https://developers.facebook.com/docs/guides/policy/policy_checklist/english/ https://developers.facebook.com/docs/guides/policy/policy_ch... "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.
shadowmint 15y ago
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.
tar 15y ago
Great. I just wish Facebook would provide something like this themselves.
wiradikusuma 15y ago
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 15y ago
  Great idea, however I imagine most applications wouldn't need to be cross-platform.
jamesjyu 15y ago
Good opportunity: sell themes for twitter bootstrap. Make it a marketplace.
dmerfield 15y ago
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 15y ago
  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 15y ago
    CSS3 won't affect the color of a border or gradient (most of which are wrong).
- polymath21 15y ago
  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.
skbohra123 15y ago
I was recently working on a facebook app and thought of something similar, you have beaten me to it. Great work! Kudos!
- funthree 15y ago
  Here is a similar facebook bootstrap that I started, functional but still a WIP. https://github.com/tblobaum/bootstrap/tree/2.0-wip https://github.com/tblobaum/bootstrap/tree/2.0-wip
playhard 15y ago
Brilliant!!! i foresee less ugly looking apps!
chris_engel 15y ago
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 15y ago
  Hi Chris, do you think you could extract and share your knowledge and stylesheets the way that FB Bootstrap does?
  - chris_engel 15y ago
    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 15y ago
      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)
      - 15y ago
dertag 15y ago
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 http://imgur.com/XJ51Z
johnernaut 15y ago
Twitter bootstrap turned blue. You could have at least been a bit more creative than creating an almost identical clone.

325 points by llambda 15y ago

100k 15y ago

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.

latchkey 15y ago

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.

madrox 15y ago

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

arturventura 15y ago

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 15y ago
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.
dangrossman 15y ago
That's the point of the project. > Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps

MikeW 15y ago

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 15y ago
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!
- neilparikh 15y ago
  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. [0] -https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#section_6 https://developer.mozilla.org/en/DOM/Manipulating_the_browse...
  - cmer 15y ago
    I think pushState might be the solution indeed. I was hoping for something a bit simpler. Thanks for the help! For the record, this screencast helped me: http://railscasts.com/episodes/246-ajax-history-state http://railscasts.com/episodes/246-ajax-history-state
    - neilparikh 15y ago

debaserab2 15y ago

Careful when branding your apps to look like Facebook. https://developers.facebook.com/docs/guides/policy/policy_checklist/english/ https://developers.facebook.com/docs/guides/policy/policy_ch... "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.

shadowmint 15y ago

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.

tar 15y ago

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

wiradikusuma 15y ago

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 15y ago
Great idea, however I imagine most applications wouldn't need to be cross-platform.

jamesjyu 15y ago

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

dmerfield 15y ago

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 15y ago
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 15y ago
  CSS3 won't affect the color of a border or gradient (most of which are wrong).
polymath21 15y ago
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.

skbohra123 15y ago

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

funthree 15y ago
Here is a similar facebook bootstrap that I started, functional but still a WIP. https://github.com/tblobaum/bootstrap/tree/2.0-wip https://github.com/tblobaum/bootstrap/tree/2.0-wip

playhard 15y ago

Brilliant!!! i foresee less ugly looking apps!

chris_engel 15y ago

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 15y ago
Hi Chris, do you think you could extract and share your knowledge and stylesheets the way that FB Bootstrap does?
- chris_engel 15y ago
  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 15y ago
    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)
    - 15y ago

dertag 15y ago

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 http://imgur.com/XJ51Z

johnernaut 15y ago

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