angular-simple-bem

angular-simple-bem

angular-simple-bem is a BEM library that is easy to write and easy to read.

Install and Setup

bower install --save angular-simple-bem

angular.module('your-module', ['angular-simple-bem']);

or

npm install --save angular-simple-bem

angular.module('your-module', [require('angular-simple-bem')]);

Usage

Nest block or element

<div bem="block">
  <div bem="__elem1">
    <div bem="__elem2">nest block or element</div>
  </div>
</div>

<div bem="block" class="block">
  <div bem="__elem1" class="block__elem1">
    <div bem="__elem2" class="block__elem1__elem2">nest block or element</div>
  </div>
</div>

Modifier

<div bem="block--mod">
  <div bem="__elem--mod1,mod2">modifier</div>
</div>

<div bem="block--mod" class="block block--mod">
  <div bem="__elem--mod1,mod2" class="block__elem block__elem--mod1 block__elem--mod2">modifier</div>
</div>

Modifier with Binding

<div ng-init="foo = true; bar = false;">
  <div bem="block--mod1:foo,mod2:bar">modifier with binding</div>
  <div bem="block--::mod1:foo,mod2:bar">modifier with one time binding</div>
</div>

<div ng-init="foo = true; bar = false;">
  <div bem="block--mod1:foo,mod2:bar" class="block block--mod1">modifier with binding</div>
  <div bem="block--::mod1:foo,mod2:bar" class="block block--mod1">modifier with one time binding</div>
</div>

Modifier with Expression

<div ng-init="foo = {mod1: true}; bar = true;">
  <div bem="block--(foo)">modifier with expression</div>
  <div bem="block--::{mod2: bar}">modifier with expression(one time binding)</div>
</div>

<div ng-init="foo = {mod1: true}; bar = true;">
  <div bem="block--(foo)" class="block block--mod1">modifier with expression</div>
  <div bem="block--::{mod2: bar}" class="block block--mod2">modifier with expression(one time binding)</div>
</div>

Animation

angular-simple-bem supports add, remove. See AngularJS: API: ngAnimate.

License

MIT License