Prototyping: How To Move Fast And Embrace Drupal

A static prototype puts your ideas into the hands of your clients, users, and developers sooner, providing more time for testing and iteration—ultimately resulting in a better product.

This session will focus on KalastaticKalamuna’s approach to prototyping, style-guiding, and in-browser component driven design practices. Kalastatic is a suite of front end tools featuring such buzzwords as KSS, Metalsmith, BEM, Atomic design, and other wonderful bits of jargon that result in smooth workflows, appeased designers, sane developers, involved content makers, and happy clients.

But Drupal! (you say)

Drupal can be rather opinionated, and requires the traditional frontend developer to essentially relearn their discipline as practiced elsewhere. We strive to eschew the conventions Drupal theming while looking to still work effectively with Drupal, but could it be done?

Drupal core and contrib can add a lot of styles and scripts to your site; so we wrote kalastatic.module to facilitate the integration between Drupal and the prototype. This means we can start prototyping with a ‘Drupal baseline’ for our styles and scripts and avoid any surprises when modules are installed, custom code is written and the Drupal theme begins pulling in the prototype’s assets.

Combining a component-based, atomic design approach with Paragraphs led to the creation of the twigshim module which means Drupal 7 can ingest many of the Twig templates used in the prototype along with all of the style assets, and javascript.

Further, in Drupal 8 we’ve achieved a wholesale, unified approach that smooths out workflows, giving us the ability to go from a completed discovery to production ready code quicker than ever.


Session Track: 
Design, Theme + UX
Experience level: