-
Clone bemto somewhere to your project: git clone git://github.com/kizu/bemto.git -
Include it in your .pug project: include bemto/bemto.pug -
Use it: + b .block1 + e .element1 Foo + b .block2 + e .A ( href = "#bar" ) .element Bar + e .element2 Baz would render to something like < div class =" block1 " > < div class =" block1__element1 " > Foo </ div > < div class =" block2 " > < a class =" block2__element " href =" #bar " > Bar </ a > </ div > < div class =" block1__element2 " > Baz </ div > </ div >
+ b .foo bar
< div class =" foo " > bar </ div >
+ b .foo
+ e .bar baz
< div class =" foo " >
< div class =" foo__bar " > baz </ div >
</ div >
+ b .foo.bar__
+ e .baz
< div class =" foo bar " >
< div class =" bar__baz " >
</ div >
</ div >
+ b .block_foo bar
< div class =" block block_foo " > bar </ div >
+ b .block_foo._ bar._baz
+ e .element_type_lol._mode_moddy Blah
< div class =" block block_foo block_bar block_baz " >
< div class =" block__element block__element_type_lol block__element_mode_moddy " > Blah </ div >
</ div >
+ b .-foo.- bar.-baz
< div class =" block -foo -bar -baz " >
</ div >
+ b .SPAN.foo bar
+ b({tag : ' span ' })foo bar
< span class =" foo " > bar </ span >
+ b .foo ( title = "Oh, it's a title" )
+ e .A.bar ( href = '#baz' ) baz
< div class =" foo " title =" Oh, it's a title " >
< a class =" foo__bar " href =" #baz " > baz </ a >
</ div >
+ b .UL.list
+ b .list-item
+ e .link ( href = "foo" )
+ e .text foo + b .list-item
+ e .link ( href = "bar" )
+ e .text bar
< ul class =" list " >
< li class =" list-item " >
< a class =" list-item__link " href =" foo " >
< span class =" list-item__text " > foo </ span >
</ a >
</ li >
< li class =" list-item " >
< a class =" list-item__link " href =" bar " >
< span class =" list-item__text " > bar </ span >
</ a >
</ li >
</ ul >
+ b({ metadata : { content_type : ' block ' } }) .A.foo
+ e .bar
< a class =" foo " >
< div class =" foo__bar " > baz </ div > </ a >
-
set_bemto_settings ({
prefix : ' ' ,
element : ' __ ' ,
modifier : ' _ '
})
- set_bemto_settings ({ prefix : ' b- ' })
+ b .block
+ e .element foo
< div class =" b-block " >
< div class =" b-block__element " > foo </ div >
</ div >
-
set_bemto_settings ({
prefix : {
' ' : ' b- ' ,
' js- ' : true ,
' is- ' : ' is- ' ,
' global- ' : ' ' ,
' nope- ' : false ,
' sc- ' : ' shortcut- '
}
})
-
The empty string for key works the same as a string setting: you'd get the value for this key prepended for all classnames without detected prefixes. -
If a value for any key is true , this prefix would be always treated as such and won't be prepended by other prefixes. -
If a value for a key is false or an empty string, the classnames with this prefix would be rendered without it. -
In other cases, where the key and the value are both strings, all the key prefixes in the source code would be replaced with the value ones, and also all of those prefixes would be treated as registered ones, so you wouldn't add other prefixes for them.
- set_bemto_settings ({ element : ' - ' })
+ b .block
+ e .element foo
< div class =" block " >
< div class =" block-element " > foo </ div >
</ div >
- set_bemto_settings ({ modifier : ' -- ' })
+ b .block--modifier-name.-- other-modifier foo
< div class =" block block--modifier-name block--other-modifier " > foo </ div >
+ b .block-element
+ e .element2
< div class =" foo__bar " >
< div class =" foo__baz " >
</ div >
</ div >
- set_bemto_settings ({ flat_elements : false })
+ b .foo__bar
+ e .baz
< div class =" foo__bar " >
< div class =" foo__bar__baz " >
</ div >
</ div >
+ b .foo_bar
+ bemto_scope({ prefix : ' b- ' , element : ' - ' , modifier : ' -- ' }) + b .nnnn
+ e .mmmm--kkkk
+ e .baz
< div class =" foo foo_bar " >
< div class =" b-nnnn " >
< div class =" b-nnnn-mmmm b-nnnn-mmmm--kkkk " >
</ div >
</ div >
< div class =" foo__baz " >
</ div >
</ div >
-
set_bemto_settings ({
element : ' - ' ,
modifier : ' -- ' ,
output_element : ' __ ' ,
output_modifier : ' _ '
})
+ b .block.block2-
+ e .element--modifier foo
< div class =" block block2 " >
< div class =" block2__element block2__element_modifier " > foo </ div >
</ div >
- set_bemto_settings ({ class_delimiter : ' | ' })
+ b .foo.bar_baz
< div class =" foo | bar | bar_baz " >
</ div >
mixin link( url ) + b .SPAN.link ( href =url ) &attributes( attributes )
block
+ link( '#Foo' ) Foo + link( ' https://github.com ' ) ._external Github + link( ' http://kizu.ru ' ) .url ( rel = "me" ) Here I am + link Ah, I'm not a link + link( ' https://github.com ' ) + e .icon ( src = " http://favicon.yandex.net/favicon/github.com " )
+ e .text Github
< a class =" link " href =" #Foo " > Foo </ a >
< a class =" link link_external " href =" https://github.com " > Github </ a >
< a class =" link url " href =" http://kizu.ru " rel =" me " > Here I am </ a >
< span class =" link " > Ah, I'm not a link </ span >
< a class =" link " href =" https://github.com " >
< img alt ="" role =" presentation " class =" link__icon " src =" http://favicon.yandex.net/favicon/github.com "/> < span class =" link__text " > Github </ span >
</ a >