CSS Framework options for RichFaces 5

[bleathem]

Until now we've focused heavily on the Bootsrap project as the vehicle for the new RichFaces skin in RichFaces 5.  However as Paul dijou pointed out at a recent IRC Tream meeting, there are a number of other viable CSS frameworks that we should also consider.  The ones mentioned so far are:

• GroundworkCSS
• Foundation
• Ink
• Maxmertkit

If anyone has any experience with any of these CSS frameworks, or knows of any others that we should consider, please share your experiences in this thread.

[paul.dijou]

I've started evaluating the following ones:

• Bootstrap: http://twitter.github.com/bootstrap (in version 3.0, still under development, impacting better mobile support and new "Flat UI" design or whatever)
• Foundation: http://foundation.zurb.com/
• GroundWorkCSS: http://groundwork.sidereel.com
• Ink: http://ink.sapo.pt/
• Gumby: http://gumbyframework.com/
• Maxmertkit: http://www.maxmert.com/
• Responsive Grid System: http://www.responsivegridsystem.com/
• Base: http://matthewhartman.github.com/base/

So far, the 2 mainstreams are Bootstrap and Foundation but you can find really nice ideas from others. I will try for write about that as soon as possible. Work in progress: https://gist.github.com/pauldijou/5181952

[bleathem]

Great, thanks for expanding on this Paul.  I look forward to reading any analysis you can offer on the relative strengths/weakneses of the various projects.

[lightguard]

Okay, I've either used most of the ones mentioned, or gone through the documention (at a very quick pace)

• Bootstrap, we all know about this one
• Foundation: Built with SASS, personally I like this better than Bootstrap now, has much the same functionaly (actually they all do)
• Groundwork: aside from being beta, it looks basically the same. The grid uses fractions which I think would complicate things (1/2, 1/5, 3/8, etc)
• Gumby: Nothing special here, imo
• Maxmert: Same
• ink: Doesn't use jquery, that right there is probably a show stopper for RichFaces 5
• Haven't looked at the others, oh yeah, one of those used non-standard attributes (not data-*) if that matters to you

SASS

It's very similar to LESS, but has mixins. The rest or small little syntax changes. It's also built with Ruby, so if you want to add things, or hack on it, you need to know ruby.

I don't want to say you should support everything, and if you're already going down the bootstrap road with RF4, you might as well stick to it. No need dumping something new on people when they upgrade.

[lightguard]

Of course if you *could* factor things out to where it's a transform or something for the CSS framework, that would allow maximum flexibility.

[paul.dijou]

Hey Jason, thanks a lot for the review.

We are not using any of them in RichFaces 4 but we did do some prototyping in the sandbox with Bootstrap and now we are thinking about using one of those frameworks in RichFaces 5. So whatever we choose, it shouldn't impact too much people...

I'm more a Bootstrap fan, but I've seen a lot of good reviews about Foundation, so I was looking for a Foundation lover in order to point advantages of this framework. Could you take a bit more of your time to explain why, for you, Foundation > Boostrap ? :-)

Btw, LESS also have mixins now.

[bleathem]

Thanks for pushing this discussion forward guys.

Adding to the mix: http://www.zebkit.org. Although it's a canvas based-approach, and not a CSS one as the above libraries are.