11 Useful Drupal Theme Frameworks You Might Not Have Seen
This post is part of series we’re writing on more advanced Drupal themes. In an earlier post we introduced Responsive Web Design in Drupal, focusing closely on the Adaptive Theme framework. We also covered the very popular Omega framework.
Those are two of some of the most commonly Drupal’s theme frameworks along with others such as Zen, Fusion and Tao. However, there are many more.
Out of the 25 most popular themes on Drupal.org, 17 of the most popular are either frameworks or sub-themes that sit on top of a framework. That’s how most Drupal themes get designed. In this tutorial we’re going to introduce you to some of the less commonly used theme frameworks. None of these appear on the frontpage of http://drupal.org/project/themes.
A note before we begin: As we explained in the Responsive Web Design in Drupal post, frameworks arrive mostly undesigned. These frameworks have no styling beyond the bare minimum. Instead, these frameworks provide the tools that an experienced designer can use to build great sites.
These frameworks distinguish themselves by having particular modules or other functionality, making it easier to build or use specific applications. Many of these frameworks are more than just a theme so they also depend on other modules. For example Arctica depends on Skinr for layout management and Arctica Nitro to enhance the theme settings configuraton.
Be sure that you visit the project page for each of these and read carefully before you start working with them.
1) Responsive HTML5 Boilerplate
This theme uses a 24 column adaptive fluid grid and includes media queries and stylesheets for mobile devices. The plan here is to prototype an adaptive design that changes in response to the viewport. The initial media queries implementation is based on Andy Clarke’s Responsive Boilerplate. It will work as a starter theme for a responsive design, as does the rest of the list. You can download Responsive HTML5 Boilerplate from http://drupal.org/project/html5_boilerplate.
2) Arti
Arti is a minimal theme that leverages Arctica base theme for most of its functionality. Arti is a great theme if you need a strong grid layout with powerful typography and minimalist styling on nodes, comments and menus. If you need a clean Drupal theme, a minimal Drupal theme, or just something non-intrusive to help whip up a mini site, Arti is a great choice. And it’s a responsive theme so it will look great on mobile devices too. You can download Arti from http://drupal.org/project/arti.
3) Doune
Responsive HTML5 base theme using the Skeleton CSS grid system. You can download Doune from http://drupal.org/project/doune.
4) Detamo
The theme is based on the 960gs grid and includes push/pull and prefix/suffix classes. The desktop grid has 12 columns, the tablet grid 8 and the mobile grid 4. Each region can be defined in the page template to occupy a chosen number of columns for each of the grids. For example a region may be 3 columns on the desktop layout (25% of the width), 4 columns on the tablet grid (50% of the width) and 4 columns on the mobile layout (100% of the width). You can view an example by clicking here. This is based on the Domicile theme designed by Betty Biesenthal. Another example can be seen here and is based on the 960 Robots theme. You can download Detamo from http://drupal.org/project/detamo.
5) Arctica
Artica is your theme of choice if you want an easy interface to manage responsive layouts, to optimize the experience for mobile and tablet as well as big-screen users. Arctica is a clean and fast base theme with only the features you need for modern theme development. If you need a base that also provides interactive jQuery features: The 1.0 release of Tundra, is a base theme that subthemes Arctica to extend its features. This means that you can subtheme Tundra and the hierarchy will be: Arctica > Tundra > YourTheme. You can download Artica from http://drupal.org/project/arctica.
6) Fluid Baseline Grid
The Fluid Baseline Grid (FBG) system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability. You can finally have your cake and eat it too, all while making awesome websites. You can download FBG from http://drupal.org/project/fbg.
7) Versatile
Versatile is a base theme suitable for use with Panels Everywhere. It is targeted at users who want to use Panels Everywhere and a base theme but does not want to be restricted by a grid system such as the one used in Precision.
Versatile ships with 6 different layouts including a site template designed to cover most of the use cases. It’s easy to change the column, and even the total page, width by overriding the default’s in your own theme. Also included is 3 different panel styles including a version of the default No style plugin that does not output the
Versatile ships with three different styles that you can use.
- Versatile Default – A modification of the default No style plugin without panels separators.
- Versatile Naked with title – Display the pane with no wrapping markup and include the title wrapped in a element of your choice.
- Versatile Tag – Wrap the content and/or the title of a pane in any HTML element including HTML5 elements (since 7.x-1.3).
You can download Versatile from http://drupal.org/project/versatile.
8) BidDaddy
BigDaddy aims to give you an optimal start with clean rendered HTML and CSS output that is fully Web standards compliant. This framework is particularly well commented and structured to get first-time users up to speed quickly. You can download BidDaddy from http://drupal.org/project/bigdaddy.
9) Sasson
Sasson is a powerful base theme intended for advanced drupal theming, aiming at bringing the fun back to theming. it is a collection of many open source goodies combined together. It includes Sass & Compass framework. There are no extra requirements, simply enable and start writing sass/scss. It comes with a ready made sub-theme. just copy, rename, and start theming. You can download Sasson from http://drupal.org/project/sasson.
10) Plink
Plink is a starter theme for developers looking for modern browser advantages while still supporting legacy browsers. Plink will offer a number of configuration options that will allow developers to rapidly develop responsive HTML5 themes and mobile counterparts. Plink is your theme if you need a solid starter theme for modern desktop browsers, if you need responsive layouts for multiple screen resolutions and mobile devices, and if you need a quick mobile optimized theme for smartphones. There are three parts included in the download. Pling base them, MYTHEME (the web version) MYTHEMEMOBILE ( the mobile version), which you can use as starter themes for your own designs. You can download Plink from http://drupal.org/project/plink.
11) HTML5 Base
The HTML5 Base theme is designed to go with HTML5 Tools (http://drupal.org/project/html5_tools), to override Drupal’s default HTML markup and give you a base of HTML5 on which to start instead. It is a lightweight and simple base theme. You can use it as a parent theme, or rename it and use it as a codebase on which to create your own custom theme.
With dozens of .tpl files, HTML5 Base can help you find and alter the HTML that you can alter from inside theme .tpl files. It also includes a lot of great 2011 best-practices for creating a responsive, mobile-first website (< NOTE: it will soon. Doesn’t yet).
This project is still under heavy construction. This is a great place to start creating your own HTML5 theme, but it’s far from a finished product yet. It does not get you all the way there. You can download HTML5 Base from http://drupal.org/project/html5_base.
Thanks for this post, very useful information, this is something I was looking for.
Very excellent list here, I’ve been scouring for the longest time for different frameworks to start with and found a few new ones here I never heard of that I’ll be trying. Thanks!
How about “TemplateToaster”
Thanks for the information
You may also like to try this framework name TemplateToaster. Best for building Drupal based themes without caring much about coding.