Each iteration of Drupal introduces new and exciting ways to manage content.  However, the display of content is even more important along with the knowledge of how to convert a design to a theme.  While we have all read about, watched and even worked with Twig to create new themes in Drupal 8, the way we work with Twig has changed.

Join us as we walk through the theming variations that started with the traditional theme-centric design and has quickly moved into component-based design.  Together we will master Component-based theming with Twig as we work to identify patterns, define components, utilize command line tools such as Composer, NPM, and Grunt to quickly create a PatternLab managed theme.

Learning Objectives: 

You'll come away from the course with knowledge of:

• How to define, develop and theme a component
• Steps for integrating PatternLab into Drupal
• Various techniques for componentizing Drupal

Lesson 1: Overview

In order to fully take advantage of componentizing Drupal, it helps to have an understanding of components, patterns and the differences between traditional theme-centric design and component-based design.  We will take a look at patterns that make up common web elements, break them down into smaller pieces and explain how they better fit into what is known as the atomic design principle.

Topics covered

• How to identify patterns
• What makes up a component
• Theme-centric vs Component-based design
• An overview of PatternLab

Lesson 2: Tools

The term Front-end developer means so much more than someone who writes HTML, CSS, and JavaScript.  We will take a look at tools such as Composer, PatternLab, NPM and Grunt to help us work smarter when creating a theme in Drupal.  Beginning with using the very accessible Gesso theme to create a workflow that will assist us in creating our first components.

Topics covered

• Working with the Gesso theme
• Using Composer to create a PatternLab project
• Choosing a Drupal based Starterkit
• Working with package managers
• Using task runners to improve workflow
• Configuring Drupal for Twig debugging

Prerequisites for this Course: 

• You should have PHP 7 installed locally prior to this training.
• Understand how to work with HTML5, CSS3, Sass and JavaScript libraries
• Have a basic understanding of PatternLab, NPM, and the command line
• Have Composer and NPM installed on your computer.

You can find directions on how to install everything needed for the class at the following GIT repo.