Rbem

Simple methods for BEM methodology coding on Ruby.

Installation

Add this line to your application's Gemfile:

gem 'rbem'

or install from GitHub source:

gem 'rbem', github: 'vadimskrotsky/rbem'

And then execute:

$ bundle

Or install it yourself as:

$ gem install rbem

Middleman

Rbem can be easily integrated to the Middleman:

# config.rb

helpers do
  include Rbem
end

Configuration

Rbem has one configuration option :-)

You can change BEM original notation from name_mod to name--mod (Nicolas Gallagher notation):

Rbem.configuration do |config|
  config.notation = '--'
end

Usage

= b 'block', 'full'
  = e 'element', 'active'

/ == Returns:
/ <div class="block block_full">
/   <div class="block__element block__element_active"></div>
/ </div>

Multiple modifiers:

= b 'block', 'full hot'
  = e 'element', 'active fix'

/ == Returns:
/ <span class="block block_full block_hot">
/   <a class="block__element block__element_active block__element_fix"></a>
/ </span>

Set block/element type(Symbol):

= b 'block', 'full', :span
  = e 'element', 'active', :a

/ == Returns:
/ <span class="block block_full">
/   <a class="block__element block__element_active"></a>
/ </span>

Pass block/element options(Hash):

= b 'block', 'full', id: 'wonderful_id', class: 'js'
  = e 'element', 'active', data: { tab: 'wonderful_tab' } 

/ == Returns:
/ <div class="block block_full js" id="wonderful_id">
/   <div class="block__element block__element_active" data-tab="wonderful_tab"></div>
/ </div>

Inherit block modifier on element &name:

= b 'block', 'full'
  = e '&element', 'active'

/ == Returns:
/ <div class="block block_full">
/   <div class="block__element block__element_active block_full__element"></div>
/ </div>

Inherit block modifier to element &modifier:

= b 'block', 'full'
  = e 'element', '&active'

/ == Returns:
/ <div class="block block_full">
/   <div class="block__element block__element_active block_full__element_active"></div>
/ </div>

Inherit specific block modifier to element &modifier:block_mod:

= b 'block', 'full hot'
  = e 'element', '&active:hot'

/ == Returns:
/ <div class="block block_full block_hot">
/   <div class="block__element block__element_active block_hot__element_active"></div>
/ </div>

Contributing

1. Fork it ( https://github.com/vadimskrotsky/rbem/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request