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 iteration—ultimately resulting in a better product.

Let’s face it, Drupal’s theme layer isn’t the most attractive system for up-and-coming front-end practitioners. We want to work with this talent in a way that minimizes drupal-centric knowledge.

We’re also tired of seeing lorem ipsum in prototypes, C is the first letter in CMS, and we want to make easier its collaborative generation in early design process. Further, we want to consume external data sources in our prototype, to anticipate data migration in Drupal upgrades, and make our prototypes real.

Speaking of real, prototypes should be robust, and produce production ready code. We aren’t interested in creating completely parallel systems that will fall out of date upon a site launch.

This session will focus on Kalamuna’s approach to prototyping and in-browser component driven design practices, and the benefits and experience thereof.

Frontend development

Frontend development is a discipline in itself, with its own language, tools and conventions, which sometimes seems at odds with the demands of Drupal’s theme layer. Kalastatic is our attempt to have the best of both worlds. Our approach has decoupled design from the theme layer.

Kalastatic is…    

• A prototyping system
  (A carefully honed static site generator powered by node, and featuring Metalsmith, Sass, and a litany of plugins).

• Living Styleguide
  (KSS)

• Atomic design principles
  (Sanity! and Modularity)

• BEM
  (Conventions for states variations, and the fugly selector method)

• NPM/Grunt/Bower/Livereload and other conveniences to keep things flowing.

But Drupal!

Kalamuna is still primarily a Drupal shop, so at the end of the day we need to make sure we’re not engaging in pie-in the sky thinking. 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 a 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 css/js.