

Twitter Bootstrap or Zurb Foundation for RailsApps? - DanielKehoe
http://blog.railsapps.org/post/64755922797/twitter-bootstrap-or-zurb-foundation-for-railsapps

======
llamataboot
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 -

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

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

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

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

------
SkyMarshal
Suzy is another good one worth evaluating.

[http://susy.oddbird.net/](http://susy.oddbird.net/)

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

------
DanielKehoe
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-...](http://www.kickstarter.com/projects/909377477/learn-ruby-on-rails)

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

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

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

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

~~~
subpixel
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
Google Trends says Bootstrap is ~7x as popular as Foundation:

[https://www.google.com/trends/explore?q=twitter+bootstrap#q=...](https://www.google.com/trends/explore?q=twitter+bootstrap#q=twitter%20bootstrap%2C%20zurb%20foundation&cmpt=q)

On that basis, I'd go with Bootstrap.

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

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

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

~~~
dallen33
True, but it's "experimental" only.

[http://foundation.zurb.com/docs/components/grid.html](http://foundation.zurb.com/docs/components/grid.html)

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

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

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

------
sevfurneaux
I'd use neither and go for the Skeleton CSS framework. Nice and clean:
[http://www.getskeleton.com](http://www.getskeleton.com)

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

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

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

------
jwallaceparker
[http://gumbyframework.com](http://gumbyframework.com) is fantastic

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

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

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

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

~~~
ecaron
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...](http://abetteruserexperience.com/2013/08/get-a-sneak-peek-of-zurb-
foundation-5/), and the changes fall into the camp of "things I don't need to
hold my breath for."

------
berto99
how about purecss? purecss.io

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

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

