7 ms·

Twitter Bootstrap or Zurb Foundation for RailsApps?

59 points by DanielKehoe 13y ago

DanielKehoe 13y ago
My decision: For the book [1] I chose Zurb Foundation. For the RailsApps example applications [2] I intend to support both using the Rails Layout gem [3]. [1] http://www.kickstarter.com/projects/909377477/learn-ruby-on-rails http://www.kickstarter.com/projects/909377477/learn-ruby-on-... [2] http://railsapps.github.io/ http://railsapps.github.io/ [3] https://github.com/RailsApps/rails_layout https://github.com/RailsApps/rails_layout
- DanielKehoe 13y ago
  I like the naming scheme for Semantic UI (though I'm not sure it is truly "semantic" and it seems a bit pre-release still). PureCSS and Cardinal are new to me (thanks for the info, HN people!). Maybe I can include them as options in the RailsLayout gem. For the beginner's book, I still think Foundation is optimal (for popularity plus direct support for Rails with Sass and a gem).
5vforest 13y ago
Bootstrap 3 introduces some pretty weird markup IMO. Foundation is a bit better, but I'm going to suggest something unpopular, which is to use a lighter-weight framework like http://purecss.io/ http://purecss.io/ or http://cardinalcss.com/ http://cardinalcss.com/ instead.
- mikeroher 13y ago
  PureCSS really needs to improve its markup. I tried using it but soon found my CSS littered with 'pure-' everywhere. And the grid is really "unsemantic" (?). It might just be my personal opinion, but I really disliked it.
- pspeter3 13y ago
  Cardinal seems pretty awesome. Thanks for sharing!
- berto99 13y ago
  cardinal looks exactly like inuit.css
- jrhorn424 13y ago
  Have you looked into https://github.com/dhg/Skeleton https://github.com/dhg/Skeleton? It's very lightweight. If you want something heavier, but semantic, I like http://gumbyframework.com/ http://gumbyframework.com/. I think it was based on 960gs. It also looks pleasant.
sdf123 13y ago
Both Twitter and Foundation are for idiots. You should go with something better, like SemanticUI or PureCSS (http://purecss.io/ http://purecss.io/)
- beat 13y ago
  Alas, most people (including me) are idiots, so the Bootstrap/Foundation debate is important to us.
- AJAlabs 13y ago
  Bootstrap!
thomasmeeks 13y ago
Been using Zurb on a free-time site for about 9 months. I've been consistently impressed with it. It gave me a good place to start, and customization has been a breeze.
Robdel12 13y ago
Foundation. Main reason being Foundation is built on SCSS and bootstrap is built on LESS.
llamataboot 13y ago
Foundation is a bit lighter and nicer IMHO, used it on a recent project, but I'm going to suggest going for something like neat instead http://neat.bourbon.io/ http://neat.bourbon.io/ This assumes the primary reason you are using a framework is to get the niceness of an infinitely nesting responsive grid and you care about semantic HTML. Putting the grid in your LESS or SCSS is so much nicer than littering your HTML with "large-4 columns", etc -
- jelled 13y ago
  I'm going to check out neat, thanks for the link. I also dislike seeing grid markup all over the html. As far as foundation vs bootstrap I've used both tend to prefer foundation.
- ville 13y ago
  Note that you don't have to use the classes like "col-lg-4" in Bootstrap either. You can use your own classes and build the grid with .make-row() and .make-lg-column() mixins instead. (See http://getbootstrap.com/css/#grid-less http://getbootstrap.com/css/#grid-less for examples.) I'm currently using Bootstrap in two very different projects. One is an internal admin site where we have managed to get very far just using Bootstrap components in the HTML without any custom CSS at all. It's an AngularJS project and with Angular directives for Bootstrap (http://angular-ui.github.io/bootstrap/ http://angular-ui.github.io/bootstrap/) you can use Bootstrap like any native UI toolkit and if you don't need a customized look and feel you can get by with the defaults or just add a Bootstrap theme (http://bootswatch.com/ http://bootswatch.com/) on top. Another one is a large application with lots of LESS stylesheets and themed for different clients. By building our custom UI components in the same way as Bootstrap components are built we have managed to keep it very easy to customize for different themes. Bootstrap provides whole lot of variables as customization points and we have added a bunch of our own on top. By changing those variables we can create new themes very easily. For choosing Bootstrap vs Foundation, just pick one you like. More importantly, use the components provided by the framework as much as you can. When you to roll your own components, make them in the same modular fashion as the framework components. Put components in their own files and namespace them with classes. This way you can keep things nice and modular, and your stylesheets don't turn into an entangled monolithic blob that is difficult to maintain.
sevfurneaux 13y ago
I'd use neither and go for the Skeleton CSS framework. Nice and clean: http://www.getskeleton.com http://www.getskeleton.com
- jcomis 13y ago
  skeleton was great when it came out and I used it a lot, but I think it's gotten a bit dated. Not being mobile first is a the largest issue for me.
beat 13y ago
I've been developing my work using Foundation. I can't say I'm making a terribly informed decision, because I'm a back end guy and I'm still learning to write good modern front end. But Foundation felt better to me, and it's not driving me up a wall yet.
philliphaydon 13y ago
I'll never touch bootstrapper while it has no semi-colons. Zurb is awesome, but I'm using Semantic UI now. It's new, no V1, but I enjoy working with it more than any other web framework I've used.
dallen33 13y ago
Bootstrap has a nicer grid system, in my opinion. XS/S/M/L vs. S and L with Foundation.
- ecaron 13y ago
  4.3 introduced a M, for what its worth (http://foundation.zurb.com/docs/changelog.html http://foundation.zurb.com/docs/changelog.html)
  - dallen33 13y ago
    True, but it's "experimental" only. http://foundation.zurb.com/docs/components/grid.html http://foundation.zurb.com/docs/components/grid.html
SkyMarshal 13y ago
Suzy is another good one worth evaluating. http://susy.oddbird.net/ http://susy.oddbird.net/
- poxrud 13y ago
  Another vote for Susy. It is ridiculously easy to create a responsive grid using their sass mixins. Susy should not be compared to Bootstrap/Foundation since it is just a small grid system and not a full blown framework. It can be compared to something like Bourbon Neat.
fein 13y ago
Foundation 4 user here. The only benefit bootstrap has over foundation (imo) is the huge number of plugins that already exist. I had to adapt datepicker, xeditable, datatables.js (the worst offender), etc in order to play nice with F4. Aside from the snazzy 3rd party UI elements (F4 has some in the playground), F4's semantics rock my socks. F4's docs also explain damn near every line of SASS you'll ever need, so this should fit perfectly with a rails project. All of my work has been in PHP.
- Bahamut 13y ago
  For those who use Angular, the Angular UI Bootstrap plugin is CSS agnostic, so the datepicker would be nice and easy to use with Foundation :) .
  - ecaron 13y ago
    Except the land of getting AngularJS & Foundation to play nicely is full of unresolved landmines (e.g. http://coder1.com/articles/foundation-4-angularjs http://coder1.com/articles/foundation-4-angularjs)
JDSD 13y ago
I would definately recommend ZURB foundation, and would try to leverage use of mixins, although it is a bit more advanced.
nc 13y ago
Foundation 5 looks incredible, might be worth checking out too.
- ecaron 13y ago
  Where do you get that information from? The only F5 information that I can find is http://abetteruserexperience.com/2013/08/get-a-sneak-peek-of-zurb-foundation-5/ http://abetteruserexperience.com/2013/08/get-a-sneak-peek-of..., and the changes fall into the camp of "things I don't need to hold my breath for."
joeblau 13y ago
Bootstrap: Bigger community, more widgets, more support and more examples.
bwilliams 13y ago
I really like to rock [Bourbon](http://bourbon.io/ http://bourbon.io/) and [Neat](http://neat.bourbon.io/ http://neat.bourbon.io/). It's not a complete solution like Bootstrap or Zurb but it has just about everything you need to build off of. It's more of a long term solution than Bootstrap or Zurb.
- DanielKehoe 13y ago
  Say more? Why more of a longterm solution? Longterm is what I need since I am introducing it in "Learn Ruby on Rails" which is my book for beginners that I don't want to have to rewrite often.
- subpixel 13y ago
  On a current project, I got seduced by all the 'potentially useful' javascript that comes with Bootstrap. But in my experience, Bourbon/Neat were a whole lot simpler to work with. And pretty much everything I'd ever need (e.g. scroll spy functionality) can be accomplished with jQuery and available jQuery plugins.
runako 13y ago
Google Trends says Bootstrap is ~7x as popular as Foundation: https://www.google.com/trends/explore?q=twitter+bootstrap#q=twitter%20bootstrap%2C%20zurb%20foundation&cmpt=q https://www.google.com/trends/explore?q=twitter+bootstrap#q=... On that basis, I'd go with Bootstrap.
- DanielKehoe 13y ago
  OP here. The issue is integrating Bootstrap with Rails, relative to Zurb providing a supported gem for Rails. And breakage for SimpleForm going from Bootstrap 2.3 to 3.0. I'd be happy to choose Bootstrap on the basis of its popularity but I need a front-end framework I can recommend in my "Learn Ruby on Rails" book that isn't going to have integration issues with new versions.
  - phillmv 13y ago
    I would just not use SimpleForm, especially if you're pushing it on newbs. It does for views what Inherited Resources does for controllers, i.e. replace a really simple system with horrendous workarounds should you want to do anything other than the default.
    - subsection1h 13y ago
      Horrendous workarounds? You don't need to use SimpleForm for every form in an app. Also, you aren't restricted to using SimpleForm helpers when using simple_form_for. You can use input_field, label, etc. anytime you want to.
jwallaceparker 13y ago
http://gumbyframework.com http://gumbyframework.com is fantastic
berto99 13y ago
how about purecss? purecss.io
paultannenbaum 13y ago
I've used both extensively. Foundation uses SASS, is more modular in approach, is much easier to re-skin, and has a better grid system. Bootstrap uses LESS, has much more mind share, more plugin and theme support, and has better default styling. Both are great frameworks. I tend to use Bootstrap for prototyping, and Foundation for production.
te_chris 13y ago
Just remember, foundation 4 is mobile first and IE <8 don't support media queries. Have been burnt with this recently and it was a huge pain in the ass, so just a warning for those who still need to support such people.

59 points by DanielKehoe 13y ago

My decision: For the book [1] I chose Zurb Foundation. For the RailsApps example applications [2] I intend to support both using the Rails Layout gem [3]. [1] http://www.kickstarter.com/projects/909377477/learn-ruby-on-rails http://www.kickstarter.com/projects/909377477/learn-ruby-on-... [2] http://railsapps.github.io/ http://railsapps.github.io/ [3] https://github.com/RailsApps/rails_layout https://github.com/RailsApps/rails_layout

DanielKehoe 13y ago
I like the naming scheme for Semantic UI (though I'm not sure it is truly "semantic" and it seems a bit pre-release still). PureCSS and Cardinal are new to me (thanks for the info, HN people!). Maybe I can include them as options in the RailsLayout gem. For the beginner's book, I still think Foundation is optimal (for popularity plus direct support for Rails with Sass and a gem).

5vforest 13y ago

Bootstrap 3 introduces some pretty weird markup IMO. Foundation is a bit better, but I'm going to suggest something unpopular, which is to use a lighter-weight framework like http://purecss.io/ http://purecss.io/ or http://cardinalcss.com/ http://cardinalcss.com/ instead.

mikeroher 13y ago
PureCSS really needs to improve its markup. I tried using it but soon found my CSS littered with 'pure-' everywhere. And the grid is really "unsemantic" (?). It might just be my personal opinion, but I really disliked it.
pspeter3 13y ago
Cardinal seems pretty awesome. Thanks for sharing!
berto99 13y ago
cardinal looks exactly like inuit.css
jrhorn424 13y ago
Have you looked into https://github.com/dhg/Skeleton https://github.com/dhg/Skeleton? It's very lightweight. If you want something heavier, but semantic, I like http://gumbyframework.com/ http://gumbyframework.com/. I think it was based on 960gs. It also looks pleasant.

sdf123 13y ago

Both Twitter and Foundation are for idiots. You should go with something better, like SemanticUI or PureCSS (http://purecss.io/ http://purecss.io/)

beat 13y ago
Alas, most people (including me) are idiots, so the Bootstrap/Foundation debate is important to us.
AJAlabs 13y ago
Bootstrap!

thomasmeeks 13y ago

Been using Zurb on a free-time site for about 9 months. I've been consistently impressed with it. It gave me a good place to start, and customization has been a breeze.

Robdel12 13y ago

Foundation. Main reason being Foundation is built on SCSS and bootstrap is built on LESS.

llamataboot 13y ago

Foundation is a bit lighter and nicer IMHO, used it on a recent project, but I'm going to suggest going for something like neat instead http://neat.bourbon.io/ http://neat.bourbon.io/ This assumes the primary reason you are using a framework is to get the niceness of an infinitely nesting responsive grid and you care about semantic HTML. Putting the grid in your LESS or SCSS is so much nicer than littering your HTML with "large-4 columns", etc -

jelled 13y ago
I'm going to check out neat, thanks for the link. I also dislike seeing grid markup all over the html. As far as foundation vs bootstrap I've used both tend to prefer foundation.
ville 13y ago
Note that you don't have to use the classes like "col-lg-4" in Bootstrap either. You can use your own classes and build the grid with .make-row() and .make-lg-column() mixins instead. (See http://getbootstrap.com/css/#grid-less http://getbootstrap.com/css/#grid-less for examples.) I'm currently using Bootstrap in two very different projects. One is an internal admin site where we have managed to get very far just using Bootstrap components in the HTML without any custom CSS at all. It's an AngularJS project and with Angular directives for Bootstrap (http://angular-ui.github.io/bootstrap/ http://angular-ui.github.io/bootstrap/) you can use Bootstrap like any native UI toolkit and if you don't need a customized look and feel you can get by with the defaults or just add a Bootstrap theme (http://bootswatch.com/ http://bootswatch.com/) on top. Another one is a large application with lots of LESS stylesheets and themed for different clients. By building our custom UI components in the same way as Bootstrap components are built we have managed to keep it very easy to customize for different themes. Bootstrap provides whole lot of variables as customization points and we have added a bunch of our own on top. By changing those variables we can create new themes very easily. For choosing Bootstrap vs Foundation, just pick one you like. More importantly, use the components provided by the framework as much as you can. When you to roll your own components, make them in the same modular fashion as the framework components. Put components in their own files and namespace them with classes. This way you can keep things nice and modular, and your stylesheets don't turn into an entangled monolithic blob that is difficult to maintain.

sevfurneaux 13y ago

I'd use neither and go for the Skeleton CSS framework. Nice and clean: http://www.getskeleton.com http://www.getskeleton.com

jcomis 13y ago
skeleton was great when it came out and I used it a lot, but I think it's gotten a bit dated. Not being mobile first is a the largest issue for me.

beat 13y ago

I've been developing my work using Foundation. I can't say I'm making a terribly informed decision, because I'm a back end guy and I'm still learning to write good modern front end. But Foundation felt better to me, and it's not driving me up a wall yet.

philliphaydon 13y ago

I'll never touch bootstrapper while it has no semi-colons. Zurb is awesome, but I'm using Semantic UI now. It's new, no V1, but I enjoy working with it more than any other web framework I've used.

dallen33 13y ago

Bootstrap has a nicer grid system, in my opinion. XS/S/M/L vs. S and L with Foundation.

ecaron 13y ago
4.3 introduced a M, for what its worth (http://foundation.zurb.com/docs/changelog.html http://foundation.zurb.com/docs/changelog.html)
- dallen33 13y ago
  True, but it's "experimental" only. http://foundation.zurb.com/docs/components/grid.html http://foundation.zurb.com/docs/components/grid.html

SkyMarshal 13y ago

Suzy is another good one worth evaluating. http://susy.oddbird.net/ http://susy.oddbird.net/

poxrud 13y ago
Another vote for Susy. It is ridiculously easy to create a responsive grid using their sass mixins. Susy should not be compared to Bootstrap/Foundation since it is just a small grid system and not a full blown framework. It can be compared to something like Bourbon Neat.

fein 13y ago

Foundation 4 user here. The only benefit bootstrap has over foundation (imo) is the huge number of plugins that already exist. I had to adapt datepicker, xeditable, datatables.js (the worst offender), etc in order to play nice with F4. Aside from the snazzy 3rd party UI elements (F4 has some in the playground), F4's semantics rock my socks. F4's docs also explain damn near every line of SASS you'll ever need, so this should fit perfectly with a rails project. All of my work has been in PHP.

Bahamut 13y ago
For those who use Angular, the Angular UI Bootstrap plugin is CSS agnostic, so the datepicker would be nice and easy to use with Foundation :) .
- ecaron 13y ago
  Except the land of getting AngularJS & Foundation to play nicely is full of unresolved landmines (e.g. http://coder1.com/articles/foundation-4-angularjs http://coder1.com/articles/foundation-4-angularjs)

JDSD 13y ago

I would definately recommend ZURB foundation, and would try to leverage use of mixins, although it is a bit more advanced.

nc 13y ago

Foundation 5 looks incredible, might be worth checking out too.

ecaron 13y ago
Where do you get that information from? The only F5 information that I can find is http://abetteruserexperience.com/2013/08/get-a-sneak-peek-of-zurb-foundation-5/ http://abetteruserexperience.com/2013/08/get-a-sneak-peek-of..., and the changes fall into the camp of "things I don't need to hold my breath for."

joeblau 13y ago

Bootstrap: Bigger community, more widgets, more support and more examples.

bwilliams 13y ago

I really like to rock [Bourbon](http://bourbon.io/ http://bourbon.io/) and [Neat](http://neat.bourbon.io/ http://neat.bourbon.io/). It's not a complete solution like Bootstrap or Zurb but it has just about everything you need to build off of. It's more of a long term solution than Bootstrap or Zurb.

DanielKehoe 13y ago
Say more? Why more of a longterm solution? Longterm is what I need since I am introducing it in "Learn Ruby on Rails" which is my book for beginners that I don't want to have to rewrite often.
subpixel 13y ago
On a current project, I got seduced by all the 'potentially useful' javascript that comes with Bootstrap. But in my experience, Bourbon/Neat were a whole lot simpler to work with. And pretty much everything I'd ever need (e.g. scroll spy functionality) can be accomplished with jQuery and available jQuery plugins.

runako 13y ago

Google Trends says Bootstrap is ~7x as popular as Foundation: https://www.google.com/trends/explore?q=twitter+bootstrap#q=twitter%20bootstrap%2C%20zurb%20foundation&cmpt=q https://www.google.com/trends/explore?q=twitter+bootstrap#q=... On that basis, I'd go with Bootstrap.

DanielKehoe 13y ago
OP here. The issue is integrating Bootstrap with Rails, relative to Zurb providing a supported gem for Rails. And breakage for SimpleForm going from Bootstrap 2.3 to 3.0. I'd be happy to choose Bootstrap on the basis of its popularity but I need a front-end framework I can recommend in my "Learn Ruby on Rails" book that isn't going to have integration issues with new versions.
- phillmv 13y ago
  I would just not use SimpleForm, especially if you're pushing it on newbs. It does for views what Inherited Resources does for controllers, i.e. replace a really simple system with horrendous workarounds should you want to do anything other than the default.
  - subsection1h 13y ago
    Horrendous workarounds? You don't need to use SimpleForm for every form in an app. Also, you aren't restricted to using SimpleForm helpers when using simple_form_for. You can use input_field, label, etc. anytime you want to.

jwallaceparker 13y ago

http://gumbyframework.com http://gumbyframework.com is fantastic

berto99 13y ago

how about purecss? purecss.io

paultannenbaum 13y ago

I've used both extensively. Foundation uses SASS, is more modular in approach, is much easier to re-skin, and has a better grid system. Bootstrap uses LESS, has much more mind share, more plugin and theme support, and has better default styling. Both are great frameworks. I tend to use Bootstrap for prototyping, and Foundation for production.

te_chris 13y ago

Just remember, foundation 4 is mobile first and IE <8 don't support media queries. Have been burnt with this recently and it was a huge pain in the ass, so just a warning for those who still need to support such people.