EN
БЭМ. Блок, Элемент, МодификаторПроекты на БЭМ

Проекты на БЭМ

Посмотреть на Github

Проекты на БЭМ

В этом разделе мы собрали полезные и интересные проекты на БЭМ.

Если вашего проекта еще нет в этом разделе, напишите нам на info@bem.info.

pobem

PostCSS плагин для удобного написания CSS по БЭМ.

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 {}

Автор проекта — Сергей Белозёрцев, gh: belozyorcev, @belozyorcev, belozyorcev@ya.ru.

bem-flashcards

Небольшой проект на основе project-stub с использованием библиотек bem-core и bem-history. Содержит набор английских слов с переводом, которые выводятся в виде переворачивающихся карточек. Есть возможность заменить словарь на другой или просто на произвольный набор пар фраз.

Для подготовки словаря из XLS-файла есть ruby-скрипт. Входной XLS-файл должен содержать три колонки (A, B, C): слово, транскрипция, перевод.

Проект готов к использованию. Форкайте, меняйте и дополняйте словарь.

Репозиторий проекта на GitHub, демонстрация.

Автор проекта — Алексей Кондратов, gh: ololobus, @ololobuss, kondratov.aleksey@gmail.com.

bem-grid

Библиотека для описания CSS-сеток. CSS-сетка построена на flexbox'ах и имеет деградацию для старых браузеров, а также она полностью настраивается под любые нужды через переменные, используют rem-единицы и суперскоростной Stylus. Основана на библиотеке bem-core.

Репозиторий проекта на GitHub.

Автор проекта — Антон Виноградов, gh: verybigman, @awinogradov, winogradovaa@gmail.com.

bem-ng

Библиотека для совместного использования БЭМ-методологии и AngularJS. Позволяет писать view-ориентированный BEMJSON.

Репозиторий проекта на GitHub.

Автор проекта — Антон Виноградов, gh: verybigman, @awinogradov, winogradovaa@gmail.com.

angular-bem

Набор директив для упрощения работы с БЭМ-версткой в AngularJS-приложениях.

Репозиторий проекта на GitHub.

Автор проекта - Андрей Яманов, gh: tenphi, @tenphi, tenphi@gmail.com.

bemy

Приложение на Node.js для манипуляций с БЭМ-структурой. Позволяет создавать и переименовывать БЭМ-сущности на файловой структуре (аналог команды bem create). Умеет создавать файловую структуру блока по deps.js-файлам сборщика ENB. Интегрируется посредством командной строки в Webstorm, Sublime и другие редакторы.

Репозиторий проекта на GitHub.

Автор проекта — Антон Грищенко, gh: f0rmat1k, f0rmateg@yandex.ru.

generator-bem-ng

Необыкновенный генератор БЭМ-проектов, использующих AngularJS. С ним вы сможете создать базовую структуру БЭМ-проекта и модули AngularJS приложения. Генератор использует непривычную, на первый взгляд, парадигму модулей, но очень удобную и правильную для тех, кто знаком с БЭМ.

Репозиторий проекта на GitHub.

Автор проекта — Антон Виноградов, gh: verybigman, @awinogradov, winogradovaa@gmail.com.

gem 'bem-on-rails’

Позволяет работать с БЭМ-методологией в проектах на Ruby on Rails.

Репозиторий проекта на GitHub.

Автор проекта — Антон Виноградов, gh: verybigman, @awinogradov, winogradovaa@gmail.com.

atom-bemjson-snippets

Набор сниппетов для быстрого набора BEMJSON в свободном редакторе Atom. Устанавливается из менеджера пакетов Atom.

Репозиторий проекта на GitHub.

Автор проекта — Антон Виноградов, gh: verybigman, @awinogradov, winogradovaa@gmail.com.

sublime-bemjson-snippets

Набор сниппетов для быстрого набора BEMJSON в редакторе Sublime Text (v2, v3). Установка возможна как вручную, так и через Package Control.

Репозиторий проекта на GitHub.

Автор проекта — Иван Лукьянец, gh: 1vank1n, @1vank1n, lukyanets.ivan@gmail.com.

bem-social

Библиотека блоков социальных виджетов для сайтов, использующих БЭМ-стек технологий. Share, Like, Follow, Yandex.Share API и другие. Содержит SVG-иконки социальных сетей и несколько тем оформления. Библиотека использует некоторые блоки библиотеки bem-components.

Репозиторий проекта на GitHub.

Автор проекта — Иван Воищев, gh: voischev, @voischev, voischev.ivan@ya.ru.

bnsf

Фреймворк для создания одностраничных приложений по БЭМ-методологии. Позволяет легко использовать единожды написанный код, в первую очередь шаблоны и маршрутизацию, как на клиенте, так и на сервере. Дружелюбен к поисковым системам. Зависит от bem-core, для шаблонизации использует BEMHTML и BEMTREE.

Репозиторий проекта на GitHub.

Автор проекта — Александр Савин, gh: apsavin, @apsavin, a.p.savin@yandex.ru.

sails-bem-project-stub

Заготовка проекта на Node.js MVC-фреймворке Sails.

В качестве фронтенда используется полный стек технологий БЭМ: BEMTREE, BEMHTML, i-bem.js, библиотеки bem-core и bem-components. БЭМ-блоки интерфейса находятся в папке views.

Проект настроен на использование mongoDB, но предоставляет возможность использовать произвольную базу данных.

Репозиторий проекта на GitHub.

Автор проекта — Александр Баумгертнер, gh: alexbaumgertner, @alexbaumgertner, alexbaumgertner@yandex.ru.

bem-site-engine

Проект для сбора и публикации документации, основанный на использовании библиотеки bem-core@v2*. Предназначен для запуска сайта с набором статей, представленном в удобном для навигации и поиска виде.

В проекте используются блоки из библиотеки bem-components. Более подробно про проект рассказывается в докладе на BEMup'е в Санкт-Петербурге.

На данный момент ветка dev стабилизирована и заморожена для разработки. Баги принимаем в issues проекта на GitHub.

Репозиторий проекта на GitHub.

Автор проекта – Андрей Кузнецов, gh: tormozz48, @kuznetsov48, andrey.kuznetsov48@yandex.ua.

bem-cn

Генератор имен классов по БЭМ-методологии. Лаконичный синтаксис изначально предназначался для использования в React-компонентах. Однако, утилита может использоваться и с другими фреймворками.

Репозиторий проекта на GitHub.

Автор проекта — Александр Бурцев, gh: albburtsev, burtsev@burtsev.me.

b_

Генератор классов по БЭМ-методологии с возможностью гибко настраивать синтаксис форматирования.

Репозиторий проекта на GitHub.

Автор проекта — Михаил Давыдов, gh: azproduction, i@azproduction.me.


Присоединяйтесь и вы!

Если вы заметили ошибку или хотите чем-то дополнить статью, вы всегда можете написать нам об этом.