A practical approach to Component-driven Theming in Drupal 8

The modern development workflow is modular/components-driven. With the introduction of Twig in Drupal 8 and the Paragraphs module, front end developers have been empowered to replace template-driven development with a modular approach. Pattern Lab supports this method by providing a framework for creating these components with complexities ranging from the simplest atom components to the large-sized templates & pages.

With a powerful combination of Twig, Pattern Lab and the Paragraphs module,  Front End developers can take this building-blocks approach to development where smaller, discrete components are combined and reused to build different larger components.

We will explore how we used this method of modular development to build a flexible website for Médecins Sans Frontières (due to launch in early summer), giving content editors the ability to create multiple page layouts by mixing and matching components.

This Session will cover:

  • Setting up your Drupal 8 theme to work with Pattern lab.

  • Installing and using Pattern-Lab for Drupal with Twig namespacing enabled.

  • Theme tools for improved work-flow (Gulp, Yarn, Sass, NPM).

  • Setting up PatternLab architecture and components structure.

  • Living styleguide with Pattern Lab atoms, molecules & organisms

  • Reusing Pattern Lab Components Twig files in Drupal Templates.

  • Drupal 8 Twig tips & tricks for including and extending Pattern lab twig templates.

  • Using Paragraph types as site building components.

  • Creating flexible layouts with the UI Pattern Module and Views.
     

Who should attend

This session is for Front End Developers that are looking to break free from a template-based approach to front end development and adopt a streamlined, efficient and speedier method for creating projects. Working in an Agile manner often means that the “fail quickly” approach causes us to frequently iterate on development work. Using this modular approach makes it really easy to introduce changes and updates to code that has already been shipped from a single source of truth, the Pattern Lab template.

Audience
Experience Level
Intermediate
Schedule Info
Conference Year
2018
Status
Proposed
Session Track
Design, UX, and Accessibility