Responsive Themes

Responsive Frameworks, Themes

Published

February 13, 2013

12 Comments

It seems almost every other theme that I have seen lately has a responsive design and this is probably going to be the year where it really becomes a staple in our industry.

I really would like to talk about the different options and hear from theme developers out there what you are doing: Are you using a responsive framework, or are you rolling your own with media queries?

There are quite a few frameworks and responsive grids out there, but I just want to briefly talk about the few of the top players.

The More Popular Responsive Frameworks

Bootstrap

Bootstrap is one of the most popular frameworks out there at the moment. It was created by a couple former Twitter employees who have recently left to focus more time and attention on Bootstrap. It includes a responsive grid that has 12 columns (span) and they can be fluid and nested.

A great feature with Bootstrap is that you can easily customize things like the number of columns, gutter widths, and other things quickly using LESS.

Not only does Bootstrap have the responsive grid, but it has a number of great components like navs, buttons, alerts, and quite a few great JavaScript plugins. A couple of themes that are using Bootstrap are Standard Theme, Bootstrap-WP, and WordPress Bootstrap.

Foundation

Foundation is another framework that is really popular as well. It was created by ZURB, who has a number of awesome projects. It too has a responsive grid and has 12 columns (col) that can also be nested. I know quite a few designers that prefer Foundation and it uses SASS to compile it’s CSS.

It also has a number of great components like navs, buttons, alerts, and a number of JavaScript plugins. A couple themes that are using Foundation are WP-Foundation and Base Station.

Media Queries

You don’t have to use a framework to make sure your site is responsive. You can pretty easily roll your own responsive grid using CSS and media queries. I know some that prefer going this route due it being lighter weight and you can have more control more easily as well.

A few themes that are doing this are LESS, Simple Photo, and Tethered.

Twenty Twelve Theme

If you have updated to WordPress 3.5 or downloaded the new Twenty Twelve theme, you already have a responsive theme ready for you. Twenty Twelve is a simple, responsive theme and can very easily customized by creating a child theme.

Is your theme responsive? If so, what are you using to accomplish this?

There are 12 comments

February 13, 2013 #

Nick

I’ve been using Skeleton (http://themes.simplethemes.com/skeleton/) based on getskeleton.com css framework.

I mainly picked Skeleton due to the semantics of the class names, much easier for me to remember than what Bootstrap does.
- February 13, 2013 #
  
  Jason Bradley
  
  Nicely done! I haven’t heard of Skeleton before. Thanks for the share!
February 13, 2013 #

Jeremy Green

I like using the Canvas theme from WooThemes and creating child themes off of it.
- February 13, 2013 #
  
  Jason Bradley
  
  I have seen quite a few people who build child themes and plugins specifically for Canvas Theme. I’m a major fan of child theming myself as well. It’s pretty awesome how quickly you can put something together when you really know the parent theme and its structure.
February 13, 2013 #

Paul

I just released a theme based on Hybrid and Foundation, check it out:

http://spine.paulwp.com/
- February 13, 2013 #
  
  Jason Bradley
  
  Sweet! I’m more of a Bootstrap fan myself, but realizing I need to dig into Foundation more as well. Good stuff!
February 13, 2013 #

John

I would love to spend more time with frameworks, but the sites I design just don’t allow for it. Bootstrap is amazing, and I’ve used skeleton before.
- February 14, 2013 #
  
  Jason Bradley
  
  I would encourage you to try them out. I have seen some other sites just use the navs and dropdown JavaScript. It’s great because you can easily customize Bootsrap to include just those few things. I have also used their color palettes before as well for other projects. There’s some great design patterns in those frameworks too. Don’t reinvent the wheel if you don’t have to 😉
February 14, 2013 #

Steven Slack

I just started a project with the Foundation framework. I also thought I’d point out this resource: http://themes.required.ch/ I found it a huge head start for a project I needed to get done in a timely manner. It is using the Foundation framework from Zurb and is already incorporated into WordPress. To work with it they created a starter theme (as a child theme) as well as a suit of plugins for added functionality. Support is great and they roll out updates as well.

I have never worked with Foundation before. I usually used underscores.me – more of a starter theme. But this is great for a huge head start!! Spread the word.
- February 14, 2013 #
  
  Jason Bradley
  
  That is flipping sweet! I can’t tell everyone enough times how much I enjoy child theming and this gets me excited taking a look at this. Thanks for this awesome share!
  - February 18, 2013 #
    
    Steven Slack
    
    I also just heard from one of the head developers ( Silvan Hagen ) on this project and they plan to release an auto update version for required+ Foundation and the Shortcode Plugins around April.
    - February 18, 2013 #
      
      Jason Bradley
      
      Nice! Keep us updated!