wwwision/bem
composer require wwwision/bem
BEM style classes (see http://getbem.com/) with Neos Fusion
1.2.0
BEM style classes (see http://getbem.com/) with Neos Fusion
- Requires
- neos/fusion: ^4.2 || ^5.0 || ^7.0
- Requires (dev)
- None
- Suggest
- None
- Provides
- None
- Conflicts
- None
- Replaces
- None
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