https://github.com/drupal-pattern-lab/unified-twig-extensions
Share Pattern Lab's custom Twig extensions with Drupal 8
https://github.com/drupal-pattern-lab/unified-twig-extensions
Last synced: 7 months ago
JSON representation
Share Pattern Lab's custom Twig extensions with Drupal 8
- Host: GitHub
- URL: https://github.com/drupal-pattern-lab/unified-twig-extensions
- Owner: drupal-pattern-lab
- License: mit
- Created: 2017-05-07T18:03:50.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-09-06T21:20:55.000Z (about 3 years ago)
- Last Synced: 2024-09-22T02:46:31.616Z (about 1 year ago)
- Language: PHP
- Size: 7.81 KB
- Stars: 10
- Watchers: 1
- Forks: 9
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- component-based-theming - Unified Twig Extensions
README
# Unified Twig Extensions
Share Pattern Lab's custom twigs functions, filters and tags with Drupal 8. Huzzah!
## Getting Started
Simply add to Drupal and enable the `
Unified Twig Extensions` module on the `admin/modules` page to get started.
## Note on Paths
Note: currently looks for compatible extensions in your current active D8 theme path + either the 'pattern-lab/source/_twig-components' or 'source/_twig-components' folders. @TODO: allow users to customized / override this!
## Included Examples
I'm including a couple example twig extensions to add to your existing Pattern Lab-enabled theme to get started:
1. `example/_twig-components/functions/link.function.php` --> example of having Drupal ignore a PL Twig extension given the link function already exists in Drupal.
2. `example/_twig-components/tags/grid.tag.php` and `example/_twig-components/tags/cell.tag.php` --> example of a custom Twig tag that abstracts away some of the markup involved in an ITCSS-based grid system.
To test this out, try adding these two custom Twig tags to your theme's existing _twig-components folder and try adding the following HTML (to both PL's twig templates and/or a Drupal template):
```twig
{% grid 'o-grid--large' %}
{% cell 'u-1/1 u-1/2@small u-2/3@medium' %}
Grid cell
{% endcell %}
{% cell 'u-1/1 u-1/2@small u-1/3@medium' %}
Grid cell
{% endcell %}
{% endgrid %}
```
Everything should be working as expected if you don't encounter any errors and the following HTML gets output (rendered of course):
```html
Grid cell
Grid cell
```