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.
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.
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
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
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.
- live demo
- download the package (2.2Mb, .zip)
- release on the developer’s site (with documentation in English and in German)
- Documentation PDF file (in English)
- Installation Video Tutorials
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.
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
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.
- Built Around the 320 & Up HTML5 Boilerplate Extension
- Insanely Detailed & Organized CSS File
- Clean Header & Footer for Optimized Speed
- HTML5 Goodness
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:
- Ethan Marcotte’s original article on A List Apart
- A whole book dedicated to Responsive Web Design
- A collection of sites using media queries
- The 1140px responsive CSS grid
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.