Drupal Theme Generator Demo
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:
https://player.vimeo.com/video/90315757
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:
- Generate an actual theme. At the moment the theme is just an object stored in the DB/cache, but
I had planned for this to be a ctools exportable. An earlier version I started working on generated actual
theme files, perhaps it would be better to switch back to this approach? - How to handle logic in template files? Shouldn't this be handled in pre-process?
- Stub code generation for pre-process functions
- Adding extra custom fields for display only? The example given was a date field that was displayed twice on page, once for date stored in field and once for time stored in same field.
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...