Welcome

In this live, online training workshop, you will learn the process of identifying, building, and styling components using Pattern Lab. We will cover the process from design to development typically used by our team to build robust, scalable, and flexible components that promote re-usability and code efficiency. This training is perfect for designers and front end developers just getting started with components.

The training covers the following topics:

• Principles of Atomic Design for designing and building flexible and scalable components
• Building a custom Pattern Lab project
• Using Pattern Lab and Twig to build flexible and re-usable components
• Nesting and reusing components
• Styling components using Sass and BEM techniques
• Building component variants without repeating yourself
• Building components-based prototypes in Pattern Lab
• Documenting your components for better team collaboration with annotations
• Basics of integrating components with Drupal 8

At the end of this training students will be able to:

• Have a good understanding of Atomic Design and the principles of building flexible and scalable components in Pattern Lab.
• Have a good working knowledge of how Pattern Lab works and how to take advantage of many of its features such as global data, pseudo patterns, annotations and more.
• Have a basic understanding of Twig syntax such as conditional statements, includes, for loops, and write basic logic to make components more dynamic and reusable.
• Build responsive, reusable components and plan for building component variants to avoid code repetition
• Understand at a basic level how Pattern Lab components get integrated with a Drupal 8 website.

Who is the training for?

This training is primarily for front end developers or designers who wish to learn about the principles and best practices for planning and building components from design to development, for a Drupal website using Pattern Lab and Twig.

The principles covered in this training are essential for working in more advanced practices around component building and integration with Drupal.

Site builders, project managers, and IT managers have found this training extremely useful to understand the basics of components in a Drupal website to better communicate with their technical team, and are welcome to this training.

NOTE: Although many principles discussed in this training are geared towards Drupal, the vast majority of content may apply to any technology you currently work with for building websites.