There is a lot of hype surrounding Foundation, and they certainly don’t shy away from it themselves, professing to be “The most advanced responsive front-end framework in the world.” Version 6 has seen sizeable change, one of our favourites being the reduction in default styles needing to be overridden on common elements. Woop! This version of Foundation is more supported than ever, and they claim the size has been halved. If that is the case, the it is onwards and upwards for Foundation, for sure.


Another CSS boilerplate, Get Skeleton is very lightweight, as the name suggests. It is great for smaller projects that just don’t require the same utilities provided by their heavier weight competitors.


A CSS grid that is semantic and has intelligent selectors is immensely helpful when designing, and Semantic offers both of these features with a flourish. The grid system can also be fixed or fluid depending upon your need, which makes responsive design a pleasure, not a headache.

Responsive Design Testing

Does exactly what it says, and enables the user to input an url and see what it looks like on various different sized devices. Super helpful for the more obscure screen sizes!

Fit Text

Hurray for responsive typography! A plugin that is really worth its salt.


Their tagline is simple and promising: build intuitive, powerful wireframes for smarter web development. They certainly deliver upon this promise, as well. Wirefy is a clever tool enabling to create wireframes. It differs from similar products like wireframe tools in so much that it has a focus upon content, which makes for a nice change.

Rubber Cheese Template

Rubber Cheese have put up a free Ai template to download that enables anybody and everybody to create responsive websites.


This Man’s Life

A simple tool that toggles between device type, showing you how a design would look on each respective device. Of course you could use the tools in your browser, but it is always nice to outsource.


Golden Grid System

Golden Grid System is invaluable in the sense that it provides you with a lot of information about how to go about designing responsively. You are able to take what you need from the core, and leave the rest. It is powerful and mighty, but does not expect you to be a responsive design Guru and isn’t above giving you, the user, a helping hand. Fabulous!

Simple Grid

Not a CSS grid system, but rather a tool to help you make grids for your site. Simple Grid is an incredibly useful tool that can help you out when sizing things up, or merely when you need gridception. It has our vote!


Interface Sketch

To get the creative juices flowing, you need a frame that accurately represents the screen of the device you are designing for. Look no further than Interface Sketch, and get designing!


What are you waiting for!?

Get cracking and remember that responsive design is crucial in a day and age where huge amounts of your visitors are viewing you from a miniature iPhone screen.

If you can think of any more tools that are free and handy, we would love to hear more about them. Let us know what you think!

In the meantime, look out for our next post in which we will be discussing the relative merits of responsive design. Is it here for good, and what will the next generation of boilerplates hold in store for us? Thanks for reading guys, have a nice day!