Component Based Theming with Twig

24 Apr
Join Us
Monday April 24, 2017
9:00 am - 12:00 pm
Baltimore Convention Center
Baltimore, MD

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. Learn how to work smarter in developing components that can easily be integrated into project after project without having to recreate yourself.

If you consider yourself a front-end developer then you will be right at home learning all the newest techniques to take your skills to the next level as we master Component-based theming with Twig.

All attendees will receive a digital copy of Chaz' book "Drupal 8 Theming with Twig".

Chaz Chumley, Technology Manager, Forum One
Adam Juran, Senior Front End Developer, Forum One
Shawn Brackat, Front End Technical Architect, Forum One

Experience level: 

Training Company: 
Forum One

Learning Objectives: 

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

  • Best practices for Drupal 8 theming
  • How Twig fits into the front-end development process
  • How to define, develop and theme a component
  • Steps for integrating PatternLab into Drupal
  • How to work with assets, including JavaScript libraries
  • 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

Lesson 3: Building Components

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

Topics covered

  • Creating our first component
  • Managing components within PatternLab
  • Exposing our component to Drupal
  • Combining components
  • Advanced Twig syntax

Lesson 4: Component Libraries

With the concept of creating components mastered, we will look at theming variations to create self-contained components that can be moved from project to project.  We will also explore using the Component library module to enable Twig namespacing, allow for more advanced Twig syntax and enable PatternLab to be our canonical source for markup.

Topics covered

  • Creating self-contained components
  • Working with Component library module
  • Using Twig namespacing
  • Making PatternLab our canonical source

Lesson 5: UI Patterns

As designs evolve so will the patterns required to work smarter with Drupal.  We will take a look at some of the more advanced components and how to tackle them.  Also we will take a peek at the new UI Pattern Library module and how it integrates with Field Formatters, Display suite and Panels.

Topics covered

  • Advanced patterns
  • Working with the UI Pattern Library

Who Will Gain the Most From This Training?: 

This course is ideal for designers and developers who have experience creating Drupal themes.  Also Front-end developers with an HTML/CSS background and some knowledge of PatternLab who want to get into Drupal theming. It will also be useful for Drupal 7 front-end developers who want to upgrade their skills.

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

Drupal Version: Drupal 8.x

Dev Environments: 
Before the course, we’ll send instructions on how to set up a Composer based install of Drupal 8

More great events we think you'll enjoy