Component-based theming with Twig

In order to fully take advantage of Drupal 8 and Twig, it helps to have an understanding of components, patterns and the differences between traditional theme-centric design and component-based design.  Join us as we take a look at how to define patterns that make up common web elements, break them down into smaller chunks of content and explain how they better fit into what is known as the Atomic Design Principle.

We will work through identifying the components that make up a page and begin building our first components. Utilizing PatternLab we will first build our component using simple markup, styling, and Twig.  We will then learn how to combine components using advanced Twig syntax to build a completed page.

With the concept of creating components mastered, we will explore using the Component library module to enable Twig namespacing, which allows for more advanced Twig syntax and enables PatternLab to be our canonical source for markup within Drupal 8.