Propeople Blog

A regular dose of fresh news, events, products, Drupal development resources and more.

November 29, 2012

Responsive Drupal AdaptiveTheme. How do they do it?

When people start talking about responsive themes in Drupal, AdaptiveTheme is usually one of the top listed topic of discussion. But how it actually does responsive layouts? In this article I would like to take a look at internals from both - UI and code perspective.

Little disclaimer: I am a developer. I can write CSS code, but I usually don't. But the question of selecting base theme for the project is one of the most painful for me, that is why I try to understand how the theme works.

AdaptiveTheme (AT) projects ships with several themes at once: at_core, at_admin and at_subtheme. I have enabled at_core and at_subtheme (set as default). AT theme uses SASS and Compass for generating CSS files, so you can take advantage of this building your styles.

Out of box theme has following breakpoints for responsiveness:

  • Standard (only screen and (min-width:1025px))
  • Landscape tablet (only screen and (min-width:769px) and (max-width:1024px))
  • Portrait tablet (only screen and (min-width:481px) and (max-width:768px))
  • Landscape smartphone (only screen and (min-width:321px) and (max-width:480px))
  • Portrait smartphone (only screen and (max-width:320px))

So the theme uses “stacked” model of media queries (css files do not overwrite styles of each other). In development mode theme adds separate file per screen type. But you also have separate file responsive.custom.css that should have styles related to layouts that should be applied to all (if you don't specify otherwise) layouts. This file has nice documentation about how to implement styles that apply on some of the screen types. For example: /* * Smartphone sizes and up */ /* @media only screen and (min-width: 320px) {} */

Regions layouts
By default the theme has 14 regions. In the theme settings we can set the sizes and layout of the sidebars, that is a really amazing thing. And we set them per screen type as well. So we can choose how our layout will look on different screens. Like on the screenshot below:

Under the hood these layouts are special plugins (Page Layout Plugin). They are very nicely documented inline and if you would like to build your own page layout plugin, just take a look at at_core/layouts/core/_README.txt for some notes.

We love panels! AT has a very nice responsive layouts out of box. In the theme settings for each of AT responsive panels layouts we can choose how layout will look. For example here is a screenshot of the 3 columns layouts for Standard screen size:


I have also experimented with using AT responsive layouts in mini-panels and they work very nice. So we can build nested layouts that will follow same rules when reaching different screen sizes.

Under the hood after we save theme settings separate file with CSS being generated and saved to the disc. You can find the code that generates the file in at_core/inc/forms/ The CSS file that reflects your “settings” can be placed in different locations (controlled in settings as well). By default it is saved in sites/default/files/adaptivetheme/adaptivetheme_subtheme_files/.

This part of the settings can enable various different fixes for browsers like CSS round corners for IE6-7, HTML5 support for IE6-8, Scalefix for iOS.

Metatags and Debugging
Theme settings also allow to set metatags for mobile devices and show regions, screen size for debugging purposes.

Advanced settings
There are a LOT of advanced settings can be enabled in the theme. They are related to different styling of different elements. For example we can set styles (fonts, sizes) of the headings, menus, different titles etc. We can set floating of the image fields in the node teaser of full view. There are too many settings to list them here. I would recommend to take a look at them before writing any CSS for your sub-theme. Also we can control from theme settings what core CSS files to unset. There is integration with Browsecap module to unset regions on mobile devices.

Template overrides
By default AT comes with plenty of template overrides. They are located at at_core/templates and they have a lot of inline documentation. So it is definitively good place to look at before you start overriding template files.

Code organization
I am very impressed how well code is separated between different files in AT. I found it very convenient and after some time it becomes very easy to remember where to look for what functionality in the theme. There is even a file recommended for writing your own custom CSS code (at_subtheme/css/global.styles.css) with a lot of placeholders that dictates you the structure of your code. Plenty of inline documentation is available in all files.

I found research of AT very exciting. This theme really sets standards very high and you get the feeling that it is very established theme after taking a look at its code. After this research, the idea of building a theme from scratch sounds to me really like building site with plain PHP without using any framework or CMS system.

0 Responses to this post