RU
BEM. Block, Element, ModifierBuild with BEM

Built with BEM

View it on Github

Built with BEM

We have gathered here useful and interesting projects built with BEM.

If your projects are not yet included here, email us at info@bem.info.

pobem

PostCSS plugin to abstract from BEM naming scheme: use your favorite scheme!

block('checkbox').mod('theme', 'dark') { // 1

  elem('box') { // 2
    border: 3px solid #543463;
  }

  elem('control') { // 3
    position: absolute;
  }

}

1 -> .checkbox_theme_dark {}
1 -> .checkbox_theme_dark .checkbox__box {}
3 -> .checkbox_theme_dark .checkbox__control {}

Authored by Sergey Belozyorcev, gh: belozyorcev, @belozyorcev, belozyorcev@ya.ru.

bem-flashcards

A small project based on project-stub and built using bem-core and bem-history libraries. Contains of a set of English words with translations that are shown as tipping cards. Has an option to change its dictionary for any other dictionary or for a set of random phrases.

To prepare a dictionary from an XLS-file use ruby-script. Input XLS-file shall contain three columns (A, B, C): a word, its transcript and its translation.

Project is ready to use. Fork, change and fill the dictionary up.

Project repository on GitHub, demonstration.

Authored by Aleksey Kondratov, gh: ololobus, @ololobuss, kondratov.aleksey@gmail.com.

bem-grid

A library to define CSS grids. CSS grid is built using flexbox and has a degradation for old browsers. It is fully customizable for any needs using variables, uses rem units and superfast Stylus. Based on bem-core library.

Project repository on GitHub.

Authored by Anton Winogradov, gh: verybigman, @awinogradov, winogradovaa@gmail.com.

bem-ng

A library to use BEM methodology together with AngularJS. Allows writing view-oriented BEMJSON.

Project repository on GitHub.

Authored by Anton Winogradov, gh: verybigman, @awinogradov, winogradovaa@gmail.com.

angular-bem

A set of directives to simplify your workflow with BEM-markup in AngularJS applications.

Project repository on GitHub.

Authored by Andrey Yamanov, gh: tenphi, @tenphi, tenphi@gmail.com.

bemy

A Node.js application for manipulations with BEM structure. Allows creating and renaming BEM entities on a file structure (analogue of the bem create command). Could be used to set up a block file structure using ENB building tool deps.js files. Works via shell with Webstorm, Sublime and other editing programs.

Project repository on GitHub.

Authored by Anton Grischenko, gh: f0rmat1k, f0rmateg@yandex.ru.

generator-bem-ng

An unusual generator of BEM projects that use AngularJS. Using it you can easily create a basic structure of a BEM project and modules of an AngularJS application. Generator uses a module paradigm that may appear rather unconventional, but that is in fact very convenient and appropriate if you're familiar with BEM.

Project repository on GitHub.

Authored by Anton Winogradov, gh: verybigman, @awinogradov, winogradovaa@gmail.com.

gem bem-on-rails

Allows working with BEM methodology in Ruby on Rails projects.

Project repository on GitHub.

Authored by Anton Winogradov, gh: verybigman, @awinogradov, winogradovaa@gmail.com.

atom-bemjson-snippets

A set of snippets for speedy generating of BEMJSON in Atom editor. Install from an Atom package manager.

Project repository on GitHub.

Authored by Anton Winogradov, gh: verybigman, @awinogradov, winogradovaa@gmail.com.

sublime-bemjson-snippets

A set of snippets for speedy generation of BEMJSON in Sublime Text (v2, v3). Install manually or use Package Control.

Project repository on GitHub.

Authored by Ivan Lukyanets, gh: 1vank1n, @1vank1n, lukyanets.ivan@gmail.com.

bem-social

A library of social widget blocks for sites built with BEM stack of technologies. Share, Like, Follow, Yandex.Share API and some others. Contains social networks SVG icons together with a few design themes. Library uses a few blocks of bem-components library.

Project repository on GitHub.

Authored by Ivan Voischev, gh: voischev, @voischev, voischev.ivan@ya.ru.

bnsf

A framework to create one-page application according to BEM methodology. Allows easy reuse of the same code, especially templates and routing, on both the client side and server side. Search engine friendly. Depends on bem-core library, for templating uses BEMHTML and BEMTREE, building with bem-tools.

Project repository on GitHub.

Authored by Alexander Savin, gh: apsavin, @apsavin, a.p.savin@yandex.ru.

sails-bem-project-stub

A project-stub based on Sails nodejs MVC framework.

Frontend part of the project-stub is built using full stack of BEM technologies including BEMTREE, BEMHTML, i-bem.js, bem-core and bem-components libraries. BEM-blocks of the interface are located within the views folder.

The project is configured to work with mongoDB, however allows an option to use any database.

Project repository on GitHub.

Authored by Alexander Baumgertner, gh: alexbaumgertner, @alexbaumgertner, alexbaumgertner@yandex.ru.

bem-site-engine

A bem-core@v2*-based project developed to collect and store documentation. The project is designed to create a site with a set of articles presented in an easy-to-navigate and easy-to-search form.

The project uses block of the bem-components library.

Now, the dev branch of the project repo is stable and frozen. If you find some bugs, report us with issues on GitHub.

Project repository on GitHub.

Authored by Andrey Kuznetsov gh: tormozz48, @kuznetsov48, andrey.kuznetsov48@yandex.ua.

bem-cn

BEM-friendly class names generator. Simple syntax was created originally to be used in React components, but it is good enough with any other frameworks.

Project repository on GitHub.

Authored by Alexander Burtsev, gh: albburtsev, burtsev@burtsev.me.

b_

BEM-friendly class names generator with an option of flexible adjustments of the formatting syntax.

Project repository on GitHub.

Authored by Mikhail Davydov, gh: azproduction, i@azproduction.me.


Join us with your projects!

If you've spotted a typo or a mistake, or wish to add something on, you could write about it.