5 Frameworks for Responsive Design

Developers are often called on to lead or promote new functionality in websites. Is your website responsive? If not, you’re seriously lagging behind as well as making your online success more difficult. But don’t fret, below are my 5 top responsive frameworks to choose from.

1) Twitter Bootstrap

This is my personal favorite. It’s a 12-column responsive grid, perfect as a front end or dashboard UI framework. It features dozens of components, JavaScript plugins, form controls, and best of all, if you don’t need a feature, the web-based customizer allows you to customize the package you need.

Twitter Bootstrap is well documented, with plenty of tutorials available online.

http://getbootstrap.com

2) Foundation

Foundation is an extremely popular front-end framework. It’s a 12-column nestable grid allowing you to create multi-device layouts quickly and easily. It’s also packed with global styles and JavaScript utilities to aid in rapid development and prototyping. The JavaScript equalizer is very useful to responsive design, allowing you to create equal height containers.

http://foundation.zurb.com/

3) Skeleton

Skeleton is just as it sounds – a lightweight barebones responsive grid system. With no other plugins and minimal styles, it’s built for rapid development. The biggest disadvantage is it’s based on the 960px grid system which is a bit dated and narrow by today’s standard.

http://www.getskeleton.com/

4) HTML5 Boilerpate

HTML5 boilerplate was one of the first opensource front-end responsive frameworks, and is quite popular. Some of the big guys in the industry use HTML5 Boilerplate including Google, Microsoft, Nasa and more. Boilerplate is less of a complete framework, like the other frameworks on this list, but offers more of a starting point, with some helper classes and media queries to get you started.

HTML5 Boilerplate can be a powerful add-on to some of the other frameworks. Learn more about integrating HTML5 Boilerplate and Twitter Bootstrap complement each other.

http://html5boilerplate.com/

5) Gumby

The Gumby framework uses a 12-column grid and is built with Sass a powerful CSS preprocessor. Gumby also allows you to customize your project online. Gumby includes many helper classes, a UI kit, extensions and mixins.

http://gumbyframework.com/

Bonus Add-on – JQuery Masonry by Desandro

JQuery Masonry is a handy plugin for building and packing grid based layouts like Pinterest, placing elements in the optimal position based on available space. Masonry can be included into any of the above themes with a bit of tweaking.

http://masonry.desandro.com/

Do you have a favorite responsive framework, or want to share your experience with any of the above? Please let us know in the comments below.

Jack

Jack

Jack knows beans.

How to get them.
How to grow them.
How to protect them.

Jack will be around every once in a while giving his advice, in his weekly column Jack Takes Stalk
Jack