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.
Modules
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.
- Fences ‐ Provides a way to choose the html element for any given field and remove some of the div-itus.
https://www.drupal.org/project/fences - Breakpoints ‐ Used in conjunction with the Picture module allows the set up of image sizes for each breakpoint.
https://www.drupal.org/project/breakpoints - Picture ‐ Allows the use of either image sizes (srcsets) or the picture element to assign image sizes to various breakpoints.
https://www.drupal.org/project/picture - WYSIWYG code magic ‐ Retains the code formatting when viewing source in the wysiwyg using tinymce.
https://www.drupal.org/project/wysiwyg_codemagic - Block class ‐ Allows you to add a class to blocks on the block edit screen.
https://www.drupal.org/project/block_class - Field formatter CSS class ‐ Allows site editors to assign classes to elements on the node edit/create screen.
https://www.drupal.org/project/field_formatter_css_class - Display Suite ‐ We don’t always use this, but one of the many things it does is allow you to assign id’s and classes to elements on the manage display screen.
https://www.drupal.org/project/ds - Fitvids ‐ Responsive video embeds.
https://www.drupal.org/project/fitvids - Content type extras ‐ Provides some useful settings for content types including tabs for permissions and path alias so the creation of a content type becomes a one stop shopping experience.
https://www.drupal.org/project/content_type_extras
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.
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.
