Drupal Technical

[Drupal] How to create a responsive Drupal theme easily?

Tintu.manuel | | 2 min read

Nowadays we can easily access internet in different devices such as mobile, tablet etc. So its necessary to make a website compatible with popular devices like iPhone, iPad etc. In Drupal, we have a simple method to make a website adapt to different devices. In this method we can convert a normal theme to responsive theme easily. To get this we have to modify the .info file and add the media query stylesheets in .info file. We will also have to add the responsive style rules to the separate media query stylesheets

See the example :

In this example The first three stylesheets contain common CSS for all layouts. And the remaining four stylesheets are added to make the website responsive. That means when our browser width/device width reaches to any prescribed width mentioned above, the corresponding stylesheet will be loading along with the global CSS.

In this .info file you can find the common stylesheets and conditional stylesheets.

name = responsivetheme
description = An example of using Media Queries in Drupal7 
screenshot = screenshot.png
package = Core
core = 7.x

stylesheets[all][] = css/reset.css
stylesheets[all][] = css/global-layout.css
stylesheets[all][] = css/global-style.css

stylesheets[(min-width: 480px)][] = css/480.css
stylesheets[(min-width: 720px)][] = css/720.css
stylesheets[(min-width: 960px)][] = css/960.css
stylesheets[(min-width: 1280px)][] = css/1280.css

regions[primarynav] = Primary Nav
regions[secondarymenu] = Secondary Menu
regions[leftsidemenu] = Left Side Menu
...

And it is necessery to change container width property in CSS files according to the device width in different stylesheets.

See the example :

In 480.css the maximum width of the outer container div would be 480px. This is so that the contents will fit in 480px and it is viewable in mobile devices.

.container {
  margin-left: auto;
  margin-right: auto;
  width: 480px;
}

But in 960.css the maximum width of the container div would be 960px. This is targeted at desktops.

.container {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

Like this we will have to change other settings that differ between the different layouts at the different widths. After making these changes clear the 'cache' from Drupal and change the browser width or check in different devices and you can see that when the browser width reaches any of these widths mentioned above, then the corresponding stylesheet gets loaded and the layout changes accordingly based on the CSS specified in the corresponding CSS file.

Using these conditional stylesheets we will be able to control the behavior of the Drupal theme for the different widths for which we design the theme for. Once you get that hang of this you will see that responsive design is not rocket science and it is pretty easy. If you are looking to get your next drupal website built using a responsive web design let us know

 

 

Related Topics