Skip directly to content

Drupal Responsive Theming Basics

rteijeiro's picture
on Fri, 10/05/2012 - 19:41

In this post I will try to explain some basics about Drupal Responsive Theming.

I am using the highly configurable Omega theme for responsive theming in Drupal because it has both XHTML and HTML5 starter kits based in fully responsive 960 grid system.

The first step to develop our responsive theme is to download the Omega theme and the Omega Tools module. It will be easily done with drush:

drush dl omega omega_tools

And also we can enable the theme and the module with drush:

drush en omega omega_tools

The next step is to create our subtheme of Omega because we don't want to change the base theme itself. If we work with the base theme all changes made will be lost when we update the base theme. So we will work with our Omega subtheme. Thanks to the Omega Tools module we can create a HTML5 Omega subtheme, enable it and set it as default theme with drush in a few seconds:

drush omega-subtheme <theme-name>
  --machine_name=<theme-machine-name>
  --starterkit=starterkit_omega_html5
  --enable
  --set-default

Note: Don't forget to replace the theme name values with your preferred values.

Now we can start to make some changes and customize the subtheme preserving the Omega base theme functionalities also when updated.

We must consider that the Omega theme is designed following the mobile first theme design patterns. It means that we must design our mobile theme first and then design the following themes for other devices and screen dimensions. For this purpose, Omega theme bring us some useful css style sheets:

global.css

By default this is the only style sheet loaded for the mobile version of your site. Does not use the 960 grid system for its layout, only provides a linearized view of your site's content.

yourtheme-alpha-default.css

Loaded for all layouts using the alpha grid (i.e. not the mobile layout). By default the alpha grid is applied when the device width is at least 740px wide.

yourtheme-alpha-default-narrow.css

Loaded for all layouts using the alpha grid. This style sheet applies when the device width is between 740px and 800px and the device orientation is landscape.

yourtheme-alpha-default-normal.css

By default this style sheet will be loaded fro the normal and wide layouts. It applies when the device width is between 980px and 1024px and the device orientation is landscape.

yourtheme-alpha-default-wide.css

By default this style sheet will apply only to the widescreen layout. It applies when the device width is 1220px or greater.

So, usually you have to start to create the mobile theme design in the global.css file and the design for wider devices in the other style sheets.

For example, you need to load two different image and font sizes for the mobile and desktop theme versions. Then, you should add the following lines to the global.css style sheet:

/* global.css */

h1.page-title {
  font-size: 12px;
}

#logo {
  background: url('logo_mobile.png') no-repeat top left;
}

This code fits the font size of the page titles to 12 pixels and loads a small logo image for the mobile version of your theme.

/* yourtheme-alpha-default-normal.css */

h1.page-title {
  font-size: 24px;
}

#logo {
  background: url('logo.png') no-repeat top left;
}

This code fits the font size of the page titles to 24 pixels and loads a greater logo image for the desktop version of your theme.

Now you can resize the browser window or test your theme in different screen sizes and look that this changes applies automatically.

In later post we will deep in more responsive theming techniques.

 

Comments

Rick's picture

The title of the article lead people to think it's a generic discussion of responsive theming in Drupal, but it's instead an Omega-specific solution.  Other base themes in Drupal can offer responsive theming as well such as Adaptivetheme :

http://drupal.org/project/adaptivetheme

 

rteijeiro's picture

It's true.

I have in mind to write more posts about responsive theming with Omega Theme and also with Adaptive Theme that looks a great theme too ;)

Thank you for your comment.

Post new comment