kagagnon/bem-php

PHP shortcodes to generate BEM class with a Laravel integration

Installation

Install via composer with, _(*1)

$ composer install kagagnon/bem-php

Optional configurations

Configurations are static properties to the KAGagnon\BemPhp\Helpers\BemHelper class. You can edit them before using BemPhp:, _(*2)

 $has_sugar == true
] );
```

You can mix conditional modifiers with other modifiers, and it also works with the `startBlock` method.

```php
BemHelper::startBlock( 'cup', 'div', [
    '_modifiers' => [
        'blue',
        'is-cold' => !$has_hot_beverage,
        'is-empty' => $finished
    ]
] );
```


## HTML example

```php




       
Article Name

       
Article text..., (*3)

       
           

               0 comments
               Delete
               Edit
           
       
   

Result to :, _(*4)

   
Article Name

   
Article text..., (*5)


   

       0 comments
       Delete
       Edit
   

Create node with startBlock()

You can pass argument to startBlock() to automatically generate an HTML tag. To do so, you can pass the tag name as second argument and, optionally, an array of attributes., _(*6)

You can also skip the tag name and pass an array as second argument. That will create an HTML element base on the default_tag configuration., _(*7)

Additionally, if you set create_tag to true, startBlock() will always create a tag base on the default_tag configuration if only 1 argument is passed., _(*8)

To pass modifiers to the tag, simply pass _modifiers in the array: an array for multi-modifiers or a string for single modifier., _(*9)

Example

<?php
// We assume `create_tag` is set to true

BemHelper::startBlock( 'block' ) // 


BemHelper::endBlock()            // 



BemHelper::startBlock( 'block', 'article' ) // <article class="block">
BemHelper::endBlock()                       // </article>

BemHelper::startBlock( 'block', 'quote', [ 'data-inspiration', 'class' => 'js-action' ] ) // <quote class="js-action block" data-inspiration >
BemHelper::endBlock()                                                                     //</quote>

BemHelper::startBlock( 'block', [ 'id' => "anchor" ] ) // 


BemHelper::endBlock()                                  // 



BemHelper::startBlock( 'block', [ 'id' => "anchor", '_modifiers' => 'modifier' ] ) // 


BemHelper::endBlock()                                  // 



BemHelper::startBlock( 'block', [ '_modifiers' => [ 'modifier1', 'modifier2' ] ] ) // 


BemHelper::endBlock()                                  // 

Use with Laravel (Blade directives)

This plugin comes with a Laravel integration. You can include the KAGagnon\BemPhp\BemServiceProvider class in your application service providers list. The following directive will be mapped :, _(*10)

@bem( ... ) => BemHelper::startBlock
@bemclass( ... ) => BemHelper::bemClass
@endbem => BemHelper::endBlock

Twig extension

This plugin comes with a Twig integration. You can register the KAGagnon\BemPhp\Twig\BemTwigExtension in Twig extensions. The following directive will be mapped :, _(*11)

{% bem( ... ) %} => BemHelper::startBlock
{{ bemclass( ... ) }} => BemHelper::endBlock
{% endbem %} => BemHelper::getBemClass