My first theme for Backdrop CMS

I tasked myself with rebuilding my dad's old Durpal 6 site, www.stellarsoftware.com, to Backdrop CMS in one weekend.

I decided to rebuild from scratch rather than upgrade so that I could test more of Backdrop, and catch and fix bugs in the process (I found a handful - all now have PRs in the queue). After the site was built, I then needed to recreate the theme.

Respect for all the hard work done by the Drupal community

I started by opening an issue on drupal.org in the queue for the old Drupal 6 theme, Aeon5. I asked politely if the current maintainer would be interested in working on or maintaining a Backdrop CMS version of the theme. It is, after all, their work, and they should be aware of what's going on, even if they aren't interested in being involved.

While I was in the drupal.org issue queue, I did a quick review of all the open issues for the theme. If I'm going to be supporting this theme for Backdrop it's a good idea to know what I'm getting myself into!

Now, the fun part: Creating a Backdrop version of this theme.

I stared by creating README.md file that's in line with the Backdrop Contributed Project Author Agreement. I took the theme description from the project page on Drupal.org, and updated the rest of the README accordingly. I also added a LICENCE.txt file as part of the requirements to host this code in the backdrop-contrib group on GitHub.

I then added a .info file for the theme:
* I get to exclude the regions that were in the Drupal theme, since regions are now governed by Layouts) in Backdrop.
* I get to remove the line for the template engine, since PHPTemplate is assumed (and really the only engine that works).
* I get to update the line for the Drupal core version, and replace that with a backdrop core version.
The end result was an info file that looks like this:

  name = Aeon5
  description = A simple, minimalistic, fixed width theme.
  backdrop = 1.x

Next, I went to enable my new Backdrop theme, but noticed the screenshot was missing. I copied in the screenshot from the Drupal 6 theme, but thought to myself that it may need to be updated with w more recent version later. Once the screenshot appeared on the page, I enabled the theme, and returned to my site's home page.

The first thing I noticed with my new (blank slate) theme is that all my content is still laid out in the correct columns, and these columns are still responsive (woot!). All that's left is to skin the site, to make it look the how it did before.

Before I can add any CSS, I need to specify the style sheet in my .info file. I use the new guidelines for file locations for Backdrop, and add a css directory. I place a style sheet named styles.css in there, and add a line to my .info file. (Don't forget to clear all caches in order to get this new style sheet added to the page!)

  name = Aeon5 
  description = A simple, minimalistic, fixed width theme.
  backdrop = 1.x

  stylesheets[all][] = css/style.css

Then I started adding CSS from the Drupal 6 theme into my style sheet. I'm not copying the whole style sheet, since most of the selectors on the page have changed. Instead, I'm basically rewriting the CSS with the intention of having the end result come out the same. This also gives me the opportunity to replace all the background images with CSS3 effects like border-radius, box-shadow and linear-gradient where necessary.

When the theme was done, I tested the responsiveness again, and realized that some of the styles I added that look good at full-width didnt look good at smaller widths. I can fix this by adding media queries and adapting the original theme to work on smaller screen sizes. I add yet one more line to my info file:

  name = Aeon5 
  description = A simple, minimalistic, fixed width theme.
  backdrop = 1.x

  stylesheets[all][] = css/style.css
  stylesheets[all][] = css/responsive.css

I add a few media queries, attempting to wrap my head around the mobile first methodology - that always slows me down for a minute. When I'm done, I realize that I'm also going to need a javascript toggle hamburger menu if I want to make the responsive site really slick. This involves a few steps.

1) adding the hamburger menu icon to the page. I chose to add the hamburger by overriding the theme function theme_menu_tree() and tacking on an additional anchor tag that's hidden on large screens and shown on small. I put this theme function override in a template.php file, just like we did in Drupal 7.

/**
 * Override the theme_menu_tree().
 *
 * Adds an invisible link used to toggle open the menu on mobile devices.
 */
function aeon5_menu_tree($variables) {
  // Make sure we only add the hamburger to the main menu.
  if ($variables['theme_hook_original'] == 'menu_tree__main_menu') {
    $output  = '<a class="hamburger" href="#show-menu">Menu</a>';
    $output .= '<ul class="menu">' . $variables['tree'] . '</ul>';
  }

  return $output;
}

2) styling the hamburger menu icon with CSS. One of my favorite new tricks is to add the hamburger icon by inserting a unicode HTML entity with the CSS content definition.

a.hamburger:before {
  /* output the hamburger character ☰ */
  content: '\2261\00a0';
}

3) toggling the responsive menu with JS. I throw in a javascript file for this theme too:

name = Aeon5 
description = A simple, minimalistic, fixed width theme.
backdrop = 1.x

stylesheets[all][] = css/style.css
stylesheets[all][] = css/responsive.css

scripts[] = js/hamburger.js

The final step is to go back and update that screenshot. The original theme was a pretty teal color, but this site needed a darker blue. The screenshot needs to reflect the final color. I'll take a new screenshot of the finished product, resize it to 294x219, and drop it in.

That's it, now I'm ready to deploy this theme to my new Backdrop site!
http://dev-stellar-software.pantheon.io

Giving it back

The next step in my original plan was to post this theme to the backdrop contrib repository for others to use, but since I had started working on it the original maintainer responded to the Drupal issue saying that he was working on a port to Backdrop as well! By the time I had finished my theme, he'd also nearly finished his. It would certainly be better for his theme to be the official backdrop version (his keeps the width and color the same as the Drupal theme, thus ensuring continuity for anyone else running this theme on a Drupal 7 site, and wishing to move to Backdrop CMS).

My first Backdrop theme theme is living on in my own repository for the time being. I may eventually switch to the official Aeon5 theme and create a sub-theme of it to change the colors (and maybe max-width) like I had done for my Drupal 6 site. For today though, this will do :)

Update 1/20/2015

Chris just posted the official Aeon5 theme to the backdrop repo. This one is way better than mine, if you want to use this theme, please use his :)