10 Responsive Frameworks You Need

Whether you call them responsive grid systems or a css responsive layout - they are a web designer's best friend and we love them as much as anyone. The only issue we may have with responsive frameworks is that there are just so many out there. With that in mind, we'll try to save you some time (and give you a few more tools)... because these are the only tools you need to provide good responsive design to your clients.

What makes a responsive framework?

Frameworks are primarily time-savers and in that respect you need to walk a fine line of compiling code you always use, while keeping in mind that each project is unique. With that in mind, a "Responsive Framework" is generally defined as a collection of code (mostly CSS) that give's you the basics for building a website. A layout, minimal typography, frames, standard javascripts (jquery for example) are all you really need - and all a good framework is made of. In a macro view, having an assortment of quality frameworks allows a designer to do more high quality projects in a minimum amount of time. This makes having a selection of great frameworks very important (especially to freelancers). Now that we've got the formalities out of the way - lets get to the details... We'll start with our 5 must have's and follow up with 5 worth keeping around.

The Top Five "Must-Have" Frameworks

1. Foundation 4

   | http://foundation.zurb.com/

2. Twitter Bootstrap

   | http://twitter.github.com/bootstrap/

3. Gumby

   | http://gumbyframework.com/

4. Responsive Grid System

   | http://www.responsivegridsystem.com/

5. Base

   | http://matthewhartman.github.com/base/

---

5 Worth Having Around

1. Less Framework 4 - http://lessframework.com/
   Less+ - http://www.angrycreative.se/wordpress/plugins/less-framework/
   WorkLess http://workless.ikreativ.com/
2. Skeleton - http://www.getskeleton.com/
3. Unsemantic - http://unsemantic.com/
4. Mueller Grid System - http://www.muellergridsystem.com/
5. Titan - http://titanthemes.com/titan-framework-a-css-framework-for-responsive-web-designs

Brief Explanation

From top to bottom, there is simply no framework better then Foundation 4. Although this release is fairly recent, I would have said the same about Foundation 3. The base is solid, functionality is well documented, the theme roller does it's job, and the bonuses are very well done (Orbit Slider, Icon Fonts, etc). The responsive css examples are very helpful too.

Twitter Bootstrap has become invaluable and probably done the most to push the responsive "cause" in the industry. It's a 12-column responsive grid that makes a great starting point. Twitter Bootstrap should be high on the list of any responsive project and has done wonders for the use of grids in web design.

Gumby shows a lot of promise and has made drastic moves with their v2. Now running SASS is a plus and I must say, I think it's documentation is the best in the field.

Responsive Grid System uses solid responsive columns and codes very cleanly. That said, the learning curve is a bit steeper.

Base is not too shabby (once you get used to it) and is very stable. The primary downside (for me) would be the documentation.

---

If you need a responsive web developer, shoot us a message @ http://haeckdesign.com/contact or if you've got any tips / points - feel free to leave them below.