Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
✈
⚛
⚛
./templates/views-view-fields--articles--page.html.twig
{% embed "@molecules/cards/card.twig"
with {
"url": fields.path.co...
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 attribut...
id
label description
fields
type label description preview
blockquote:
label: Blockquote
description: Display a quote with...
preview
id: image
fields:
image_field:
...
preview:
theme: image
uri: http://lorempixel.com/350/250/nature/1
id: gallery
f...
theme hook
pattern_[id]
template
pattern_[id]
use
use: "@my_module/templates/my-template.html.twig"
use: "@molecules/media...
.
├── templates
│ └── patterns
│ ├── button
│ │ ├── button.ui_patterns.yml
│ │ └── pattern-button.html.twig
│ ├── media
│ ...
media:
label: Media object
...
libraries:
- core/jquery.ui.autocomplete
- my_module/my_library
- local_library:
css:
compo...
/**
* The YAML UI Pattern plugin.
*
* @UiPattern(
* id = "yaml",
* label = @Translation("YAML Pattern"),
* description = @...
/**
* The Fractal UI Pattern plugin.
*
* @UiPattern(
* id = "fractal",
* label = @Translation("Fractal"),
* description = ...
/**
* The PatternLab plugin.
*
* @UiPattern(
* id = "pattern_lab",
* label = @Translation("PatternLab"),
* description = @...
COMPONENT.ui_patterns.yml
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
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
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
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
Upcoming SlideShare
Loading in …5
×

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

1,591 views

Published on

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

Published in: Software
  • Be the first to comment

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

  1. 1. ✈
  2. 2.
  3. 3.
  4. 4. ./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, } %}
  5. 5. YAML MY_MODULE.ui_patterns.yml MY_THEME.ui_patterns.yml pattern media pattern_media pattern-media.html.twig
  6. 6. ./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>
  7. 7. 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
  8. 8. 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
  9. 9. theme hook pattern_[id] template pattern_[id] use use: "@my_module/templates/my-template.html.twig" use: "@molecules/media/media.html.twig"
  10. 10. . ├── 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
  11. 11. 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
  12. 12. /** * 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 ... }
  13. 13. /** * 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 ... }
  14. 14. /** * 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 ... }
  15. 15. COMPONENT.ui_patterns.yml
  16. 16. ui_patterns_layouts ui_patterns_views ui_patterns_ds ui_patterns_field_group
  17. 17. /articles

×