In this session we will show how the UI Patterns module allows you to define and expose self-contained UI patterns as Drupal 8 plugins and to use them as drop-in templates for panels, field groups, views, Display Suite view modes, field templates, etc. Over the past years projects like PatternLab or the Component Libraries module aimed at lowering the cost of maintaining and re-using UI patterns in your projects. But, as we all know, when it comes to presenting content the Drupal 8 landscape is quite diverse: you can layout your pages using Panels or Views, style your entities using Display Suite view modes, group your fields with Field group, etc. Such a diversification can surely present some challenges when it comes at reusing a well-designed and consistent UI library. The UI patterns module makes it possible to seamlessly use UI patterns with views, layouts, field formatters, etc. The session will also feature a brief live-demo of the following functionalities: - Define patterns using YAML - Visualize patterns on a pattern library page - Organize patterns into self-contained bundles of JavaScript, - - CSS and TWIG template - Integrate patterns with tools like PatternLab - Use patterns as paragraphs or nodes layouts - Use patterns as field group templates - Use patterns as views row templates - Use patterns as field templates - Advanced topic: a closer look to UI Patterns internals

2. ✈

4. ⚛

6. ⚛

12. ./templates/views-view-fields--articles--page.html.twig
{% embed "@molecules/cards/card.twig"
with {
"url": fields.path.content,
"title": fields.title.content,
"read_more": "Read more"|t,
"card_header": fields.created.content,
}
%}

20. YAML
MY_MODULE.ui_patterns.yml MY_THEME.ui_patterns.yml
pattern
media
pattern_media
pattern-media.html.twig

21. ./themes/custom/MY_THEME/MY_THEME.ui_patterns.yml
blockquote:
label: Blockquote
description: Display a quote with attribution information
fields:
quote:
type: text
label: Quote
preview: Life is like riding a bicycle. To keep your balance, you must keep moving.
attribution:
type: text
label: Attribution
preview: Albert Einstein
./themes/custom/MY_THEME/templates/pattern-blockquote.html.twig
<blockquote>
<p>{{ quote }}</p>
<footer>{{ attribution }}</footer>
</blockquote>

23. id
label description
fields
type label description preview
blockquote:
label: Blockquote
description: Display a quote with attribution information
fields:
quote:
type: text
label: Quote
preview: Life is like riding a bicycle. To keep your balance, you m

24. preview
id: image
fields:
image_field:
...
preview:
theme: image
uri: http://lorempixel.com/350/250/nature/1
id: gallery
fields:
gallery_field:
...
preview:
type: pattern_preview
id: image

25. theme hook
pattern_[id]
template
pattern_[id]
use
use: "@my_module/templates/my-template.html.twig"
use: "@molecules/media/media.html.twig"

26. .
├── templates
│ └── patterns
│ ├── button
│ │ ├── button.ui_patterns.yml
│ │ └── pattern-button.html.twig
│ ├── media
│ │ ├── media.ui_patterns.yml
│ │ └── pattern-media.html.twig
...
│ └── pattern-jumbotron.html.twig
├── MY_THEME.info.yml
└── MY_THEME.ui_patterns.yml

27. media:
label: Media object
...
libraries:
- core/jquery.ui.autocomplete
- my_module/my_library
- local_library:
css:
component:
media1.css: {}
http://example.com/style.css: { type: external }
...
└── patterns
└── media
├── media1.css
├── media.ui_patterns.yml
└── pattern-media.html.twig

31. /**
* The YAML UI Pattern plugin.
*
* @UiPattern(
* id = "yaml",
* label = @Translation("YAML Pattern"),
* description = @Translation("Pattern defined using a YAML file."),
* deriver = "Drupalui_patternsPluginDeriverYamlDeriver"
* )
*/
class YamlPattern extends UiPatternBase implements UiPatternInterface
...
}

32. /**
* The Fractal UI Pattern plugin.
*
* @UiPattern(
* id = "fractal",
* label = @Translation("Fractal"),
* description = @Translation("Pattern defined using Fractal."),
* deriver = "Drupalui_patternsPluginDeriverFractalDeriver"
* )
*/
class FractalPattern extends UiPatternBase implements UiPatternInterface
...
}

33. /**
* The PatternLab plugin.
*
* @UiPattern(
* id = "pattern_lab",
* label = @Translation("PatternLab"),
* description = @Translation("Pattern defined using PatternLab."),
* deriver = "Drupalui_patternsPluginDeriverPatternLabDeriver"
* )
*/
class PatternLabPattern extends UiPatternBase implements UiPatternInterfa
...
}

34. COMPONENT.ui_patterns.yml

38. ui_patterns_layouts
ui_patterns_views
ui_patterns_ds
ui_patterns_field_group

39. /articles