Skip to main content

Blog Post

Design System Integration with PatternKit

The UI Patterns module is gaining a lot of traction as an effective way to integrate design patterns and components with Drupal 8, but what if you are still using Drupal 7? The PatternKit module is a viable solution for your site.

Traditionally, integrating components from Pattern Lab or another design system solution requires a developer to create Drupal templates that map data to components. With PatternKit, the data mapping is handled in the Drupal UI. The user can select the type of component they wish to add to a page and complete the available fields for that element, cutting out the creation and maintenance of an intermediate template file.

Besides the fact that these modules are currently available for different versions of Drupal, there is also a difference in the way the UI Patterns and PatternKit modules are integrating design systems. The UI Patterns module turns your design patterns into plugins for your Drupal 8 site, which will create fields even if the component is not used on the site. The PatternKit module is focussed specifically on data mapping in the UI, so that fields and entity types are only created when a component is used. 

When PatternKit is ported to Drupal 8, the mapping approach might make this module a better choice for enterprise level sites.

Additional Resources
Inclusive Development: Using Style Guides to Improve Website Accessibility | Blog
UX Design Evolution: Top UI/UX Design Trends for 2018 | Blog

Access icon Up arrow icon Drupal 8 icon Facebook icon - white Facebook icon - blue outline Facebook icon - yellow Hollow right arrow icon Hollow right arrow icon - white LinkedIn icon - white LinkedIn icon - hollow LinkedIn icon - blue outline LinkedIn icon - yellow Mediacurrent wordmark Quote icon Twitter icon - white Twitter icon - hollow Twitter icon - blue outline Twitter icon - yellow Youtube icon - white Youtube icon - yellow