Profile picture for user admin
Daniel Sipos
30 Jul 2013

After having posted some articles showcasing a number of nice but premium responsive Drupal themes, I decided it’s time to again return to the community and highlight some of the work that’s been contributed for free. Although more noteworthy free themes have propped up since my last post about free responsive themes, they will not be the focus of this article. It will also not include base themes that are not using a pre-existent framework - I leave those for a separate article.

Instead, I will show you 6 available responsive frontend frameworks that have been integrated with Drupal. Some of them maybe you know, others not, but in any case, they are powerful base themes from which you can start developing and designing your custom responsive Drupal themes. So let’s see what they are.

Bootstrap

Twitter’s Bootstrap is one of the most famous frontend framework around. I recently read it now powers 1% of the web (which is quite a lot) and is indeed very powerful and flexible. It was only natural that someone take the initiative and develop a base theme for Drupal that uses this framework. And by the by, I designed WebOmelette.com starting from Bootstrap.

Check it out here.

ZURB Foundation

Another powerful frontend framework you might have heard about, ZURB Foundation is widely used and works great. It is very flexible, has many features and boasts to be the "most advanced responsive front-end framework in the world".

The integration with Drupal is mainly for Drupal 7 but work is already underway for Drupal 8 (there is already a dev version available for that).

Check it out here.

Boilerplate

The Boilerplate Drupal base theme is based on the well known HTML5 Boilerplate frontend template. It is a popular framework used by many websites - such as Google, Microsoft or NASA. The Drupal theme that uses it is sponsored by Metal Toad and offers many of its powerful features to be used for your own custom theme.

Check it out here.

Responsive Skeleton

The Responsive Skeleton base theme is built around the Skeleton boilerplate. The latter is a lean collection of css rules that aims to provide a powerful responsive grid with only a basic UI but that is able to adapt to your design whatever that might be.

Although there are a couple of other Drupal themes that are based on the Skeleton boilerplate, Responsive Skeleton is meant to provide a base theme that makes it possible to use Skeleton for developing a custom theme using the Drupal coding standards.

Check it out here.

Fluid Baseline Grid (FBG)

This Drupal base theme is built for using the Fluid Baseline Grid development kit. The latter is typography oriented but combines responsive grids and a mobile-first approach into a solid foundation that you can deploy quickly.

The Drupal theme is available for both Drupal 7 and 6 and seeks to integrate the features available in the FBG framework.

Check it out here.

Square Grid

This base theme is built for using the mobile first Square Grid css framework. One of its defining features is the 35 equal column widths on which it is based.

Check out the Drupal base theme here.

Conclusion

So there you have it: 6 responsive frontend frameworks integrated with a Drupal base theme to be used for building custom themes. I believe they are a good idea because they give developers an easy starting point and some basic features they don’t need to worry about. I hope you give them a try and find them useful.

Profile picture for user admin

Daniel Sipos

CEO @ Web Omelette

Danny founded WEBOMELETTE in 2012 as a passion project, mostly writing about Drupal problems he faced day to day, as well as about new technologies and things that he thought other developers would find useful. Now he now manages a team of developers and designers, delivering quality products that make businesses successful.

Contact us

Comments

JurriaanRoelofs 30 Jul 2013 16:09

Nice list but all of them are

Nice list but all of them are so limiting to your grid design. They're fine if you're building simple designs but for a true custom design I really want to start without any off the shelve grids and assumptions about responsive device handling. Susy is still my favorite tool if I have the time for proper grid design and zen-grids is also a nice up-and-comer but Zen's out-of-the-flow grid unit behavior makes me uneasy.

JurriaanRoelofs 30 Jul 2013 16:12

boiler

oh I see you use boilerplate as well, that is not a choice that limits your grid design, I usually use boilerplate+Susy as a base.

Web Design Company Delhi 31 Jul 2013 08:47

nice collection

This is a very nice collection of 6 popular free responsive frameworks. After working with 3 of them, I am sure rest will also work like charm for our Drupal powered projects.

Daniel Sipos 31 Jul 2013 13:12

Yes, as far as I know, it is

Yes, as far as I know, it is not based on a preexisting frontend framework. I mentioned this in the beginning of the article.

Dajia Dim 31 Jul 2013 13:06

nice article!

I've worked with bootstrap on building custom themes for sites developed on Drupal. Really, it's a framework that has already done things for you, so you don't have to worry about. It's cool. I will try the rest of them for sure, it's nice to have many options in your pocket.

nic 01 Aug 2013 03:08

Open Framework from Stanford

Open Framework from Stanford isn't hosted on drupal.org, but it's a nice responsive theme, based on Twitter Bootstrap: https://openframework.stanford.edu/

Jason 01 Aug 2013 16:36

Need to upgrade

We use Zen for our subtheme for our Drupal 6 sites and I've used Bootstrap for non-Drupal projects and love it. Got excited about a Drupal theme built on Bootstrap, but was disappointed to see no version for 6. Yet another reason I need to upgrade our sites... wish it weren't so daunting (lots of custom modules).

Daniel Sipos 01 Aug 2013 16:31

In reply to by Jason (not verified)

I know, the curse of custom

I know, the curse of custom modules - you have to do all the work yourself, no one in the community to do it for you. But sometimes it is worth it I suppose :)

Good luck with your projects!

Kathy 01 Aug 2013 19:18

Singularity.gs

Aurora ( https://drupal.org/project/aurora ) is based on singularity.gs and looks promising.

pepperstreet 02 Aug 2013 01:52

It's not all about grids... and URL tip

One thing worth to mention is the size and features of such frameworks. IMHO, its not all about the grid. On first sight, they might do the same thing, but do you really need to load unnecessary stuff like .JS scripts and premade styling?

Apart from the grid and responsiveness,
Bootstrap and Foundation come with a lot of UI/form elements. Which is really helpful, if you need to show a cross-browser UI. Good for backend or frontend stuff. So, if you have a demand for forms and UI's... have a look at Bootstrap (and forks!), and Foundation.

Also worth to think of: Nested grids and possible mobile layouts
IMHO, a basic responsive top-to-bottom-stack is not enough! Unfortunately, that is the default for many responsive grids... also for Bootstrap v2! Foundation offers more in this regard. But BS v3 has finally some improvements. (Though, i have to admit that I am not a fan of the new class naming scheme, readability is getting worse with lots of classes).

Also important if you prefer one or the other: LESS vs SASS

URL Tip:
http://usablica.github.io/front-end-frameworks/compare.html

So, watch-out and have a second look on your framework of choice ;-)

makeonlineshop 08 Apr 2015 16:17

Responsive theme for Ubercart 2 Drupal 6 Ecommerce website ?

Responsive theme for Ubercart 2 Drupal 6 Ecommerce website ?

Hello, anybody has found a responsive theme for Ubercart 2 Drupal 6 ?

Or which theme would be the best to adapt for mobile ecommerce ?

Thank you for your help.

Grabby 10 Apr 2015 16:13

I'm facing the same problem,

I'm facing the same problem, but I think I'm going to bite the bullet and move to Drupal 7. For Drupal 6 your main option is Adaptive Theme, but it's going to take some adaptation! (I know)

makeonlineshop 11 Apr 2015 21:55

In reply to by Grabby (not verified)

Since Google threatened the whole world

Hello,

Since Google threatened the whole world I guess that many of us need a Drupal 6 mobile theme...

I manage too many websites for people and cannot upgrade them all to Drupal 7, and no other improvements are required, so I would really like to find a drupal 6 mobile theme.

Do you think that it is possible to start a theme based on adaptive for someone who has never done anything with css ?

Thank you so much.

Add new comment