Decoupling Front end development using a Pattern Guide

ikos

At the beginning of development of Lush (lush.co.uk) we were presented with a challenge by the digital agency developing the branding and design of the new website.

The site was to have 6 breakpoints and we had to have pixel perfect delivery in Drupal. The tool was not to stand in the way of the vision. Also, the design would continue to be refined during the site development.

In this session we will demonstrate how we were able to use a live style guide / pattern guide to develop the front end of the website independently of the main Drupal Commerce build.

This was all in 2014 - so we'll also be talking about how we have evolved our process on subsequent projects using tools such as PatternLab.io

In particular we will talk about:

  •  Component-based design rather than page layouts
  •  Using PatternLab for rapid development
  •  Using a Pattern guide as a QA and workflow tool
  •  Moving the Pattern guide into Drupal

Finally we will discuss some of the key lessons that we hope will be beneficial to you when working on large scale design implementations when taking this approach.

Register NOW

Session Track

Front end

Experience Level

Intermediate

Drupal Version