mothership/twig-bem-bundle

Symfony bundle that adds BEM helper functions to twig

dev-main 2022-07-06 15:57 UTC

Requires

• php: >=7.2
• symfony/config: ^5 | ^6
• symfony/http-kernel: ^5 | ^6
• symfony/twig-bundle: ^5 | ^6

Requires (Dev)

• symfony/dependency-injection: ^5 | ^6

MIT

• Niklas Wolf

README

This symfony bundle provides BEM helper functions to use in twig template.

Installation

Make sure Composer is installed globally, as explained in the installation chapter of the Composer documentation.

Applications that use Symfony Flex

Open a command console, enter your project directory and execute:

$ composer require mothership/twig-bem-bundle

Applications that don't use Symfony Flex

Step 1: Download the Bundle

Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle:

$ composer require mothership/twig-bem-bundle

Step 2: Enable the Bundle

Then, enable the bundle by adding it to the list of registered bundles in the config/bundles.php file of your project:

// config/bundles.php

return [
    // ...
    Mothership\TwigBemBundle\TwigBemBundle::class => ['all' => true],
];

Usage

bemBlock(blockName, modifiers = [])

Use it like this: <div class="{{ bemBlock('myBlock') }}"></div>

Parameters:

• blockName: String
• modifiers: (optional) String[]

bemElem(elementName, modifiers = [])

This function can only be used if there is a bemBlock defined in the parent tree. Use it like this: <div class="{{ bemElem('myElement') }}"></div>

Parameters:

• elementName: String
• modifiers: (optional) String[]

Example

{% block body %}
    <div class="{{ bemBlock('listing') }}">
        <div class="{{ bemElem('pagination') }}"></div>
        <div class="{{ bemBlock('product') }}">
            <div class="{{ bemElem('title') }}"></div>
        </div>
        <div class="{{ bemBlock('product', ['active', 'sale']) }}">
            <div class="{{ bemElem('title', ['bold']) }}"></div>
        </div>
    </div>
{% endblock %}

This will be the corresponding output/markup:

<div class="listing">
    <div class="listing__pagination"></div>
    <div class="product">
        <div class="product__title"></div>
    </div>
    <div class="product product--active product--sale">
        <div class="product__title product__title--bold"></div>
    </div>
</div>