{"id":19615421,"url":"https://github.com/droath/pattern_library","last_synced_at":"2025-09-09T22:48:12.704Z","repository":{"id":80583936,"uuid":"117611919","full_name":"droath/pattern_library","owner":"droath","description":"Drupal 8 Pattern Library - Connecting Patterns with Drupal Layouts","archived":false,"fork":false,"pushed_at":"2018-07-01T14:48:05.000Z","size":64,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-09T10:36:24.148Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/droath.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-16T00:50:45.000Z","updated_at":"2018-07-01T02:38:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"e1990350-8c06-4482-b5aa-55244a1bf3ea","html_url":"https://github.com/droath/pattern_library","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/droath%2Fpattern_library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/droath%2Fpattern_library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/droath%2Fpattern_library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/droath%2Fpattern_library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/droath","download_url":"https://codeload.github.com/droath/pattern_library/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240907401,"owners_count":19876686,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T10:56:44.747Z","updated_at":"2025-02-26T17:44:58.634Z","avatar_url":"https://github.com/droath.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pattern Library\n\n\nThe pattern library module provides a way to define patterns that are managed by an internal or external pattern framework like [Pattern Lab](http://patternlab.io/) to the Drupal ecosystem. This is as easy as placing a pattern definition in either a custom module or theme. \n\n## \u003ca name=\"integrations\"\u003e\u003c/a\u003e Integrations\n\n#### Entity Display\n\nThe pattern library module doesn't ship with a way to render patterns per se, as it's only responsibility is to generate layouts. The [layouts API](https://www.drupal.org/docs/8/api/layout-api) was introduced in Drupal 8.3. There are many contributed modules that use layouts to render content, such as [panels](https://www.drupal.org/project/panels), [display suite](https://www.drupal.org/project/ds) or layout builder which is now apart of Drupal core, as of 8.5.\n\n#### Field Formatter\n\nMost field types will have an additional field formatter, labeled **Pattern Library**. This formatter allows for mapping field properties to a layout pattern. A common use case would be having a link field, which has two properties, URI and text. These properties could easily be mapped to a button pattern. \n\nThere is another field formatter that's available for entity reference field types, which is labeled **Entity Properties**. This allow for a site-builder to access properties from an entity reference. As most things in Drupal are now entities, this provides a lot of different use cases. A common use case would be to extract an image URI from a media reference field, which you could then access in the pattern lab twig template.\n\n## \u003ca name=\"getting-started\"\u003e\u003c/a\u003e Getting Started\n\nFirst, you're going to need to build or use a contributed theme that specializes in organizing patterns. I would recommend using [Emulsify](https://www.drupal.org/project/emulsify), which you can easily setup in a short amount of time. As the project is well documented, and there are plenty of training videos on how to get started.\n\nAfter you've setup your theme, along with some new patterns using the pattern lab framework. You'll need to define a `*.pattern_library.yml` file, which can live either along side the pattern lab implementation or be contained in a single definition file in the custom theme or module. The pattern provider will be the module or theme name, which would replace the `*` when naming the file.\n\nNext, you'll need to use the directives defined in the [Pattern Definition](#pattern-definition) section to expose the pattern to the Drupal UI. This will create a layout that represents the pattern, and will offload all the markup responsibility to the pattern framework. There is no need to create a twig template override to connect the pattern lab framework to the Drupal theme, the pattern library module takes care of this for you.\n\nIf you're needing to manipulate the field data prior to consuming it via the pattern twig template, you can create a custom field formatter. Or you can use the field formatter that's provided with pattern library module, for entity references.\n\n\u003e Throughout this documentation, I'm going to assume you're defining patterns in a theme and using the pattern lab framework. Along with using the display suite module to render the pattern layouts.\n\n\n## \u003ca name=\"pattern-discovery\"\u003e\u003c/a\u003e Pattern Discovery\n\n\nThere are two different mechanisms on which patterns are discoverable. The most convenient (and recommend if using pattern lab) is inside the same directory where the twig markup for the atom, molecule, organism, etc. are defined. As this keeps the pattern implementation self contained and encapsulated.\n\nMost Drupal contributed themes, like Emulsify that specialize in pattern lab based projects are using the [Component Libraries](https://www.drupal.org/project/components) module, which the pattern library module has support for. If you're rolling your own theme, be sure to investigate what the components module is all about. The components module is not a hard dependency if you don't want to define pattern definitions within the pattern lab framework.\n\nIf you're only using the pattern library module to manage a couple patterns and don't need a framework, you'll be able to define a pattern definition in either the module or theme root directory. After defining a pattern to the Drupal ecosystem you'll need to remember to clear the cache, prior to it showing up in the Drupal UI.\n\n\n## \u003ca name=\"pattern-modifiers\"\u003e\u003c/a\u003e Pattern Modifiers \n\nLayouts defined by the pattern library module are constructed in a way so they're able to collect additional pattern metadata, which we call modifiers. Modifier attributes could be something that changes based on the site-builder or content editors discretion. An example would be: background colors, text justification, background images, and the list goes on. \n\nIf you're using display suite, the modifier options will show up under the layout settings, after selecting a pattern and saving the entity display. You will need to ensure that the pattern you've selected is setup to expose modifiers, as nothing will be shown if it wasn't defined in the [pattern definition](#pattern-definition).\n\nYou have the option to map modifiers to a particular field that's been attached to the entity. In most cases you'll hide the modifier fields from the entity display. You can also set the modifier values for a particular entity display without allowing the content editor to alter it, as this is the default behavior.\n\nModifiers are exposed using the plugin API, so developers can develop their own custom modifiers to capture whatever data their pattern requires. Although the following modifier types are shipped with the pattern library module:\n\n- text\n- select\n- boolean\n- file_path\n- image_path\n\n## \u003ca name=\"pattern-definition\"\u003e\u003c/a\u003e Pattern Definition \n\nDefine a pattern definition using the available directives:\n\n**Required**\n\n- label (string): Define the pattern label.\n- source (string): Define the pattern source. This is usually a component alias or path to a twig template.\n- variables (array): Define the pattern variables. Which are referred to as regions within the layout realm.\n\n**Optional**\n\n- icon (string) The pattern icon path.\n- [modifiers](#pattern-modifiers) (array): Pattern modifers.\n  - title (string:required): The modifier title, which shows up in the Drupal UI.\n  - type (string:required): The modifier type (refer back to the available modifier types above).\n  \n  \u003e Note: Depending on the modifier type addition properties may be available.\n\n- libraries (array) \n  - Same structure as [*.libraries.yml](https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module#define-library)\n  \n\n**Definition Example (Pattern Lab):**\n\n```yaml\nlabel: Icon\nsource: @atoms/06-icon/icon.twig\nvariables:\n  url:\n    label: URL\n  icon:\n    label: Icon\nmodifiers:\n  icon_size:\n    type: select\n    title: Icon Size\n    options:\n      small: Small\n      medium: Medium \n      large: Large \n  icon_link:\n    type: boolean\n    title: Link Icon\n  icon_image:\n    type: image_path\n    title: Icon Image\n  icon_text:\n    type: text\n    title: Icon Text\nlibraries:\n  js:\n    /themes/custom/MYTHEMENAME/js/demo.simple.js: {}\n    /themes/custom/MYTHEMENAME/js/demo.complex.min.js: { minified: true }\n  css:\n    theme:\n      /themes/custom/MYTHEMENAME/css/demo.simple.css: {}\n  dependencies:\n    - core/jquery\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdroath%2Fpattern_library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdroath%2Fpattern_library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdroath%2Fpattern_library/lists"}