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,

}

%}

�

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>

id

label description

fieldstype 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 must keep moving.

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 hookpattern_[id]

templatepattern_[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

�

/**

* The YAML UI Pattern plugin.

*

* @UiPattern(

* id = "yaml",

* label = @Translation("YAML Pattern"),

* description = @Translation("Pattern defined using a YAML file."),

* deriver = "\Drupal\ui_patterns\Plugin\Deriver\YamlDeriver"

* )

*/

class YamlPattern extends UiPatternBase implements UiPatternInterface

...

}

/**

* The Fractal UI Pattern plugin.

*

* @UiPattern(

* id = "fractal",

* label = @Translation("Fractal"),

* description = @Translation("Pattern defined using Fractal."),

* deriver = "\Drupal\ui_patterns\Plugin\Deriver\FractalDeriver"

* )

*/

class FractalPattern extends UiPatternBase implements UiPatternInterface

...

}

/**

* The PatternLab plugin.

*

* @UiPattern(

* id = "pattern_lab",

* label = @Translation("PatternLab"),

* description = @Translation("Pattern defined using PatternLab."),

* deriver = "\Drupal\ui_patterns\Plugin\Deriver\PatternLabDeriver"

* )

*/

class PatternLabPattern extends UiPatternBase implements UiPatternInterface

...

}

�

COMPONENT.ui_patterns.yml

�

ui_patterns_layouts

ui_patterns_views

ui_patterns_ds

ui_patterns_field_group

�

/articles

�

�