What are some responsive frameworks that are used, and what are some tradeoffs between them?

Question

We're currently in the midst of "going mobile" here at work, and we'd like to start factoring responsive web design into the design process from the start. We don't, however, know where to start with a responsive design framework.

What responsive frameworks have you guys used, and what are some trade offs between the different ones?

Answer 1

Depending on what you are doing, you might choose different Frameworks.

Foundation & Bootstrap are both great - if you want all that overhead. I personally don't like the grid bootstrap comes with that much, but if you are building an extenisve application and are likely to need all those UI elements these are great choices. The more Bootstrap elements you need, the better option it becomes.

For building simpler sites, or where you want to start from more of a blank canvas, get the simplest thing possible. Depending on your targeted browsers, how much you want to keep layout classes out of your mark up you could choose from:

eg http://cssgrid.net/ -super simple. Almost not a framework. http://susy.oddbird.net/ - focuses on allowing you to define your own grid & allowing you to keep layout classes out of the markup. Sass based

Note on preprocessors - If you are getting into mobile and using complicated frameworks like bootstrap or Foundation your css is complex. Strongly recommend using a preprocessor to help with that. That might feedback into your choice of Framework - Bootstrap is based on Less, Foundation on Sass

Answer 2

I've had the opportunity to build quite a few responsive website and to start off I don't believe there is a perfect "framework". You also need to consider if you're going to do with true responsive web design or RESS(responive web with server side assets).

Here are the few libraries/frameworks that i've used in the past with a quick blurb for each.

• Twitter Bootstrap - http://twitter.github.com/bootstrap/
  • Utilizes scaffoldings 12 column grid for the responsive layout and has lots of very useful plugins that can be seamlessly integrated
• jQuery Mobile - jquerymobile.com
  • If you're looking for a mobile experience more than desktop then look at jQm is the quickest and easiest way to build a responsive site with native transitions, full theme builder available here: jquerymobile.com/themeroller/
• Skeleton - getskeleton.com
  • If you're looking for a pure CSS framework, as Bill recommended, this is a good place to start.

Answer 3

There just so many that it would be difficult to compare each one of them. They are just different.

You have probably already seen some of the frameworks in this list before

http://www.tutorialchip.com/css/css-framework-for-responsive-web-design/

From them, the ones I recommend you to look at:

1. Foundation: build on sass, which is awesome. it uses variables to make your framework flexible. It contains lots of features, and be sure it is future friendly as foundation it is not going anywhere.
2. Less Framework a simple but powerful framework that has been around for a while. It is built using .less. If you are not familiar with sass or less, I suggest you start learning them. Everyone else is doing it.
3. Golden Grid System. Not sure why but I like it. It has the X-factor.
4. Twitter bootstrap. The most mature one. It is not only a responsive framework but also a whole of other stuff.

Answer 4

Its vital to understand what responsive design really means. I highly recommend giving this article a read: http://www.alistapart.com/articles/responsive-web-design/ and further his book: http://www.abookapart.com/products/responsive-web-design . Working through the material (meaning doing some code experimentation as you read) will help you to understand what is going on and make informed decisions as to what responsive framework to use and if to use one at all.

Historically, I have found that using a framework is almost always an overkill because its (and correctly so) designed to take many more factors into account than is probably needed for a specific case. However, Bootstrap and several others will allow you to prune your download to tailor the feature set. That is another reason why its really important to know what is going on. It really isn't too difficult to grasp if you have basic html/css knowledge already.

Best of luck!