Responsive Design and Drupal

I’m working with the responsive design side of Drupal now to prepare my site for mobile devices. Drupal utilizes responsive design at the theme level. This is the reason that I chose Adaptive Themes (AT) Core – it’s responsive out of the box. But there are still many considerations for approaching mobile devices.

This post will be a collection of links that I find useful for responsive design in the context of Drupal generally and AT specifically, starting with the wonderful readme by Jeff Burnz. – great blog on media queries and stacked v overlapping. – Excellenrt blog specifically about Media Queries and Drupal. – great vid from Lynda.

this is the readme from jeff burnz. I can’t attach .txt – WP doesn’t like that so here is the full text.

First read this about SASS, its very important!

There is more information regarding working with SASS in the SASS CSS folder
_README, however, you need to be aware that if you set Compass to watch the
SASS folder or any SCSS file in this theme it will OVERWRITE the CSS file/s in
your sub-themes CSS directory!

To prevent this ever happening you can delete the config.rb file in the
sub-theme root (unless you are actually planning on using SASS, in which case
you will want to keep it).
Working with Responsive Design in Adaptivetheme

The subtheme is designed to be “mobile first”. In short this means to
first load a set of global styles, the progressively add styles for larger
devices using media queries.

Its important to note that you do not have to follow a mobile first approach.
Adaptivetheme can support Desktop first approach as well, which means you will
progressively add styles to override things for mobile, rather than progressively
adding style for larger devices.

You can do both in Adaptivetheme – it’s merely a matter of where you place
the majority of your styles, and what theme settings you choose in the
Appearance settings for your sub-theme.

Lets examine the CSS file structure of Adaptivetheme and look at how each
file is loaded. From this you will be able to deduce what approach might work
for you, and where you should be placing your CSS.
Moible First or Desktop First – that is the Question!

Depending on your approach AT will load the stylesheets in a different order,
indeed it will load different stylesheets. You MUST make a conscious decision
which to use and set this in theme settings.

Look under CSS settings. By default AT is set to Mobile first, if you want to do
Desktop first you should change this setting.
Global Styles

The global styles do not target any specific device – they always load for all

There are two main global stylesheets:

– global.base.css
– global.styles.css

global.base.css – this holds a few imoportant declarations that should probably
not be removed, however you can modify them, such as gutter width and flexibile
image/media styles.

global.styles.css – includes a slighly modified normalize reset and many empty
selectors for elements and drupal classes and id’s. If you prefer you can delete
everything in global.styles.css and start with a clean slate.

The selectors are extensive and you should delete unused selectors before
going live to reduce CSS weight. You can use or a better way is
just use SASS, it does this for you.

Each file includes a lot of comments and documentation, please review each of
the global CSS files for more help.

If you are doing mobile first then you will probably keep things to a minimum
in these files. “Minimum” is relative, this might still be a lot of CSS,
never-the-less its worth keeping in mind the mobile view of the site, and
avoid writing CSS rules that are clearly for larger width devices.
Responsive Styles

Adaptivetheme 7.x-3.x has two “modes” – Development mode and Production mode.
Depending on what mode you are in the stylesheets will load differently.

Mode changes automatically depending on CSS aggregation settings. When CSS
aggregation is ON, the its in Production mode.

If you don’t know what CSS aggregation is, look here:

## Responsive Styles – Development mode

In Development mode (CSS aggregation OFF) the responsive stylesheets will load
in individual link elements with the media query in media attribute.

This allows them to load directly into the browser and you will see your CSS
changes immediately, as per normal CSS development.

There are five of these responsive stylesheets – one for each break point set
in the theme settings:

– responsive.smartphone.landscape.css
– responsive.smartphone.portrait.css
– responsive.tablet.landscape.css
– responsive.tablet.portrait.css
– responsive.desktop.css

Its important to know that these files DO NOT contain the media queries,
instead they load in the <link> elements media attribute – remember, these
files only load when in Development Mode.
## Responsive Styles – Production mode

When in production mode all the responsive stylesheets are aggregated into one
file and use embedded @media queries. AT Core will automatically aggregate
the CSS from each of the development mode stylesheets and wrap it in the right
media query. This reduces the number of HTTP requests from 5 to 1.

This file is always called:

– ThemeName.responsive.styles.css

You will find this file at:

~/[public files]/adaptivetheme/[ThemeName]/ThemeName.responsive.styles.css

NOTE: please see the section below titled “Relative Paths in Responsive Styles”.
## Important Note about CSS Aggregation and Responsive Stylesheets

Once you have CSS aggregation ON if you make changes to any responsive
stylesheet, you MUST re-save the theme settings AND clear the sites cache. AT
Core will re-write the saved files, then clearing the cache tells Drupal to
use the new file.
## Relative Paths in Responsive Stylesheets

When CSS aggregation is ON AT Core will load the production version of your
responsive styles (see above “Production mode”). this file is loading from
Public Files and not from within your theme so special handling is required for
relative assets – AT Core will do this for you.

AT Core will automatically re-write the relative paths to the files so they
are relative to the site root. This is the same functionality as Drupal core
CSS aggregation feature, so paths are not broken.

If you use absolute paths these will not be altered.
Overlapping/Custom Media queries

By default the media queries in Adaptivetheme are “stacked”, meaning they do
not overlap. This makes it very easy to target one set of device width and not
have those styles “leak” over into others. However it can also mean you may
need to duplicate CSS that you would rather have cascade.

To use custom media queries the sub-theme includes a special file called:


To enable the use of this file in your theme see your theme settings:

Layout & General Settings > CSS > Custom Media Queries

This file has embedded media queries which means you MUST set them yourself.
Defaults are provided.

Allowing styles to cascade can result in a huge saving on total CSS weight and
speed up development.
Internet Explorer Styles and Scripts

AT can load conditional stylsheets and scripts from you sub-themes info file.

Please see – there are good docs and examples of
how to declare stylesheets and scripts for Internet Explorer.

Adaptivetheme also includes special conditional classes on the HTML element
which allow you to easily target styles at specific version of IE.

These are the classes you can use:

.iem7 (IE7 Mobile)
.lt-ie7 (less than IE7)
.lt-ie8 (less than IE8)
.lt-ie9 (less than IE9)

Use these if you only have a small number of overrides and do not want to load
a dedicated conditional stylesheet.

Ping me on Skype if you have life/death critical issues to report…

Skype: jmburnz

Otherwise support my work by joining my theme club, it really does fund my
contrib projects:

Or, you could get radical and file a support issue, even post a patch (which
makes me very happy):

Additional Drupal Search Resources

I am really surprised at the dearth of documentation on Search options/modules on So I am compiling a running list of different sites that have actual details on what you can do with Search and how best to achieve them. – Probably the best place for docs on Solr and Drupal, and all the mods that go with them. – Great one for those who want to use the out-of-the-box search_db backend. – One for Solr – which I believe I am going to end up using. – Installing Solr. GREAT TUTORIAL from LULLABOT – installing apache tomcat for Solr on Centos – Tomcat version – tomcat authentication – troubleshooting Solr – installing solr and drupal info

PHP Programming Frameworks

PHP Programming Frameworks

Make your PHP projects simpler with a development framework.

It is difficult to leverage Drupal to its full extent without actually learning the mechanics behind it – PHP. Since Drupal is a framework for Content Management, I decided to see if there might be a similar type of framework for PHP, the soul of Drupal. I discovered this great roundup on Wikipedia on development frameworks for many different programming languages. And here I discovered Yii. You can see from both sites that the Yii (Yes It Is) MVC (Model, View, Controller) framework scores better than the others, offering more features. And it is under the BSD license so the download is free! – This is another good resource, specifically for PHP.

So with the choice for Yii made, I decided to look for a book on the subject. I’ve had good luck with Packtpub before so I decided to check their web site to see if they offer anything on Yii. And lo and behold, they do.

I’ve been reading the book, working with the sample code and using Yii for a few weeks now and the book has been really helpful. The chapters navigate the development path of a real application. The book touches on every aspect that a real world development team will face in software production from user access control, issue management to production readiness. It also explores the Blueprint CSS framework, which allows the team to make the application look polished and refined.

The code examples are easy to use and well documented, allowing for a great learning experience even for a novice.

All in all, a great resource for those in software development for the web. Highly recommended.

Beginning a Blog in Drupal 7

I have been meaning to post this for the longest time and have kept forgetting it. This site is a great resource for Drupal and one that I found pretty useful when I was first starting out. And useful today too.

Learn By the Drop – Check these folks out. They published the pdf that I have linked that will walk you through your first blog, custom content creation and more. Worth reading if you are new to Drupal, or even of moderate experience, like I hope to be one day! 😉

Take a look. Here is the link to the PDF: Build your blog.