Have you ever wanted to create a Drupal theme using Pattern Lab? Do you want to learn how to implement your very own Component-Based Design using atomic design principles?

In this session, you'll learn the step-by-step process of how to set up Pattern Lab and Drupal 8 using Emulsify from start to finish.

Why is this important to learn? The old way of theming has always been to organize markup based on the system in which the design is being implemented. In the case of Drupal, you’d design your theme within the PHP template files using Drupal syntax. But what if you're an experienced themer who never used Drupal before? How would you design a front-end system to work with Drupal if knowledge of Drupal syntax is required?

This is where Component-Based Development and Pattern Lab come to play. Component Based Development is the practice of splitting a site’s interface into smaller, independent pieces / components, organizing them into a system of reusable parts and then building out the design of these parts in a standalone design system. Pattern Lab is that design system. It’s a tool that allows you to generate a pattern-driven living style guide based on atomic design principles. The main benefit is that this tool allows you to build out a site design independent from the system in which the design is intended and separate from the actual back-end development of the site itself.

When you’re ready to connect your Pattern Lab developed style guide to Drupal, you'll use Twig. With the advent of Drupal 8 and the new Twig templating system, you now have the ability to include the component Twig templates built for Pattern Lab within Drupal’s Twig templates (Presenter templates). This part, as a disclaimer, does require Drupal-specific knowledge to connect the pieces together.

Fortunately, there are a number of starterkit Drupal 8 themes and component-driven prototyping tools for integrating Pattern Lab with Drupal and speed up the process of creating living style guides for your site. Emulsify, created and maintained by the Web Chefs at Four Kitchens, is a well-documented and fairly straightforward framework to use for this purpose.

Stop on by for this session on “Getting Started with Pattern Lab and Drupal 8 using Emulsify” so that you’ll be equipped to start your next web development project with the most effective front-end design system today.