WordPress Cyber Monday Deals 2021!

What’s Your Favourite WordPress Responsive Theme Framework?

The WordPress responsive theme face-off. Tell us what's your favourite WordPress responsive theme framework.

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.

[polldaddy poll=5674716]

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.

Jean Galea
Jean Galea
Jean Galea is an investor, entrepreneur, and blogger. He is the founder of WP Mayor, the plugins WP RSS Aggregator and Spotlight, as well as the Mastermind.fm podcast. His personal blog can be found at jeangalea.com.

Consider sharing this post so others can find it:

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on telegram
Share on whatsapp
Share on pocket
Share on email

Join thousands of people receiving real-world, genuine evaluations of WordPress products and services just like this one every week.

Our Sponsors
Solid Affiliate
Contents

25 Responses

  1. 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/

      1. Hello Jean. As far as I know, they both inherit all the features from Foundation while Reverie goes a bit further by implementing some other cool stuffs that are also created by ZURB team including the Sub Navs (http://www.zurb.com/blog_uploads/0000/0597/index.html). I also fixed a few bugs regarding image responsive.

        But the biggest difference I think is that Drew Morris only applies Foundation for WordPress as a blank theme, which literally is empty and without even template tags for WordPress, and has only the most basic templates. While Reverie is a ready-to-use theme/framework for WordPress which includes anything that is necessary to get start, plus bunch of improvements. You can see the optimized and effective template structure on Github: https://github.com/milohuang/reverie

        You can see the Demo of my framework here:
        http://themefortress.com/demo/

        1. Thanks for the info, I’ll be sure to try it out then and maybe include it above. And thank you for your contribution to the WordPress community via this theme!

        2. As I mentioned to Drew, maybe you two might consider collaborating and joining together your projects, as they are so similar, and take the best features from both.

  2. 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!

    1. Welcome and looking forward to having a look at the theme you created. Would be nice if you and Zhen considered collaborating and create one single version of Foundation for WordPress, incorporating the best features from both. Just an idea.

  3. 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

    1. Welcome Saqib, at the moment people are still getting used to the new idea of responsive design. The big brands and blogs are all going responsive, however it will take some time for the smaller clients to start realising the benefits of such designs. I definitely recommend you try it out for some personal projects, as it won’t be long before you’ll be getting clients asking for responsive conversions. Of course there is also more work for the designer, as he has to design 4 variations, but the good designers will appreciate this new technology and jump on the bandwagon too.

      As for frameworks that are not yet responsive but provide lots of WP functionality, I recommend Genesis, Hybrid by Justin Tadlock, and of course the original Starkers theme.

  4. 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. 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).

    1. Hi Pieter, I agree with you, there are multiple approaches one can take when designing a theme. Of course your approach gives you the most control, for people who would like to have something more substantial to start off with, the frameworks above are ideal. Then there are others who would opt for going further and using something like Genesis, possibly modified through a child theme.

      I think it’s great to have so many options, and can help in the learning process. For those who are starting out, I’d recommend downloading one of the more beefed-up frameworks to have a reference point, but then try to build their own thing from something like Roots.

      Thanks for sharing your approach Pieter!

      1. You’re welcome. To be correct (since my previous post can be misinterpreted): I don’t develop the Roots theme (http://www.rootstheme.com/), I just created a stripped down fork of it for my own development.

        The problem with a lot of frameworks is that you don’t know exactly how the framework is built (due to the difficult structure). It can use functions that are excessive hacks to the working of WP that may give problems in future updating or may be limiting within some time.

        I’ve found my thing in Roots (well… Somehow in my personal modded version).
        It would be cool to see a comparison between (some of) the frameworks with their functions (in a table view). That would be an even better post than this one ;).

        1. I’m reading more about Roots, I love the WP tweaks it has, I also see that it has Foundation in built. That’s really cool as I’m really digging Foundation. So Roots seems to be the right combination of WP tweaks with the layout offered by Foundation.

  6. 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?

  7. 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 🙂

  8. 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

    1. I would use a starter theme, something like TwentyEleven would be a great theme to start modifying and learning as it is very well built. Some frameworks are more of a collection of functions you can use, while starter themes give you an html and css skeleton to modify.

      You can use Thematic to build your own custom parent theme, however if you want to build a theme that can be automatically updated when new versions of Thematic are released, you would need to make a child theme.

  9. 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

Your email address will not be published. Required fields are marked *

The Beginner’s Handbook
From an introduction on how WordPress works to our recommendations on products and services.
👋 Hey there! We're Gaby and Mark
Every week we share tutorials and genuine reviews of WordPress products and services in our newsletter.
Thousands of people read it!
We’d love for you to join.
We’d love for you to join. Here’s what you’ll be getting:

A single weekly email directly to your inbox.