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

2 likes3,475 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.

Software

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
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$

/**
* 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
...
}

ui_patterns_layouts
ui_patterns_views
ui_patterns_ds
ui_patterns_field_group

This document discusses advanced configuration management in Drupal 8, covering various aspects such as deployment, local configuration overrides, handling concurrent development, and using features for configuration packaging. It outlines procedures for exporting and importing configuration, managing production changes, and dealing with content dependencies. It also provides insights into configuration split and tools to facilitate configuration management across different environments.

Configuration Management in Drupal 8: A preview (DrupalDays Milano 2014)Nuvole

This document provides an overview of configuration management in Drupal 8. It discusses how configuration is now stored in files rather than the database for easier transport between environments. It outlines the process for modifying configuration on a development site, exporting changes, and importing them into a production site. It also notes some limitations of the current configuration management system and areas still under development before Drupal 8 is released.

Drupal 8 Configuration Management with FeaturesNuvole

The document discusses the transition from Drupal 7 to Drupal 8, focusing on features versus configuration management. It highlights the evolution of code-driven development, separation of configuration and content, and improved configuration management workflows in Drupal 8. The document also emphasizes challenges, best practices, and the importance of version control for configuration changes in a multi-developer environment.

Configuration Management in Drupal 8: A preview (DrupalCamp Alpe Adria 2014)Nuvole

The document provides an overview of configuration management in Drupal 8. It discusses how configuration is now defined and stored in files rather than the database for easier transport between environments. It outlines the process for modifying configuration on a development site, exporting changes, and importing them into production. It also looks under the hood at how configuration objects work for developers and some caveats, like configuration changes not being atomic and the risk of breaking the site during import.

The OpenEuropa InitiativeNuvole

The document discusses the OpenEuropa Initiative, which aims to strengthen the adoption of open source tools and practices at the European Commission. It describes moving from a monolithic approach to a component-based one using loosely coupled, reusable software components. An example given is the Europa Component Library Drupal theme, which allows sites to have a consistent look and feel. OpenEuropa allows building a streamlined software as a service platform to power the next generation of the European Union web presence using these reusable open source components.

CMI 2.0 session at Drupal DevDays in Cluj-NapocaNuvole

The document discusses updates to the Configuration Management Initiative (CMI) 2.0, focusing on improvements for configuration workflows in Drupal. Key features include environment-specific configurations, support for cross-site workflows, and new API capabilities aimed at simplifying configuration management. It encourages participation in documentation efforts and highlights upcoming sprints and community resources.

Automating Drupal Development: Makefiles, features and beyondNuvole

Automating Drupal Development discusses automating various aspects of Drupal development using Drush Make and installation profiles. Drush Make allows developers to define a Drupal site's codebase and dependencies in a makefile that can then retrieve all necessary code and libraries with a single command. Installation profiles extend this concept to automate site configuration and installation tasks. The document demonstrates how to create reusable templates for profiles and makefiles that can generate new customized sites through commands like Drush Bake.

Building and Maintaining a Distribution in Drupal 7 with FeaturesNuvole

The document discusses building and managing a Drupal 7 distribution using features, detailing the concept of distributions as pre-packaged installations tailored for specific use cases. It highlights the advantages of storing configuration in code, maintaining repeatability, and the packaging of code using Drush make, along with the creation and management of features as modular components of functionality. Key practices for developing features and considerations for packaging configurations are also covered to ensure maintainability and upgrade paths.

Remote Collaboration and Institutional Intranets with Drupal and Open AtriumNuvole

The document discusses a collaborative project involving remote collaboration and the use of Drupal and Open Atrium to support higher education reforms in Europe. It outlines the roles of various educational networks and programs, including Unica, Tempus, and Bologna experts, in fostering inter-university cooperation and facilitating communication among stakeholders. Key initiatives include training seminars, regional workshops, and conferences, all aimed at improving higher education quality and integration across Europe.

Public Works MonitoringNuvole

The document describes a public works monitoring platform developed for the Municipality of Parma, Italy using Drupal. The platform provides real-time updates, visualization of progress and issues, and reporting capabilities. It replaces outdated Excel spreadsheets and meetings. Project managers can directly update data. Administrators have oversight and citizens can access information about public works. The system improves transparency and coordination for an investment of 530 million Euros in public works projects.

Extending and Customizing Open AtriumNuvole

This document discusses Open Atrium, an open source intranet platform built with Drupal. It describes Open Atrium's core features for blogs, wikis, calendars, to-do lists, and more. It also provides examples of how Open Atrium can be customized and extended through the use of Drupal modules like Features, Spaces, and Organic Groups to create public websites, private groups, social networks, and other configurations. The document includes code snippets demonstrating how to customize user profiles, override core configurations, alter contexts at runtime, and remove blocks using various Drupal hooks and modules.

Code driven development: using Features effectively in Drupal 6 and 7Nuvole

This document discusses using code-driven development with features in Drupal 6 and 7. Key points include: - Storing configuration and content in code via features allows for version control and easier deployment to production. - A "controller feature" can be used to manage other features and site-wide configuration through hook updates and installation tasks. - Features follow code conventions like logical namespaces to organize functionality. - In Drupal 7, installation profiles are like modules and use similar hooks to manage updates and configuration.

Features based development workflowNuvole

Features-based development allows multiple developers to collaboratively work on a Drupal project. Features are modules that define certain configuration (e.g. content types, views) in code so they can be version controlled. A "controller feature" acts as a central module to install/uninstall other features and track configuration changes through hook updates. This workflow separates content and settings, avoids data loss, and makes it easy to push changes between environments.

First Steps in Drupal Code Driven DevelopmentNuvole

IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]pcprocore

👉Copy link &paste Google new tab > https://pcprocore.com/ 👈✅ IDM Crack with Internet Download Manager (IDM) is a tool to increase download speeds, resume, and schedule downloads.Comprehensive error recovery and resume capability will restart broken or interrupted downloads due to lost connections, network problems, computer shutdowns, or unexpected power outages. The simple graphic user interface makes IDM user-friendly and easy to use. Internet Download Manager has a smart download logic accelerator with intelligent dynamic file segmentation and safe multipart downloading technology to accelerate your downloads. Unlike other download managers and accelerators, Internet Download Manager segments downloaded files dynamically during the download process and reuses available connections without additional connect and login stages to achieve the best acceleration performance for IDM users. System Requirements of IDM: Operating System: Windows XP, NT, 2000, Vista, 7, 8, 8.1, 10 & 11 (32bit and 64bit) Memory (RAM): 512 MB of RAM required Hard Disk Space: 25 MB of free space required for full installation Processor: Intel Pentium 4 Dual Core GHz or higher. Ensure your system meets these requirements for the IDM Crack to function properly. How to Install and Crack: Temporarily disable the antivirus until the IDM Crack process Install “idman642build41.exe” Extract “IDM 6.42.41 Patch.rar” (Password is: 123) Install “IDM 6.42.41 Patch.exe” Done!!! Enjoy!!!

Best MLM Compensation Plans for Network Marketing Success in 2025LETSCMS Pvt. Ltd.

NEW-IDM Crack with Internet Download Manager 6.42 Build 27 VERSIONgrete1122g

Building Geospatial Data Warehouse for GIS by GIS with FMESafe Software

Data warehouses are often considered the backbone of data-driven decision-making. However, traditional implementations can struggle to meet the iterative and dynamic demands of GIS operations, particularly for Iterative Cross-Division Data Integration (ICDI) processes. At WVDOT, we faced this challenge head-on by designing a Geospatial Data Warehouse (GDW) tailored to the needs of GIS. In this talk, we’ll share how WVDOT developed a metadata-driven, SESSI-based (Simplicity, Expandability, Spatiotemporality, Scalability, Inclusivity) GDW that transforms how we manage and leverage spatial data. Key highlights include: - Simplifying data management with a lean schema structure. - Supporting ad hoc source data variations using JSON for flexibility. - Scaling for performance with RDBMS partitioning and materialized views. - Empowering users with FME Flow-based self-service metadata tools.We’ll showcase real-world use cases, such as pavement condition data and LRS-based reporting, and discuss how this approach is elevating GIS as an integrative framework across divisions. Attendees will walk away with actionable insights on designing GIS-centric data systems that combine the best of GIS and data warehouse methodologies.

Modern Platform Engineering with Choreo - The AI-Native Internal Developer Pl...WSO2

Building and operating internal platforms has become increasingly complex — sprawling toolchains, rising costs, and fragmented developer experiences are slowing teams down. It’s time for a new approach. This slide deck explores modern platform engineering with Choreo, WSO2’s AI-native Internal Developer Platform as a Service. Discover how you can streamline platform operations, empower your developers, and drive faster innovation — all while reducing complexity and cost. Learn more: https://wso2.com/choreo/platform-engineering/

ERP Systems in the UAE: Driving Business Transformation with Smart Solutionsdheeodoo

ERP solutions are driving innovative change for businesses across the UAE through improved efficiency, reduced operational costs, and provide real-time visibility of operational data. By offering native Arabic language support, VAT compliance, and some level of cloud readiness, ERP solutions also supports and are consistent with the initiative for Smart Dubai 2030. Odoo is an example of a flexible & scalable solution. If you're looking for expert support with implementation contact Banibro. www.banibro.com

OpenChain Webinar - AboutCode - Practical Compliance in One Stack – Licensing...Shane Coughlan

declaration of Variables and constants.pptxmeemee7378

On-Device AI: Is It Time to Go All-In, or Do We Still Need the Cloud?Hassan Abid

As mobile hardware becomes more powerful, the promise of running advanced AI directly on-device is closer than ever. With Google’s latest on-device model Gemini Nano, accessible through the new ML Kit GenAI APIs and AI Edge SDK, alongside the open-source Gemma-3n models, developers can now integrate lightweight, multimodal intelligence that works even without an internet connection. But does this mean we no longer need cloud-based AI? This session explores the practical trade-offs between on-device and cloud AI for mobile apps.

Key Challenges in Troubleshooting Customer On-Premise ApplicationsTier1 app

When applications are deployed in customer-managed environments, resolving performance issues becomes a hidden battle. Limited access to logs, delayed responses, and vague problem descriptions make root cause analysis incredibly challenging. In this presentation, we walk through: The six most common hurdles faced in on-prem troubleshooting A practical 360° artifact collection strategy using the open-source yc-360 script Real-world case studies covering transaction timeouts, CPU spikes, and intermittent HTTP 502 errors Benefits of structured data capture in reducing investigation time and improving communication with customers ✅ Whether you're supporting enterprise clients or building tools for distributed environments, this deck offers a practical roadmap to make on-prem issue resolution faster and less frustrating.

Best Practice for LLM Serving in the CloudAlluxio, Inc.

Alluxio Webinar June 17, 2025 For more Alluxio Events: https://www.alluxio.io/events/ Speaker: Nilesh Agarwal (Co-founder & CTO @ Inferless) Nilesh Agarwal, co-founder & CTO at Inferless, shares insights on accelerating LLM inference in the cloud using Alluxio, tackling key bottlenecks like slow model weight loading from S3 and lengthy container startup time. Inferless uses Alluxio as a three-tier cache system that dramatically cuts model load time by 10x.

Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 20252nd Sight Lab

This presentation is similar to another presentation I gave earlier in the year at the AWS Community Security Day, except that I had less time to present and incorporated some AI slides into the presentation. In this presentation I explain what batch jobs are, how to use them, and that AI Agents are essentially batch jobs. All the same security controls that apply to batch jobs also apply to AI agents. In addition, we have more concerns with AI agents because AI is based on a statistical model. That means that depending on where and how AI is used we lose some of the reliability that we would get from a traditional batch job. That needs to be taken into consideration when selecting how and when to use AI Agents as batch jobs and whether we should use AI to trigger an Agent. As I mention on one side - I don't want you to predict what my bank statement should look like. I want it to be right! By looking at various data breaches we can determine how those attacks worked and whether the system we are building is susceptible to a similar attack or not.

IObit Driver Booster Pro 12 Crack Latest Version Downloadpcprocore

Simplify Insurance Regulations with Compliance Management SoftwareInsurance Tech Services

Streamlining CI/CD with FME Flow: A Practical GuideSafe Software

Advance Doctor Appointment Booking App With Online PaymentAxisTechnolabs

More Related Content

More from Nuvole (6)

Remote Collaboration and Institutional Intranets with Drupal and Open AtriumNuvole

Public Works MonitoringNuvole

Extending and Customizing Open AtriumNuvole

Code driven development: using Features effectively in Drupal 6 and 7Nuvole

Features based development workflowNuvole

First Steps in Drupal Code Driven DevelopmentNuvole

Remote Collaboration and Institutional Intranets with Drupal and Open AtriumNuvole

Public Works MonitoringNuvole

Extending and Customizing Open AtriumNuvole

Code driven development: using Features effectively in Drupal 6 and 7Nuvole

Features based development workflowNuvole

First Steps in Drupal Code Driven DevelopmentNuvole

Recently uploaded (20)

IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]pcprocore

Best MLM Compensation Plans for Network Marketing Success in 2025LETSCMS Pvt. Ltd.

NEW-IDM Crack with Internet Download Manager 6.42 Build 27 VERSIONgrete1122g

Building Geospatial Data Warehouse for GIS by GIS with FMESafe Software

Modern Platform Engineering with Choreo - The AI-Native Internal Developer Pl...WSO2

ERP Systems in the UAE: Driving Business Transformation with Smart Solutionsdheeodoo

OpenChain Webinar - AboutCode - Practical Compliance in One Stack – Licensing...Shane Coughlan

declaration of Variables and constants.pptxmeemee7378

On-Device AI: Is It Time to Go All-In, or Do We Still Need the Cloud?Hassan Abid

Key Challenges in Troubleshooting Customer On-Premise ApplicationsTier1 app

Best Practice for LLM Serving in the CloudAlluxio, Inc.

Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 20252nd Sight Lab

IObit Driver Booster Pro 12 Crack Latest Version Downloadpcprocore

Simplify Insurance Regulations with Compliance Management SoftwareInsurance Tech Services

Streamlining CI/CD with FME Flow: A Practical GuideSafe Software

Advance Doctor Appointment Booking App With Online PaymentAxisTechnolabs

Decipher SEO Solutions for your startup needs.mathai2

A solution deck that gives you an idea of how you can use Decipher SEO to target keywords, build authority and generate high ranking content. With features like images to product you can create a E-commerce pipeline that is optimized to help your store rank. With integrations with shopify, woocommerce and wordpress theres a seamless way get your content to your website or storefront. View more at decipherseo.com

Humans vs AI Call Agents - Qcall.ai's Special ReportUdit Goenka

Humans vs Agentic AI Cost Comparison: Cut 85% Support Costs TL;DR: Agentic AI crushes human costs in L1/L2 support with 85% savings, 300% efficiency gains, and 90%+ success rates. Your CFO just asked: "Why spend $2.3M annually on L1 support when competitors automated 80% for under $200K?" The humans vs agentic AI cost debate isn't theoretical - it's happening now. Real Cost Breakdown: - India L1/L2 Agent: ₹6,64,379 ($8,000) annually (full cost) - US L1/L2 Agent: $70,000 annually (loaded cost) - Qcall.ai Agentic AI: ₹6/min ($0.07/min) = 85% savings Game-Changing Results: - 47 human agents → 8 agents + AI system - Operating costs: $2.8M → $420K (85% reduction) - Customer satisfaction: 78% → 91% - First call resolution: 72% → 94% - Languages: 2-3 → 15+ fluently Why Agentic AI Wins: - Human Limitations: 8hrs/day, 1-2 languages, 30-45% attrition, mood-dependent, 6-12 weeks training - Qcall.ai Advantages: 24/7 availability, 97% humanized voice, <60 second response, intelligent qualification, seamless handoff Industry Impact: - E-commerce: 82% cost reduction - Healthcare: 90% appointment automation - SaaS: 23% satisfaction improvement - Financial: 95% inquiry automation Implementation: - Setup: 2-5 days vs 6-12 weeks hiring - ROI: Break-even in 3 months - Scaling: Instant global expansion Competitive Gap: - Early Adopters: 85% cost advantage, superior metrics, faster expansion Late Adopters: Higher costs, limited scalability, compounding disadvantage Similar automation patterns emerge across industries. Marketing teams use autoposting.ai for social media automation - same human-AI collaboration model driving L1/L2 transformation. "We reduced support costs by 78% while improving satisfaction by 31%. ROI was immediate and keeps compounding." - COO, Global SaaS Company Getting Started: Calculate current L1/L2 costs Assess repetitive tasks Request Qcall.ai demo Plan 20% pilot Bottom Line: Companies avoiding this shift hemorrhage millions while competitors scale globally with fraction of costs. The question isn't whether agentic AI will replace routine tasks - it's whether you'll implement before competitors gain insurmountable advantage. Ready to transform operations? This reveals complete cost analysis, implementation strategy, and competitive advantages.

How Automation in Claims Handling Streamlined OperationsInsurance Tech Services

Complete WordPress Programming Guidance BookShabista Imam

IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]pcprocore

Best MLM Compensation Plans for Network Marketing Success in 2025LETSCMS Pvt. Ltd.

NEW-IDM Crack with Internet Download Manager 6.42 Build 27 VERSIONgrete1122g

Building Geospatial Data Warehouse for GIS by GIS with FMESafe Software

Modern Platform Engineering with Choreo - The AI-Native Internal Developer Pl...WSO2

ERP Systems in the UAE: Driving Business Transformation with Smart Solutionsdheeodoo

OpenChain Webinar - AboutCode - Practical Compliance in One Stack – Licensing...Shane Coughlan

declaration of Variables and constants.pptxmeemee7378

On-Device AI: Is It Time to Go All-In, or Do We Still Need the Cloud?Hassan Abid

Key Challenges in Troubleshooting Customer On-Premise ApplicationsTier1 app

Best Practice for LLM Serving in the CloudAlluxio, Inc.

Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 20252nd Sight Lab

IObit Driver Booster Pro 12 Crack Latest Version Downloadpcprocore

Simplify Insurance Regulations with Compliance Management SoftwareInsurance Tech Services

Streamlining CI/CD with FME Flow: A Practical GuideSafe Software

Advance Doctor Appointment Booking App With Online PaymentAxisTechnolabs

Decipher SEO Solutions for your startup needs.mathai2

Humans vs AI Call Agents - Qcall.ai's Special ReportUdit Goenka

How Automation in Claims Handling Streamlined OperationsInsurance Tech Services

Complete WordPress Programming Guidance BookShabista Imam

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, } %}

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

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

Recommended

More Related Content

More from Nuvole (6)

Recently uploaded (20)

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