Submitted by chrishu on Thu, 03/26/2015 - 20:11


After upgrading this site to a nice shiny Beta, I was itching to try themeing on Drupal 8, I have left off up to now as a few simple experiments showed me that even a simple sub-theme broke quickly under the pace of Drupal change, now though I should be able to upgrade any efforts and improvements without too much difficulty.

I theme Drupal every now and again and spend more time doing back-end and server related work, I usually have to have a good understanding of the mechanics of the themeing though even when not actively doing it. 

Often in the past I have been at odds with the themeing philosophy of teams I am working with (and have had to capitulate when outnumbered ;)) as I am more in the camp and would rather strip out most of the guff that Drupal inserts and break away from the 'rails' that make many Drupal sites turn out kind of samey apparently the 33% camp.

Also when working with talented front-end developers who don't necessarily deal mostly with Drupal it seems such a shame to clip their wings, I would rather try and start with a theme like Mothership.

The challenge

The assumption I had was that Drupal 8 will be much easier to customise and "go your own way" than Drupal has ever been before. The mini-challenge I set myself was to re-implement the look from another site  which runs on ExpressionEngine and use the same CSS stylesheet verbatim (in the end I changed one line the stylesheets are now identical). 

The theme is pretty basic, based on Bootstrap 3, but even despite that has a few elements of structure that are not very Drupally, so made an interesting experiment.

More than enough for my first attempt.

The result

Well this site no longer looks like a purple Bartik, and does bear more than a passing resemblance to the site I ripped the CSS from.

It was pretty easy to restructure things and Twig theming in Drupal is a massive improvement, I am now convinced that Drupal 8 wins hands down over Drupal 7 for themeability.

There is still a lot more stuff I could strip out, this was a first pass, I am going to take a breather and come back to it. I have a couple of style-sheets left from Drupal to keep the in-line editing and admin stuff (mostly) working. I would prefer to target those bits more selectively.

The theme is on Github, just for interest and comparison at the moment, but depending on later experiments might turn into something more generically useful. 

Still a few glitches

It is a bit difficult working out if I have done something wrong or whether I am encountering bugs in the Beta, I will take the time to find out if issues have been raised when I get the chance. There are problems, for example for an anonymous user the home link is always active and some blocks seem to leave a trace even when turned off for a page (which messes with detecting whether a sidebar is active for example), both of these problems also exhibit in Bartik though.

I plucked the theme from my site at and needs a lot of work anyway, I am hoping to improve both sites in tandem now. 


Just to make it clear the thing that remained the same from the ExpressionEngine site was the CSS, this is significant in that it was just as easy (well a lot easier really) to change the structure of the HTML to match the CSS as to take the approach I have often seen with Drupal 7 and below which is to abuse CSS over the top of whatever Drupal is outputting by default and then attempt to find out how to alter the last few bits (the title is being displayed somewhere odd on the page etc.) always numerous and sometimes arcane ways to do this. 

So it for example you were supplied with accessible, useable html templates, or a implementation based on a new frontend framework; that no longer needs to be a show stopper or time-sink, you should be able to easily rework Drupal to use them just through the Twig template and perhaps a little pre-processing in your .theme file.

The comment about Craft below is extra interesting though as Craft uses Twig. Wordpress can also be easily made to use Twig, Django uses something that is very similar (in fact the inspiration for Twig). There should and could be a lot more mobility of frontend work across all these environments and anything similar. There won't be a direct one to one mapping of templates (although an agency could in theory put effort in to make that almost a reality for a couple of their favorite CMS solutions).



Chris Weber (not verified)
Fri, 03/27/2015 - 04:03

You should try the same experiment with EE's "next generation", Craft. It would be interesting to see if you could reuse some what what you did with Drupal's 8 templates in Craft.

Can you share the code for your templates. I work with folks that are really into Craft and it would be great to show them that jumping onto Drupal 8 projects will be doable in the future.

Fri, 03/27/2015 - 06:51

In reply to by Chris Weber (not verified)

Craft uses Twig I believe, there won't be a one to one mapping of templates (see my update to the post above) but could be a fairly easy transitioning, ultimately the structure of the HTML and CSS is what is important and you shouldn't have too many things getting in the way. 

I a week or so I will be elaborating a bit more on this, I will also have a close look at Craft.

Jazz Kite (not verified)
Tue, 12/01/2015 - 12:26

This is good article for learning.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.