Start your frontend development in Twig before Drupal 8 is even installed!

We will show you how to build a styleguide and static prototype using Twig that Drupal 8 can utilize immediately. We’ll demonstrate how Twig enables us to bring the power of Atomic Design to Drupal 8 via Pattern Lab, a static site generator that creates a styleguide, a component library, and high fidelity prototypes.

This approach turns the classic design-develop-theme methodology on its head: instead of backend development attempting to "code to Photoshop", now frontend development happens much earlier by breaking designs into reusable components and patterns to be fed to Drupal 8. Starting work on frontend deliverables like Twig templates and styles allows frontend work to start earlier and progress in parallel with the backend build.

Phase2 advocated for this approach at DrupalCon last year, as did ForumOne. Many leading agencies implement Pattern Lab in their workflow – Phase2 certainly has on high profile websites to great effect by placing Pattern Lab code inside the main Drupal theme. Phase2 uses the prototype to demonstrate the styled site and exemplify the markup needed before the functionality of the CMS is built.

However, until now Pattern Lab utilized a templating language other than Twig, resulting in only shared CSS and Javascript –not templates. We’ll demonstrate how the templates used in the new version of Pattern Lab can be used by a Drupal 8 theme for a leaner approach that allows work to be preserved.