Skip to content
BEM style classes (see http://getbem.com/) with Neos Fusion
PHP
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Classes
Configuration
Resources/Private/Fusion
Tests/Unit/ValueObjects
LICENSE
README.md
composer.json

README.md

Wwwision.BEM

BEM style classes (see http://getbem.com/) with Neos Fusion

Installation

composer require wwwision/bem 

(Alternatively feel free to copy and adjust the parts that you need)

Usage

Eel Helper

This package provides a simple Eel-Helper BEM.block() that can be used to render BEM-style class names:

${BEM.block('some-component')} // => "some-component"
${BEM.block('some-component', ['foo', 'bar'])} // => "some-component some-component--foo some-component--bar"
${BEM.block('some-component').element('some-element')} // => "some-component__some-element"
${BEM.block('some-component').extend('sub')} // => "some-component-sub"

Fusion Prototype

For more advanced usage the Fusion Prototypes Wwwision.BEM:Block and Wwwision.BEM:Modifier are provided that allow to reuse and extend BEM-style classes more easily:

root = Wwwision.BEM:Block {
    block = 'some-block'
    modifiers {
        wide = Wwwision.BEM:Modifier {
            name = 'wide'
            active = ${isWide}
        }
    }
}

The above will render some-block some-block--wide. For fixed modifier names, the syntax can be condensed to:

root = Wwwision.BEM:Block {
    block = 'some-block'
    modifiers {
        'wide' = ${isWide}
    }
}

Use with AFX Components

The helpers are especially useful in conjunction with AFX Components:

prototype(Some:Component) < prototype(Neos.Fusion:Component) {

    header = ''
    content = ''
    level = 1

    renderer.@context {
        class = Wwwision.BEM:Block {
            block = 'some-block'
            modifiers {
                'foo' = true
                dynamic = Wwwision.BEM:Modifier {
                    name = ${'level-' + props.level}
                }
            }
        }
    }
    renderer = afx`
        <section class={class}>
            <h1 class={class.element('header')}>{props.header}</h1>
            <p class={class.element('content')}>{props.content}</p>
            <div class={class.extend('nested')}>...</div>
        </section>
    `
}

root = afx`<Some:Component header="some header" content="some content" level={2} />`

This would result in the following markup:

<section class="some-block some-block--foo some-block--level-2">
    <h1 class="some-block__header">some header</h1>
    <p class="some-block__content">some content</p>
    <div class="some-block-nested">...</div>
</section>

License

Licensed under MIT, see LICENSE

You can’t perform that action at this time.