What’s Your Favourite WordPress Responsive Theme Framework?

Web Hosting

Update: Check out our newer post on Responsive Grids and Frameworks for WordPress.

Responsive design is all the rage, and of course a number of excellent responsive theme frameworks for WordPress have sprung up.

Below I have selected what I believe are currently the most popular responsive frameworks. It would be interesting to see if you guys are already using any of them, and if so which one you have selected. Feel free to leave reasons for your selection in the comments section.

We’ve also reviewed the best corporate responsive themes for WordPress in another post on this site, check out that one too if you’re looking for a ready made responsive theme.

An overview of the Responsive Frameworks

I suggest you download all of the frameworks below and try them out before you select one. If you’re pressed for time however, I’ll try to give you some hints as to what might work best for you.

  • Yoko is the most complete theme looks and content-wise, if you need a WordPress theme which has all the possible types of content styled right out of the box, it’s your definite choice.
  • Roots is the most established WP theme framework, it incorporates some valuable tweaks to the base WordPress installation (check out the clean URL rewriting) and has an options panel from which you can select the CSS layout framework you want to work with (Foundation, 1140 Grid, 960gs and more)
  • Foundation is becoming very popular, and is supported by excellent documentation. It is ideal for building a quick prototype that can be later fine-tuned into a theme. If you want to work with Foundation you can have 3 WordPress implemenations to choose from: Roots, Reverie and Foundation for WordPress.
  • Skeleton has a very neat Theme Options page, you might want to use that, effectively it has the most advanced options page from all the frameworks we mention below.
My favourite set up is that of using Roots as a starting base, modifying it according to my needs. I use the Foundation CSS layout and remove the others which I don’t need. I would also rebuild the theme options page according to the needs of the theme I’m developing. The fact that there are another two Foundation implementations is also cool. For example, if I need a bbpress layout (which is not provided with Roots), I could get that from Reverie. If I need an Obit image uploader I can use the one from Foundation for WordPress. This setup is just what works best for me, you might of course have different aims and opt for another framework from the ones below. Hopefully this posts helps to bring to light the different options we have at the moment within the WordPress community.

Roots Theme

Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs. It has a bunch of excellent tweaks to WordPress, plus support for the best CSS frameworks including Foundation and 1140 Grid. This is a solid theme framework that is constantly updated and used by many developers, you cannot go wrong with it.

Here are some websites developed with Roots.

Get Roots Theme

Reverie (based on Foundation)

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. Reverie follows HTML5 Boilerplate standard and is hNews microformat ready. It is optimized for Search Engine while at the same time improve readability.

It is extremely easy to create your blog, CMS, brochure and any other kind of sites with Reverie. You can see some samples on ZURB and how they make these prototypes. Did I just mentioned Reverie works well with bbPress 2.0, even without styling?

Reverie Framework inherits all the cool features from Foundation, and packs with several other interesting features to optimize the experience for WordPress and HTML5. Including customized output for WordPress menus and caption. You can view the features list by scrolling down.

Reverie utilizes Foundation’s grid to implement layouts. It is quite easy to start building your own layouts (like this page). You can read Foundation’s documentation for how to implement these cool features.

Foundation for WordPress

Foundation, for WordPress, is a blank starter theme with the exceptional capabilities of ZURB’s Foundation Framework and HTML5 Boilerplate.

As a neat-freak designer, it’s sometimes intimidating and frustrating looking at a WordPress theme framework that’s jam-packed with unnecessary extras and bloated code. This doesn’t include your common templates such as comments.php etc, it’s the bare-minimum, allowing you to start from ground-zero and build a perfect website – keeping organisation and cleanliness in mind.

Foundation, for WordPress, features everything ZURB’s Foundation Framework and HTML5 Boilerplate have to offer, however, some changes have been made to tailer it to WordPress, these include:

  • Orbit for WordPress, ZURB’s image and content slider tailored for WordPress
  • A ySlow score of 95 (in regards to ‘Small Site or Blog’) & without a build script
  • SEO features such as an optomised Google Analytics snippet, robots.txt and Schema.org attributes
  • Beautiful, coda-style tooltips
  • Normalize.css, you’ll never go wrong with this dynamic reset
  • Reveal for WordPress, a simple modal box by ZURB made to work in WordPress
  • A function to provide Google’s jQuery CDN over WordPress’ local copy
  • Failsafe jQuery, with a fallback to WordPress’ local copy

Get Foundation

Yoko Theme

Yoko is a modern and flexible WordPress theme. With the responsive layout based on CSS3 media queries, the theme adjusts to different screen sizes. The design is optimized for big desktop screens, tablets and small smartphone screens. To make your blog more individual, you can use the new post formats (like gallery, aside or quote), choose your own logo and header image, customize the background and link color.

The theme requires WordPress 3.1+ to run. It has following features:

  • Cross-browser compatible (tested in Chrome, Firefox, Safari, Internet Explorer 8+)
  • HTML5 (with fallback for IE < 9) and CSS3
  • Responsive layout (CSS3 media queries, not supported in IE < 9, but you can use libraries like Respond.js by Scott Jehl or CSS3-Mediaqueries-js by Wouter van der Graaf to make it work in older versions of IE.)
  • WordPress post formats (aside, gallery, image, video, link and quote)
  • Theme options page, custom background, custom header image
  • Optional sub menu
  • A custom social links widget to promote your RSS-Feed, Facebook, Twitter, Flickr, Vimeo, LinkedIn or Delicious profile
  • Full-width page template
  • Google Web fonts in use (Droid Sans and Droid Serif)
  • Threaded comments with Gravatar support
  • Shortcodes for multiple columns, info boxes in three colors and highlighted text
  • Currently available in English, German and French.

Get Yoko theme

1140 Starkers Theme for WordPress

Derived from Elliot Jay Stocks’ Starkers Theme and the 1140 CSS Grid.

Get 1140 Starkers theme for WordPress

Skeleton WordPress Theme

Skeleton is a simple, responsive theme from Simple Themes. It has in-built templates for Jigoshop and bbPress and is based on the Skeleton boilerplate.

Customizing Skeleton can be achieved with the Theme Options panel under Appearance → Theme Options. The theme options panel uses the Theme Options Framework by WP Theming. Advanced users can customize the options.php using the documentation found on their site.

Get Skeleton WordPress Theme

Whiteboard Framework

Whiteboard Framework has been helping WordPress developers cut back on their development time and improve their WordPress powered websites since 2008.

Whiteboard framework for WordPress was developed to speed up the process of developing a WordPress theme. Whiteboard does so by eliminating the time spent on code common to all WordPress themes and includes non-intrusive code that improves the overall WordPress theme in many ways – including SEO, speed, usability, and mobile support.

  • Completely Free and Open Source
  • Speeds up WordPress development time
  • Built with Less Framework for an instant mobile website
  • Comes with a minimalist design to use or build off of
  • Lightweight and well-noted
  • The theme and Less Framework can be easily removed if desired for quick and easy WordPress theme development
  • Strong and flexible div structure
  • Basic styles and classes to speed up theme development
  • Strong Search Engine Optimization
  • More dynamic Classes and IDs than any other WordPress framework
  • Many awesome WordPress features such as manageable menus, background, and header image as well as featured images, several widget areas, and more
  • Follows the Web Accessibility Initiative
  • HTML5 with graceful degradation
  • CSS3 Animations with graceful degradation
  • Follows WordPress’ CSS Coding Standards
  • Compatible with WordPress 3.0 and up with fallbacks for older versions of WordPress
  • Cross browser compatible

Get Whiteboard Framework

Bones Theme

Designing for multiple devices is a tough task. Right off the bat, you need a flexible and solid starting point. The Responsive version of Bones is that starting point. With a stylesheet setup for media queries and a Mobile First approach, you’ll already be ahead of the curve.

Get Bones Theme Framework

And if you haven’t got enough yet, here are some more non-WordPress CSS frameworks worth looking into.

Resources Worth Checking Out

I hope I’ve aroused your curiosity if this is a new topic for you, or awakened the desire to develop a responsive theme if you’re already familiar with the concept and theming. In any case, here are some essential links to check out and deepen your knowledge of the subject:

Know of any more responsive frameworks for WordPress? Let us know in the comments section below.

If you enjoyed this post, make sure to subscribe to WPMayor’s RSS feed.

About Jean Galea

Jean Galea is a WordPress developer and creator of the WP RSS Aggregator plugin. He loves blogging and is the founder of WP Mayor. Jean also blogs about internet marketing at Fit for Blogging.

25 Responses

  1. Zhen
    Zhen November 16, 2011 at 15:16 | | Reply

    Hello Jean, this is a nice collection. I also made a WordPress framework based on ZURB’s Foundation last week. It was named Reverie Framework, an extremely versatile HTML5 WordPress framework based on ZURB’s Foundation and follows HTML5 Boilerplate standard and is hNews microformat ready. You can check out the feature list below and possibly include it in your list :)

    http://themefortress.com/reverie/

  2. Drew Morris
    Drew Morris November 16, 2011 at 18:45 | | Reply

    Hi, Jean,

    Really appreciate you mentioning me in this post! Means a lot!

    I created Foundation, for WordPress, solely out of the fact that it offers designers and developers alike the chance to start from scratch, keeping in mind some of the WP essentials. Not only that, the framework gives you the functionality to customise your slider through the back-end of WordPress.

    I have created a mobile responsive theme off this framework, and seeing that most people seem to want this, I’ll be creating a branch very soon for some to reference. So make sure all of you who are interested check back soon!

    Thanks!

  3. saqib
    saqib November 17, 2011 at 13:10 | | Reply

    Hi Jean,

    Thanks for sharing this really nice list

    Honestly all these frameworks are new for me as we are kind of more oriented toward writing html+css based on given design which usually not follow a predefined grid standard. So, basically I am more interested in kind of frameworks that provide wordpress functionality features like pagination, breadcrumbs, shortcodes, theme options panel etc…

    Still from the above list I would prefer to use yoko or starker for any theme that I might develop for any of my personal project as they have 1100+ width. So, if you are going to responsive then it is better to give more impressive look on big screens.

    Thanks again for such a great article.

    Regards

  4. Tom Hermans
    Tom Hermans November 17, 2011 at 18:16 | | Reply

    The weekend before ZURB came with Foundation I tried to make Twitter Bootstrap, along with some best practices I picked up into a good, scalable Responsive WP theme as well. Have to do some cleanup but will publish it somewhere as well. But first I’m gonna look into those Foundation themes dudes ;)

  5. Pieter
    Pieter November 18, 2011 at 10:51 | | Reply

    Hi,
    I don’t know why I would use all these frameworks. Most of them have a lot of code I won’t need. It often gives me the feeling I’m loosing control about theme developing.

    I develop using the Roots Dev Theme (a stripped down version by myself). That’s how I make my themes (responsive and non responsive).

  6. Mouring Kolhoff
    Mouring Kolhoff November 29, 2011 at 08:52 | | Reply

    I tend to like roots, but I am probably going to strip it down to my needs, but I’ll have a look at reverie as well

  7. Carl Franke
    Carl Franke December 3, 2011 at 04:59 | | Reply

    Bones seems to be the only one on this list that uses the Mobile First approach, which is the most logical. Do any of the other themes use this approach?

  8. Chris
    Chris December 12, 2011 at 23:35 | | Reply

    Hi,

    You mentioned that Genesis is a good theme in a post above. I wanted to let you know that when WordPress 3.3 is launched. So will Genesis 1.8. Genesis will then be responsive by default as mentioned on the Studio Press blog.

    http://www.studiopress.com/news/responsive-design.htm

  9. Ravi
    Ravi January 14, 2012 at 16:42 | | Reply

    Interesting that theme frameworks can be compared based on this feature. I have never tried any of the above frameworks but my favorite Genesis framework will soon become responsive :)

  10. r
    r March 7, 2012 at 10:20 | | Reply

    Hi guys,

    Need yorr help…Have nobody to ask..
    i need to build my parent theme..I want to start building my own theme (build my parent theme…) .. ( i’m new with php) … Should i start using the Frameworks or can i start with a “starter theme”?

    What the different between them anyway?
    Last thing, can i use a Thematic framework to build my own parent thrmr so some day i can sale it..?
    thanks so much,

    ron

  11. PHP this
    PHP this March 12, 2012 at 09:58 | | Reply

    very informative article.. thank you so much for sharing this.

  12. Ben
    Ben May 20, 2012 at 22:47 | | Reply

    Hi Jean,
    great article, thought you might have an idea for me –
    looking for a wordpress solution to build a website where anyone (logged in) can post anything, and I would like to be able to manage any object posted (text/image/audio/video).

    BEN

Leave a Reply