|
1 | 1 | # bem-twig-extension
|
2 |
| -Twig function that inserts static classes into Pattern Lab but adds them to the attributes object in Drupal |
| 2 | +Twig function that inserts static classes into Pattern Lab but adds them to the Attributes object in Drupal |
3 | 3 |
|
4 |
| -## Usage |
| 4 | +## Usage (4 arguments) |
5 | 5 |
|
6 |
| -#### Simple block name: |
7 |
| -`<h1{{ bem('title') }}>` |
| 6 | +#### Simple block name (required argument): |
| 7 | +`<h1 {{ bem('title') }}>` |
8 | 8 |
|
9 | 9 | This creates:
|
10 | 10 |
|
11 | 11 | `<h1 class="title">`
|
12 | 12 |
|
13 |
| -#### Block with modifiers (array allowing multiple modifiers): |
14 |
| -`<h1{{ bem('title', ({1: 'small', 2: 'red'})) }}>` |
| 13 | +#### Block with modifiers (optional array allowing multiple modifiers): |
| 14 | +`<h1 {{ bem('title', ['small', 'red']) }}>` |
15 | 15 |
|
16 | 16 | This creates:
|
17 | 17 |
|
18 | 18 | `<h1 class="title title--small title--red">`
|
19 | 19 |
|
20 |
| -#### Element with modifiers and blockname: |
21 |
| -`<h1{{ bem('title', ({1: 'small', 2: 'red'}), 'card') }}>` |
| 20 | +#### Element with modifiers and blockname (optional): |
| 21 | +`<h1 {{ bem('title', ['small', 'red'], 'card') }}>` |
22 | 22 |
|
23 | 23 | This creates:
|
24 | 24 |
|
25 | 25 | `<h1 class="card__title card__title--small card__title--red">`
|
| 26 | + |
| 27 | +#### Element with blockname, but no modifiers (optional): |
| 28 | + |
| 29 | +`<h1 {{ bem('title', '', 'card') }}>` |
| 30 | + |
| 31 | +This creates: |
| 32 | + |
| 33 | +`<h1 class="card__title">` |
| 34 | + |
| 35 | +#### Element with modifiers, blockname and extra classes (optional - in case you need non-BEM classes): |
| 36 | + |
| 37 | +`<h1 {{ bem('title', ['small', 'red'], 'card', ['js-click', 'something-else']) }}>` |
| 38 | + |
| 39 | +This creates: |
| 40 | + |
| 41 | +`<h1 class="card__title card__title--small card__title--red js-click something-else">` |
| 42 | + |
| 43 | +#### Element with extra classes only (optional): |
| 44 | + |
| 45 | +`<h1 {{ bem('title', '', '', ['js-click']) }}>` |
| 46 | + |
| 47 | +This creates: |
| 48 | + |
| 49 | +`<h1 class="title js-click">` |
0 commit comments