Thử ý kiến automatically generating Drupal Theme

>> Thực hiện permissions cho nodes và fields trong Drupal 7

>> Sử dụng Drupal 7 Form API để tạo conditions between form elements

>> Drupal sub-themes và sub-sub-themes làm việc như thế nào?

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:

• 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...

• Sparkbox Responsive Design Process
• Stephen Hay, quote: We're not designing pages, we're designing systems of components
• Tiny Bootstraps for Every Client
• Scalable and Modular Architecture for CSS (SMACSS)
• Pattern Lab and Brad Frost
• Knyle Style Sheets (KSS)
• Block, Element, Modifier (BEM)