With mobile device browsing on the up-and-up, responsive websites are pretty much essential (oh, and recommended by Google). The previous solution; designing and coding multiple versions of a website in order for it to be viewable on different devices is becoming obsolete for sites in general, but the good news for designers and developers is that there’s help at hand.

With the difficult elements taken care of (CSS media queries being one), responsive frameworks offer designers and developers a blank canvas to build upon.

Whether you’re new to responsive web design or a web developer looking for the best framework solution, we’ve hand-picked the best of the bunch. This list should help you decide which is the best for your project. AFnd another thing, they’re all completely free!

Bones

Bones Responsive Framework

“Frameworks are great, but sometimes they make things more complicated than they need to be. Bones is bare and as minimalistic as possible. It’s meant to be used as a per-project template.”

  • Benefits
  • Minimal features and bloat-free
  • Mobile-first
  • Very flexible
  • Drawbacks
  • May be too minimal for novices
  • New version requires SASS unless you modify it to LESS or back to standard stylesheets

The Bones website says that it isn’t a framework, and I would tend to agree. It’s better described as a starting point for your projects. It’s built for the 1140px grid system and takes a mobile first approach. The latest update has combined both the responsive and classic versions of Bones, and is set up by default for SASS development however it also supports LESS and standard stylesheets.

Skeleton

Skeleton Responsive Framework

“This type of theme is not intended for everyone, however the up side is that your site will be clean, simple, and responsive to all modern desktop and mobile browsers.”

  • Benefits
  • Intended to be used as a theme right out of the box
  • Clean, minimum, can be built upon
  • Packed with useful features
  • Drawbacks
  • Not as simple as other frameworks
  • Default uses snap points rather than percentages

Reverie

Reverie Responsive Framework

“Reverie Framework is an extremely versatile HTML5 WordPress framework based on ZURB’s Foundation, a powerful tool for building prototypes on any kind of devices.”

  • Benefits
  • Looks great
  • Clean and minimal
  • Can be used out of the box
  • Drawbacks
  • May be too many extra features for some (Can be turned off)

Gantry

Gantry Responsive Framework

“Gantry is a comprehensive set of building blocks to enable the rapid development and realization of a design into a flexible and powerful web platform theme.”

  • Benefits
  • Feature-filled
  • Lots of Documentation
  • Handles the technical stuff for you
  • Drawbacks
  • May be too many extra features for some (Can be turned off)

PressWork

PressWork Responsive Framework

“The PressWork Toolbox lets you style any theme in a live preview environment without any code, drag & drop to set your layout in seconds, add Google fonts, and much more.”

  • Benefits
  • Drag-and-drop editor
  • Prebuilt themes
  • Handles the technical stuff for you
  • Drawbacks
  • Drag-and-drop may not be necessary for an experienced developer

So as you can see, there are lots of options available in order to create a sleek, fluid-like website that can render it’s size, shape and layout on the fly. With these free responsive WordPress frameworks, you too can build your very own responsive website!

Try them out for yourself and let us know how you got on or feel free to add your own preferences in the comments section below.

Share this post

Was this article useful?

Subscribe to our monthly mailing list to receive more articles like this.

Posted By Brandon Ingham

Brandon occupies a role in the development team here at Tone. He can generally be found building out great sites using forward-thinking technologies. Follow him on Twitter @BrandonIngham