README

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