Responsive theming in Drupal 7 the GORGES way

July 7 2017

Over the years of building Drupal 7 sites we developed a routine method of theming that provided the basic components (spare base theme, modules for responsive images) that we could build on for doing a custom design.

Mothership Theme

After a bit of research we settled on the Mothership theme due to it's many options to remove the excess markup that Drupal usually spits out. With options to exclude core and module js and css and even move js files to the bottom of the page it provided some excellent tools to make Drupal a bit more lean and mean.


From there we start adding some modules that give us further control of the markup and make life easier in terms of content editing. Note that some of these modules are now part of Drupal 8 core and others only have a 7.x release.

With these modules in place you can reduce the overhead of the default markup and have the ability to add classes almost anywhere in the interface. It also allows non tech savvy site editors to add classes as well. Another place where we give site editors more control is by adding classes in the wysiwyg configuration admin/config/content/wysiwyg for tinymce. We usually add classes for buttons and special text formatting so our clients can add some stylish elements themselves.

Getting Sassy

I'm sure everyone knows about SASS already but an article about theming wouldn't be complete without mentioning how much we love SASS/SCSS. Being able to use variables, mixins and other programming logic in your css allows you to quickly make sweeping changes across your site for things such as colors and fonts etc.

Site editor tweaks

We like to create a separate menu for client editors so they only see the links that are relevant to what they need to do on the site. In addition, we add a link to submit a ticket directly into our project management software 24/7 in case they encounter an issue at a time when we are not open.

Written By
Sean Kennedy

Sean Kennedy

Designer / Developer