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 me 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 thru 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.
Topics covered:
- How to identify patterns
- What makes up a component
- An overview of PatternLab
- Creating our first component
- Managing components within PatternLab
- Exposing our component to Drupal
- Combining components
- Advanced Twig syntax
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