mothership / twig-bem-bundle
Symfony bundle that adds BEM helper functions to twig
Installs: 0
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Type:symfony-bundle
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
This package is auto-updated.
Last update: 2024-12-24 13:48:21 UTC
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>