Introduction to UI_Patterns

Official Documentation

Building components with UI_Patterns is not much different than building components with other tools such as Pattern Lab or KSS Node. The one difference in the front-end is the file names for a pattern. UI_Patterns has specific requirements for these file names, however through a configuration change the naming convention can be updated if you need it to comply with specific naming convention you currently use.

Let's take a look at these files (using Card as example pattern name):

• card.ui_patterns.yml
  • Defines the pattern ID, properties, stock content and fields.
• pattern-card.html.twig
  • This is a custom twig template where all of the pattern's markup is written and Drupal uses as its primary twig template for rendering a pattern. The part I like about UI_Patterns is that this is typically the only Twig template a pattern will need. As opposed to KSS Node where we need to create a twig template for the pattern and then a second Twig template suggestion for Drupal to render the component, UI_Patterns works with only a single twig template suggestion. Some exceptions may apply.
• card.css
  • Pattern's styles.

Enable UI_Patterns modules:

The UI_patterns comes with a collection of sub-modules which allow us to do more with patterns. Not every module in the collection needs to be enabled. It all depends on your specific needs. Here are all the included modules:

UI Patterns: The main module, it exposes the UI Patterns system APIs and it does not do much more than that.

UI Patterns Library: Allows to define patterns via YAML and generates a pattern library page available at /patterns. Learn more.

UI Patterns Layouts: Allows to use patterns as layouts. This allows patterns to be used on Display Suite view modes or on panels out of the box. Learn more.

UI Patterns Field Group: Allows to use patterns to format field groups provided by the Field group module. Learn more.

UI Patterns Display Suite: Allows to use patterns to format Display Suite field templates. Learn more.

UI Patterns Views: Allows to use patterns as Views row templates. Learn more.

NOTE: A module that is not mentioned in the UI_Patterns documentation is the field_layout module, which is an experimental module part of Drupal core. This module sometimes can do a lot of the work Display Suite does if you are not planning to use Display Suite.