Drupal Theming

Here at Zoocha we take pride in every step of a website build. The frontend (or theming layer in Drupal-jargon) is what the user sees first, and it's what they will directly interact with. So it's critical to get this right and give the best user experience possible.

Process

We've created a set of rigorous in-house guidelines based on our experience working with previous projects and clients. This experience helps us shape the front end of the site from the ground up and achieve a minimum of AA compliance against the latest WCAG2.1 accessibility guidelines.

Architecture

Before a project starts we plan out the best approach for the theming. There are multiple steps ranging from which base theme (if any) to use, down to the detail of file / folder layouts for all our custom components. Modern front-end frameworks such as ReactJS, Vue and similar can also be considered for use.

Responsive Design

The landscape of the web is shifting more and more to mobile. It's now vital to build sites for mobiles, otherwise you're leaving out a huge potential chunk of viewers. At Zoocha we focus on a mobile-first design approach, concentrating on the less-capable devices first and adding functionality where there's support. This approach benefits over the traditional approach of building for desktop then removing things, by giving the a clean and smooth experience to all.

Progressive enhancement

All our sites our built with progressive enhancement in mind. This means that there's a base level of functionality which should work for everyone. The more advanced / exciting features are layered on top so newer browsers will get a more immersive experience, but no-one is left out

Browser testing

The joy of the web is its ubiquity, but this can also be a strain as there's a wide range of devices, platforms, and browsers that can be used to view a site. We use a suite of test machines and devices, as well as virtual machines to test across all the major platforms and browsers to give a consistent experience for all.

Base themes and sub themes.

The beauty of Drupal's theming system is the ability to 'build on the shoulders of giants'. This means that we can take a base theme, with generic styling and thoroughly tested integration with Drupal core and extend on top of that, leaving us to focus on the exciting things knowing there's a solid platform to rely on.

Some of the base themes we use are listed below (the decision is made based upon the project's requirements / the design):

• Bootstrap
• Omega
• Stark (for completely custom projects)

Modules

Being able to call on a common set of modules helps us speed up development and ensure a more robust site. Some of these modules are:

• Fences - provides easy customisable markup for fields
• Flexslider for responsive, mobile-friendly slideshows and carousel
• Theme Developer - Described as 'Firebug for Drupal theming' massively speeds up development and debugging time
• Style Guide is a great start for any project. It displays all the HTML elements and allows you to theme these first, to help with consistency across the site

Some other tools we use to streamline our process (not Drupal-specific) include:

• Linting tools (CSSLint and JSHint) to ensure our code conforms to the standards and guidelines we've created
• CSS Preprocessors such as LESS and SASS to speed up development and keep things tidy.
• Grunt to tie all our tools together