Thử ý kiến automatically generating Drupal Theme

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

Bạn thấy bài viết này như thế nào?: 
Average: 7 (2 votes)
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Top 10 lệnh Drush quan trọng trong Drupal

Top 10 lệnh Drush quan trọng trong Drupal

If you don’t use Drush, let me know what is holding you back. In the near future, I will cover the most common reasons that are preventing some people using Drush but more importantly how to get past them.

Web service REST sẽ tuân thủ theo bốn nguyên tắc thiết kế cơ bản

Web service REST sẽ tuân thủ theo bốn nguyên tắc thiết kế cơ bản

REST (Representational State Transfer) đã được chọn sử dụng rộng rãi thay cho Web service dựa trên SOAP và WSDL

Apple

Apple nhận bằng sáng chế cho công nghệ màn hình "siêu mỏng"

Mới đây, một nguồn tin nội bộ của Apple vừa cho hay, nhà táo đã được trao bằng sáng chế về một công nghệ màn hình đặc biệt. Theo đó, công nghệ này sẽ giúp tích hợp các cảm biến cảm ứng với mạch hiển thị của màn hình qua đó giúp tiết kiệm diện tích bên trong thiết bị.

Công ty diệt chuột T&C

 

Diet con trung