Drupal Responsive Theme Development Essay

As of July 2017, there are 1500+ themes registered with the Drupal project. The sheer number of choices makes the selection of a theme difficult for most newcomers to Drupal. Some Drupal themes are free while the rest are known as being premium, i.e., they are available for a fee. Sometimes you can save more money by investing in a paid theme, but this topic we’ll cover in another article.

This one lists the top 10 free Drupal themes, each of them in our opinion is a great choice for a beginning site builder.

Are you a Drupal newcomer? Use our learning guide to become a guru!

Best Free Drupal Themes: Selection criteria

The main question when compiling the list of our proposed themes was how to make the comparison fair and objective. After much discussion, we decided that a theme must satisfy the following basic criteria for it to be considered in the list of top 10 Drupal themes:

  1. It must be free.

  2. It must run on either Drupal 7 or Drupal 8 (or better, both).

  3. It must be actively maintained and developed.

  4. It must be covered by the Drupal security advisory policy.
    Coverage under the policy does not guarantee that a theme is free of vulnerabilities. Rather, it means that the theme has been reviewed for any publicly known vulnerabilities by the Drupal security team.

  5. It must be for a general purpose.
    Some Drupal themes are designed for specific industries, e.g., restaurant. For the purpose of this list, only general purpose themes are considered.

  6. It must be responsive.

A responsive theme adjusts its layout to accommodate different screen sizes and resolutions. This is a basic requirement for today's mobile platforms.

  1. It must run out-of-the-box.

There are themes, and there are theme frameworks (also known as base themes). A theme framework is like a blank canvas with tools which a theme developer uses to build a custom theme. The top 10 list only contains Drupal themes which one can use out-of-the-box as feature-complete themes.

In the course of conducting this study, it was observed that a small number of organizations have each generated a relatively large number of themes, albeit good ones, that are only marginally different. If an organization makes multiple but similar quality Drupal themes, only representative themes may be selected for inclusion in the following theme set. The individual or organization responsible for a theme is identified below in brackets.

Anyway, we have kept you in suspense for too long already. Based on the above criteria, the top 10 free Drupal themes are:

  • BlueMasters (by More than Themes)

  • Corporate Clean (with More than Themes)

  • Danland (by DanPros)

  • Business (by Devsaran)

  • Nexus (by Devsaran)

  • Zircon (by WeebPal)

  • Business Responsive Theme (by Zymphonies)

  • Drupal8 Zymphonies (by Zymphonies)

  • Fontfolio (by Marios Lublinski)

  • Integrity (by knackforge)

Below, we discuss each theme in more detail.

BlueMasters

BlueMasters is a popular WordPress theme that has been ported to the Drupal platform by More Than Themes. We recommend this theme, not just for its features only, but that it is maintained by More Than Themes, a solid well-reputed organization in the Drupal community. The theme supports a maximum layout of 12 regions. A region is the primary layout unit to which a component block can be placed. Therefore, the more regions a theme supports, the more customizable it is. With this Drupal theme, you can display a slideshow on the front page, and partition information into either 2 or 3 columns on a web page. In addition, you can organize and access your contents via multi-level drop-down menus. BlueMasters, however, is only available on Drupal 7.

Corporate Clean

Like BlueMasters, Corporate Clean is a theme ported to Drupal by More Than Themes. We recommend this theme because it offers a unique feature that is missing in many free Drupal themes, namely, a color scheme selector. Most free themes have a fixed color scheme which means that you cannot change the color of a button or the page background. With Corporate Clean, you can adjust the color of some screen elements. This theme supports 1-column, 2-column as well as 3-column layout. Multi-level drop-down menus and slideshows are also supported. The Corporate Clean theme only runs on Drupal 7.

Danland

We recommend Danland because, among the Drupal themes on this top 10 list, it gives you the most flexibility to fine tune the layout of your web page. Specifically, it supports a maximum of 26 regions, the highest number on the list. The layout can have 1, 2, or 3 columns. Danland runs on Drupal 6, 7, and 8.

Business

In terms of the major features, the Business theme is at par with other themes on the list. We recommend the theme because of the finer feature details. For example, the slideshow feature allows the display of up to 5 images. Note that some free Drupal themes only allow a maximum of 3. Also, the Business theme has a color module, which is missing in most free themes. You can specify one of 6 fixed colors for web components. The Business theme is available for Drupal 7 and 8. However, the Drupal 7 version is not responsive and is currently in maintenance mode only. The Drupal 8 version, on the other hand, is being actively developed and is fully responsive.

Nexus

Nexus is arguably the most visually appealing theme on the top 10 list. The clean design together with the solid support by Devsaran, its maintainer organization, put Nexus on the list. The theme runs on both Drupal 7 and 8 with the Drupal 8 version being a pre-release version only. The layout can have a maximum of 15 regions, which is average on the top 10 list. You can specify a 1-column or 2-column design on the layout. The slideshow feature supports a maximum of 3 images.

Zircon

If your Drupal website is rich in images, then you should definitely consider using Zircon as the theme. You will be delighted by its slideshow, slider, as well as carousel features. You can run Zircon on both Drupal 7 and 8. However, the current Drupal 8 version has remained as a release candidate since November 2015. The Zircon layout supports 18 regions in 3 columns.

Business Responsive

Not all themes on the top 10 list support Drupal 8. Even for those which do, some are in pre-release status only. If you are looking for a stable Drupal 8 theme, you should consider the Business Responsive theme which has reached the 1.0 stable release status. This theme supports 17 regions in 1-column, 2-column, or 3-column layouts. It also has a slider feature, but installing the feature requires some manual steps after installing the theme. This theme supports the use of social media icons for popular platforms such as Facebook, Twitter, Google+, LinkedIn, and Pinterest. You can install this theme on both Drupal 7 and 8.

Drupal8 Zymphonies

If you want a stable Drupal 8 theme that offers more bells and whistles than the Business Responsive theme, Drupal8 Zymphonies comes highly recommended. This theme is, fittingly, only available in Drupal 8. It shares many features with other themes on the top 10 list, such as multi-level menus and 1/2/3-column layout. It distinguishes itself by offering 22 regions for placing blocks, the second highest on the theme list. Also, you can customize the Zymphonies credit link, all supported social media links, and the title and description fields in the main banner.

Fontfolio

If your website is multilingual, you should definitely consider Fontfolio because it offers easy setup for links to web pages in all supported languages. Like BlueMasters, this theme is a popular WordPress theme that has been ported to Drupal. Fontfolio can run on both Drupal 7 and 8. Note that some existing features of the Drupal 7 version are still under development for the Drupal 8 version. Fontfolio supports a maximum of only 8 regions in its layout, the fewest on the list. Yet, overall, it is a simple but elegant Drupal theme that includes a 2-column responsive design.

Integrity

If you want a simple no-frills theme that just works out-of-the-box, Integrity may be your choice. It is a Drupal 8 only theme. Its feature set is, in general, at par with the rest of the themes. Integrity supports multi-level menus and slideshows that display up to 5 images. The layout includes a 3-column design. The theme has defined 17 regions into which Drupal blocks can be placed.

Summary & Conclusion

Drupal has a wealth of good free themes. Each of them is ideal for Drupal users who have relatively simple requirements and want to try something other than the default theme. If a free theme cannot fully satisfy your particular requirements, then you may want to use its premium alternative or even to hire a professional Drupal agency that can assist you with your needs.

Which theme do you like the most among our top 10 choices? Perhaps, you have your own favorite theme that is not on our list. What are the goals of your project and what kind of theme are you looking for? Share with us your thoughts in the comments section below!

Read more:How to Choose the Right Open Source CMS for Your Website (Infographic)

In 2010, Ethan Marcotte published his seminal article, “Responsive Web Design,” and the way we build web sites was forever changed. Although Drupal 7 came out at the beginning of 2011, there was nothing in core to support the themers who wanted to build responsive websites. By 2012, all of the popular base themes offered a stable release which included a responsive starting point. As of Drupal 8, the core themes, and the administrative interface, will be responsive – making Drupal usable at any viewport width.

The original tenets of responsive web design had three directives:

  1. Use a fluid grid to lay out page elements.
  2. Make images flexible, and responsive to their parent container.
  3. Use media queries to specify which styles should be assigned for any given viewport width.

In practice, it has been a lot more complicated to implement these guidelines so that they work across devices and are respectful of the slower connection speeds we often experience on mobile devices.

In this article we'll take a look at how to implement each of these three principles in your Drupal 8 themes. The article was written against Drupal 8.0-alpha13. Some things are likely to have changed between now and Drupal 8's official release. Where possible, I've noted where this might be the case.

Fluid Grids

Out of the box Drupal 8 does not provide any support for a universal fluid grid. It does, however, provide the cleanest, most semantic markup of any version of Drupal to date. Markup is almost entirely contained in template files, and the theme function has been virtually eliminated from core. All of these changes were accomplished by the team working to convert Drupal from PHPTemplate to Twig. As a result, it will be significantly easier to drop in your grid layout system of choice – whether it is custom built, or part of a framework such as Bootstrap or Foundation.

Working with a base theme is still, of course, an option for you. As of this writing, there are no base themes with a completely functional Drupal 8 release; however, a few have Drupal 8 branches if you'd like to help with their upgrade process.

Incorporating a grid framework into your own theme requires only a few steps to get started. The hardest part is probably choosing which framework you want to use. Front end developers have high standards and generally look down their nose at those who use “bloated” frameworks, such as Bootstrap or Foundation. I'm not going to judge; I'm just going to show you how to get started with Bootstrap so you can take things for a quick test drive.

At a high level, these are the steps to get a simple Bootstrap theme up and running.

  1. Put a copy of the core theme, Stark, into your site's themes folder.
  2. Rename the theme from to , updating all file names and the contents of all configuration files ( and the contents of the directory).
  3. Download the latest compiled and minified version of Bootstrap.
  4. Unpack the Bootstrap folder, placing the contents of the , , and directories into the relevant theme folders.
  5. Add the CSS files to the theme's info file and remove the reference to Stark's file.
  6. Copy the core page template file from to your theme folder. (I put mine in a new folder: .)
  7. Add Bootstrap-specific class names to the template file .
  8. Switch the theme to your new Bootstrap theme at Manage » Appearance. Just as it would have been in Drupal 7, your new theme should be listed at the bottom with other disabled themes.

If your framework of choice also has JavaScript libraries, you'll need to load those as well. This is now done from within a new theme file, . Into the libraries file, you can load several groups of JavaScript libraries. These changes were documented at “Remove '' and add '' key to theme info files” and “Replace by file.” Take a look at the core theme Seven for some examples. I used the following library file for my own tinkering:

bootstrap-corescripts: version: VERSION js: js/bootstrap.min.js: {} dependencies: - core/jquery - core/drupal.ajax - core/drupal - core/drupalSettings - core/jquery.once

The libraries file still needs to be loaded by your theme. This is done from within your theme's info file:

libraries: - bootstrap/bootstrap-corescripts

Replace with the name of your theme folder, and with the name of the grouping within the file.

If you make changes to your theme's info or library files, you will need to clear the theme's registry. I found that using Drupal's Clear Cache button (which is located at Manage » Performance » Clear Cache) wasn't sufficient, and I had to disable and then re-enable the theme to clear the registry. If you have Drush installed, a simple should also work.

To apply the fluid grid to your theme, it will now be a matter of adding class names to the appropriate template file(s). I've always found this work to be somewhat tedious but somehow pleasant, both at the same time. I get a sense of satisfaction from making things snap into place just by applying a class name. If you don't enjoy the monotony of naming things, don't panic! By the time Drupal 8 is ready for its official release there will likely be a number of base themes available which offer native support for fluid grids.

Responsive Images with Picture and Breakpoint

In the earliest versions of responsive web design, we simply set the max-width of an image to 100% and went on our merry way. Unfortunately, this wasn't an ideal solution as very large images, often optimized for high-resolution displays, resulted in a lengthy download time for tiny mobile devices. In Drupal 8, we have a solution which takes advantage of the hard work that's been done by the web community to date.

The two modules, Picture and Breakpoint, allow themers to create a relationship between the size of the viewport, and the size of the image that we want the user to download. For example: I have banner images, author profile images, and inline article images. Each of these different types of image may have its own styles applied to it. A banner image at full width is very wide, but relatively short. When this same banner image is displayed on a handheld device though, the orientation of the screen is different. So perhaps at this viewport size it makes sense to use the same image style as an inline article image.

Essentially, images are now created and selected for display as follows:

  1. You upload your original image.
  2. Drupal creates a series of pre-set images according to your image styles – just like you could in Drupal 7.
  3. The breakpoint module allows you to create rules which target the viewport width for each of the image styles.
  4. The picture module creates an HTML wrapper element which helps the browser select the correct image – out of all the possible styles from the relevant group – for download and display.

To take advantage of this new capability, you will need to configure your settings for each of the decision points outlined.

Seeing as we started with a copy of Stark for this theme, you will need to find the place where the breakpoints are defined as of the time of publication. Once you locate the definition file for your breakpoints, you can review and adjust them as necessary. The configuration includes a name for the breakpoint, as well as the rule at which this breakpoint exists. For example: . Take a look at the core themes, Seven and Bartik, to see examples of how these breakpoints can be defined.

Breakpoint Configuration

At the time of writing, the configuration settings were in , but we anticipate having a UI for this in time for Drupal 8’s official release. You can follow the issue on Drupal.org.

The responsive images work with the image styles you create. Just as it did for Drupal 7, Drupal 8 ships with three default styles: thumbnail, medium, and large. You can configure these styles (and add more styles) at Manage » Configuration » Image styles. Now that you are able to target image styles to breakpoints you will likely have more image styles than you had previously. When naming your image styles be aware of how you could reuse the styles in your design. For example, do you really need several different styles for your mobile images? My guess is that at narrower viewport widths you probably need fewer styles to choose from.

You will need to configure Drupal to match up which image styles should be used at what breakpoints. At the time of this writing the UI was not enabled by default. Navigate to Manage » Extend, and enable the module, Responsive Image. (When I wrote this article there were some rumblings that Breakpoint might be removed from core; if the module isn't there, you will need to download it.) Once the module is enabled, navigate to Manage » Configuration » Responsive image mappings. From this screen you will create a new map, and associate image sizes with each break point. It made more sense to me when I thought about this configuration screen as a mini content type for an image.

To see your new settings in action, you need to change the display widget for your content type from the Image widget to the Picture widget. Navigate to Structure » Content type » (select your content type) » Manage display. Next to each of your image fields, change the widget from Image to Picture. Below the column Format, set the fields for the Responsive image map and the Fallback image style (the single style that should be applied if the breakpoint-specific style isn't used). Assuming you are using Display Modes for your Views, there are no additional changes you need to make. You will need to update any of your Views that are using per-field image settings. (BTW: Don't do this! Make display modes!)

At this time the Breakpoint module is only used by the Picture module. During the development cycle there was some discussion of using Breakpoint in conjunction with SCOTCH for layouts. This did not come to pass, but could be introduced in a later version of Drupal (and perhaps as early as 8.1). These two modules have also been back-ported to Drupal 7. There are several articles in the resources section with step-by-step instructions on how to use them.

Media Queries

In building responsive themes, I have seen two approaches taken: the first is to use a style sheet per media query, and essentially provide a whole new layout which is optimized for very specific viewport sizes; the second is an object-oriented approach to the design, using components.

For a period of time, Omega shipped with a separate style sheet (and related media query) intended for global, default, narrow, normal, and wide layouts. Tucked into each of these files were the styles of how every design element would adjust at the new layout. This was an early approach to responsive theming, but it is not considered a best practice today. If your theme is structured this way, and it's working for you, great! But if you've often found it difficult to find where styles are located, or you're getting a lot of merge errors as multiple people simultaneously work on the same source files, you may want to consider modernizing the organization of your styles by adopting a component-based approach.

The component approach has been popularized with systems such as OOCSS, SMACSS, and BEM. These systems describe rules on how to organize your styles, but unlike Bootstrap, Foundation, or PatternLab, they're more about the naming convention than the starter kit you might download. This component-based approach to theming is one that I covered in my Drupal 7 video series for Drupalize.Me, and about which John Albin Wilkins has presented at DrupalCon Austin, “Managing Complex Projects with Design Components.”

Summary

When I first agreed to write this article, I thought things would be a little more stable, and a little easier to accomplish. When Drupal 8 ships, you will be able to take advantage of everything I've outlined here. Perhaps you'll need a little help from contrib, and perhaps your favorite base theme will already be upgraded, but the core concepts are responsive and ready for you to dive into. Dive in now. Ask questions. Everything you find will help Drupal ship an even better product that you love to build web sites with.

Image: http://www.istockphoto.com/photo/cube-watermelon-21568426

Other articles from this issue:

Articles

Connecting Drupal to Salesforce in Three Easy Steps

Fabian Franz

Create simple entry forms, quickly map complex Drupal structures, and shuttle data to and fro – for fun and profit.

Coming Soon

Painless User Docs

Kelly O'Brien

You built an awesomely gorgeous website. All that remains is to write the (ugh!) user manual. No, you cannot first watch all 800 episodes of Dr. Who again.

Coming Soon

Features

Web API Alphabet Soup

Sam Boyer

As Dionne Warwick once warbled, “wishin’ and hopin’ and thinkin’ and prayin’ won’t bring Drupal 8 into your arms.” Or something like that. Meanwhile, there’s CRUD (and HAL and POX) to whet your appetite and help you make standards- compliant decisions.

Coming Soon

See all articles from this issue

0 Replies to “Drupal Responsive Theme Development Essay”

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *