ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8

•
•
Nuvole
Nuvole

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

1 of 41
Downloaded 10 times
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
✈
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
âš›
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
âš›
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
./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, } %}
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
YAML MY_MODULE.ui_patterns.yml MY_THEME.ui_patterns.yml pattern media pattern_media pattern-media.html.twig
./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>
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
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
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
theme hook pattern_[id] template pattern_[id] use use: "@my_module/templates/my-template.html.twig" use: "@molecules/media/media.html.twig"
. ├── 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
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
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
/** * 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 ... }
/** * 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 ... }
/** * 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 ... }
COMPONENT.ui_patterns.yml
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
ui_patterns_layouts ui_patterns_views ui_patterns_ds ui_patterns_field_group
/articles
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8

More Related Content

Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8