Darren Mothersele

Software Developer

Warning: You are viewing old, legacy content. Kept for posterity. Information is out of date. Code samples probably don't work. My opinions have probably changed. Browse at your own risk.

Drupal Theme Generator Demo

Mar 28, 2014

web-dev

I’ve been playing with the idea of automatically generating Drupal themes from static HTML/CSS/JS using annotations in the HTML markup. I put together a basic proof-of-concept of a tool to generate a Drupal theme, ctools layout and style plugins, and view modes and templates.

Last night at the Drupal Show and Tell event in London I gave a live demo of the theme generator in action. The event was recorded, so will be online eventually, but for now I’ve recorded this demo as a couple of attendees suggested this would give a better idea of the detail that couldn’t be seen on the screen during the live demo.

My interest in this area came about through wanting to bring design into the development workflow of an agile project, and move away from the ‘throw it over the fence’ mentality in design deliverables. You can read more about how this came about in my previous blog post Death of the Themer.

###Assembly, not Deconstruction

Traditionally implementation of a design was done via a process of deconstruction from a PSD into flat HTML and CSS, and then another process of deconstruction in CMS implementation of the design. You can’t design a responsive site in Photoshop so luckily this is changing. PSDs were horrible to work with as amends take far too long, and while Photoshop may be good to quickly mock up style ideas, pages designed in Photoshop tend rely too much on intuition, implications about how things would work, and tend to come with an implied “you get the idea”.

###Atomic Design

As I’ve mentioned in earlier posts, I’m excited about the emerging trend towards atomic design (see Brad Frost) as it brings a more ‘development’ style process into design. Treating the process as that of designing a system of re-usable components, rather than just designing pages.

This moves implementation of a design from a process of deconstruction, to a process of assembly, so brings the world of dev and design closer together. Either bringing design into the development workflow, or bringing development processes into design (depending on which way around you look at it).

With an atomic approach to design, and with something like SMACSS for modular CSS, the process of converting to a Drupal theme can be automated. Because the markup/styles are ‘componentised’ we can annotate the source code to document the conversion process and then use automated tools to manage the process.

###Demo

Here’s a demo of the proof-of-concept:

###Next…

You can download/fork the code from the GitHub Hyde repo. You’ll need to patch the QueryPath module as it needs the latest version of the QueryPath library and the QP module doesn’t include the right files to make this work by default.

A lot of work needs to be done. This is very rough proof-of-concept code, but I think this shows the concept can work, and worthy of further development.

Some feedback from last night included:

Drop me a line if you’ve got any other ideas, or want to get involved, or want to help fund building this properly! :)

###Update:

As requested, here’s links to some of the other resources I mentioned during the Show and Tell…