Next Gen Design Systems with Pattern Lab, Twig, and Web Components

Jun 28, 2018

Salem Ghoweri

"Design systems can be incredibly efficient at delivering consistent, reusable, and interoperable components and visual styles across an organization; saving time while keeping projects on-brand and in scope.

However, most valiant attempts to integrate Drupal into a large scale design system surface a deeply interconnected web of technical and political roadblocks:

- What happens if your organization can’t (or shouldn’t) go headless?
- How do you wire up more than one Drupal site to your Pattern Lab instance?
- How do you keep the sites already using your design system up to date?
- How do you prevent code from breaking as complexity and scope balloon?

In this session, I’ll share our solutions to some of the toughest challenges teams face when building, shipping, and maintaining a next-generation design system - specifically our design system, Bolt, including:

- Strategies to decouple your design system from Drupal and from Pattern Lab
- Ensuring multiple sites and projects across the organization ship with the design system’s single-source-of-truth.
- Automatically generating schema docs on component data expectations and configuration options.
- How web components can provide many of the same benefits as going headless with Drupal without the trade-offs.…

Hi! I'm Karim Boudjema, the developer and site-builder of this site. I'm currently working as a freelance Drupal developer.

I was wondering how could I giving back to the Drupal community all what it gave to me during the last 10 years, that's how the idea of this site came to me ... (read more)

Hi! I’m Santiago Rico, the web designer and themer of this site.

When Karim proposed me to design and theme this site for the Drupal community, I accepted immediately because the community is the main reason why I love Drupal so much.