Drupal Responsive Theming Basics
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.