Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
2 likes3,480 views
The document outlines the structure and components of a custom theme in a Drupal application, including templates, UI patterns, and various media elements. It details how to create and use YAML and other pattern definitions for blocks, quotes, and media objects. Additionally, it describes hooks, libraries, and the layout configurations necessary for efficient theme development.
![theme hook
pattern_[id]
template
pattern_[id]
use
use: "@my_module/templates/my-template.html.twig"
use: "@molecules/media/media.html.twig"](https://image.slidesharecdn.com/presentation-170331061001/85/Introducing-the-UI-Patterns-module-use-atomic-UI-components-everywhere-in-Drupal-8-25-320.jpg)
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
- 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, } %}
- 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 ... }
- 39. /articles