Meta Refresh 2015

The web in your pocket

Brajeshwar Oinam

Brajeshwar Oinam


Styleguide Driven Development for a sane cross-platform design (Mobile, Tablets & Desktops)

Submitted Jan 20, 2015

Ushering in a key practice to front-end design and development to foster clear separation of UI (User Interface), UX (User Experience), front-end and the back-end. Styleguide Driven Development (SDD) is a practice that helps maintain sanity across all mediums and platforms, be it mobile, tablets or desktops or perhaps something else in future.

The ultimate goal of SDD to allow everyone involved to work on their task, not to step on each others’ toes and hopefully bring peace between front-end team and the back-end.


In recent times, quite a bit of established companies - small, medium and large - have embarked on a journey to find a way to maintain design consistency, ability to quickly prototype and design on small sections or modules of a bigger project and get stack holders involved early on.

The best way to do so far is through the practice of Styleguide Driven Development.

Some of the points this talk with touch upon are:

  • Philosophy behind SDD.
  • Preparation for SDD.
  • How to go about maintaining a Styleguide.
  • Tools, Template and References to help start off with SDD.


A universal tuck-of-war between designers and developers will remain as long as web design and development exist. Unfortunately, there may unlikely be a solution that solves it 100% but we can try to reduce the friction and bring sanity to the design+developer world. The problem is more prominent in an Agile environment, where a design changes, evolves all the time and where designs cannot be ‘fixed’ before the development.

Of course, there is the code bloat that happens when two or more developers work on the same design and codes similar designs in multiple styles.

Presentation Preview

Imagine a scenario where there can be a common, updated visual guide for all the design elements, modules and styles. With my presentation, I’ll walk through the common problems faced by teams of designer and developers working on a project.

There will be examples, approaches to solving the problem of designer-developer mis-fits via Styleguide Driven Development. I’ll walk through the process, best practices and want to build, maintain and cultivate a system of design and development based on a Styleguide.

The presentation will include examples from projects I have been part of.

Remember that a Styleguide is not a Photoshop or a JPEG file, it is not a Word or an Excel Doc. It is actual production ready codes, it should be part of your project version control system. Its purpose to help separate design from development and at the same time be on the same page.

Takeaway from the Presentation

There will be enough examples from companies that have successfully implemented Styleguide Driven Development.
Concrete step-by-step process to start and maintain a Styleguide with the options to tweak it suit the needs of any team.
I’ll also be developing a working example of a Styleguide, which will be open source and can thus be extended, or used as bootstrap for your styleguide.

Speaker bio

I believe in simplicity, minimalism and an ardent willingness to push the envelop, envisioning the betterment of usable and practical solutions. - brajeshwar


{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

Meta Refresh is an umbrella forum for conversations about different aspects of design and product including: UX and interaction design CMS, content management, publishing and content marketing Information architecture more