Twitter Bootstrap or Zurb Foundation for RailsApps? | Hacker News Reader

Twitter Bootstrap or Zurb Foundation for RailsApps?

blog.railsapps.org

59 pointsDanielKehoe43 comments

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/

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 -

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 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/) 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/) 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.

OP here. Maybe this is what I should do for my example applications and the "Learn Ruby on Rails" book. Use mixins from either Bootstrap or Foundation in a CSS file so I can use my own semantic CSS classes in the application views and isolate my code from the front-end framework. Though it sounds like too much complexity to introduce to Rails beginners in the book.

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.

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.

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 :) .

Except the land of getting AngularJS & Foundation to play nicely is full of unresolved landmines (e.g. http://coder1.com/articles/foundation-4-angularjs)

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/ or http://cardinalcss.com/ instead.

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.

Have you looked into https://github.com/dhg/Skeleton? It's very lightweight. If you want something heavier, but semantic, I like http://gumbyframework.com/. I think it was based on 960gs. It also looks pleasant.

Cardinal seems pretty awesome. Thanks for sharing!

cardinal looks exactly like inuit.css

Suzy is another good one worth evaluating.

http://susy.oddbird.net/

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.

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

[2] http://railsapps.github.io/

[3] https://github.com/RailsApps/rails_layout

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

I really like to rock [Bourbon](http://bourbon.io/) and [Neat](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.

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.

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.

Google Trends says Bootstrap is ~7x as popular as Foundation:

https://www.google.com/trends/explore?q=twitter+bootstrap#q=...

On that basis, I'd go with Bootstrap.

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.

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.

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.

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

4.3 introduced a M, for what its worth (http://foundation.zurb.com/docs/changelog.html)

True, but it's "experimental" only.

http://foundation.zurb.com/docs/components/grid.html

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

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.

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.

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

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.

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.

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.

http://gumbyframework.com is fantastic

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.

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

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

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

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..., and the changes fall into the camp of "things I don't need to hold my breath for."

how about purecss? purecss.io

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

Alas, most people (including me) are idiots, so the Bootstrap/Foundation debate is important to us.

Bootstrap!

Reply on news.ycombinator.com