An Introduction to Responsive Themes in Drupal
It’s hard to miss the word “Responsive” when looking at Drupal themes these days.
What does it mean? “Responsive” design means that your theme is flexible enough to look good on any device. There is no need to create a separate theme or even a separate subdomain or site. One theme can look good on a large desktop, your tablet and your mobile phone.
In this tutorial we’re going to use one particular example to show you how Responsive design works with Drupal sites.
Stay tuned for Part 2 of this tutorial next week when we delve into this topic in even more detail.
Themes, Sub-themes and Sub-sub-themes
Browse around the themes area on Drupal.org and you might bump into designs like these:
A year or two ago, you would have been able to download any of these, install them and use them. However, in 2012, you’ll need to look a little more closely. All of these are listed as sub-themes. That means that they build on top of another base theme or framework. In this case, the base theme or framework is called Adaptivetheme and it is required to run them all.
So far so good. Now instead of installing just one theme, you’ll need to install two.
However, in this new world, sometimes you might even need three themes. Footheme is an example of a what you could call a sub-sub-theme. Pixture Reloaded, AT Commerce, Corolla, and Sky are base themes for Footheme. To use Footheme, you need to install Adaptivetheme, one of the other sub-themes, and finally Footheme itself.
Getting Started: Install AdaptiveTheme
Adaptivetheme is great place to start investigating these powerful new Drupal design features.
To get started, go ahead and install Adaptivetheme as you would any normal theme. However you don’t enable it or make it the default for your site. It is simply enough to have it installed.
If you do enable it, all you will see it a stripped down template with only the default content and no graphics.
To make Adaptivetheme work, you will need to use a sub-theme (or even a sub-sub-theme!). We’re going to show you some Adaptivetheme subtheme examples below. Now that you have Adapativetheme installed, go ahead and enable these sub-themes as you would any normal theme.
Please note, when you’re installing, match version for version with the base theme, for example:
- If you install Adaptivetheme 7.x-2.x then use Pixture Reloaded 7.x-2.x
- If you install Adaptivetheme 7.x-1.x then use Pixture Reloaded 7.x-1.x
Testing Responsive Design Themes
To really test these theme demos that we link to below, you’ll need to view them using several different browser sizes. Try one of these two websites for easy testing:
Pixture Reloaded
Pixture Reloaded is a contributed re-colorable theme powered by Adaptivetheme and inherits all its features such as mobile support, powerful layout engine and more. The latest version of Pixture Reloaded (7.x-2.x) features much improved font settings including the addition of Google fonts and baked in mobile device support from the base Adaptivetheme.
AT Commerce
AT Commerce is fresh, professionally designed theme for eCommerce sites with baked in support for the Commerce module and Ubercart. Mobile eCommerce is supported using responsive design methods, so your online store will display and work across mobile channels without any extra work or effort. There are many settings that allow you to modify the design, color and layout – this gets you up and running quickly while allowing you to re-brand the design to your requirements without any coding.
Corolla
Corolla is a highly stylized colorable theme for Drupal 7 with many theme settings to allow you to completely customize the look and feel of your site. The new 7.x-2.x version is a sub-theme of Adaptivetheme which includes a powerful new responsive layout engine with full support for mobile devices. The 7.x-2.x version is a ground up rebuild and brings in a whole new level of Drupal theme features.
Sky
Sky is a minimal, center aligned, CSS-based, multi-column layout theme, with Color module support that uses HTML5 and CSS3. This newest version fully supports mobile devices using modern responsive design methods.
Footheme
Footheme is the one that we joking referred to as a sub-sub-theme. Out of the box this theme is configured to work with Corolla. You will need to make some small adjustments if using Sky, Pixture Reloaded or AT Commerce.
Memento
Memento is the first commercial theme in this list and is sold by AdaptiveTheme.com, the designers of the original Adaptivetheme. Memento ships with three color schemes and has full mobile browser support – including iPhone, iPad and Android devices. Click here to purchase.
How to create new theme via Bootstrap.. ?
Blue Crystal manufactures a wide range of products, we are into, Manufacturer of Crystal Trophy, Memento Corporate Gifts, gift manufacturers in bangalore, 3D Laser Engrave, UV print on Pen, UV print on wood ect
for more info
[url=http://www.bluecrystals.in]http://www.bluecrystals.in[/url]