Буквально на днях мы анонсировали библиотечку bem-font-awersome, которая предоставляет возможность использовать Font Awesome с использованием БЭМ-нотации и без необходимости тянуть лишние стили.

На этот раз мы пошли дальше и распилили шрифт на отдельные SVG-иконки, так что теперь на клиент приедет только то, что реально используется.

Новую библиотеку назвали bem-font-awesome-icons. Она предоставляет иконки в виде модификаторов блока icon в двух вариантах: как фоновая картинка (модификатор bg) и инлайном через шаблоны BEMHTML и BH, чтобы иконки можно было стилизовать через CSS (через модификатор glyph).

Поставляется библиотека через npm или bower.

Подробности см. в документации: https://github.com/tadatuta/bem-font-awesome-icons

UPD: Опубликовали альтернативный вариант, см. https://ru.bem.info/forum/1274

Привет!

Мы написали скрипт, который нарезает стили Font Awesome на отдельные файлы и раскладывает их по БЭМ методологии:

fa/
    fa.css # общие стили
    _icon/
        fa_icon_500px.css
        fa_icon_address-book-o.css
        fa_icon_address-book.css
        fa_icon_adjust.css
        fa_icon_adn.css

Соответственно использование в BEMJSON выглядит так:

{ block: 'fa', mods: { icon: '500px' } }

А в HTML:

<div class="fa fa_icon_500px"></div>

Результат выполнения скрипта опубликовали в npm, так что теперь вы тоже можете сэкономить несколько десятков килобайт при использовании ограниченного набора иконок.

Для это потребуется установить библиотечку к себе на проект: npm i bem-font-awesome --save и добавить ее в сборку в качестве уровня переопределения.

Исходники лежат тут: https://github.com/tadatuta/bem-font-awesome

Всем привет! Мне нравятся иконки Font Awesome, но не нравится подключать файлы расположенные на другом хосте, так же как и копировать все подряд. Это субъективное мнение, можно сказать личное предпочтение. Еще не всегда существуют в одной библиотеке все иконки которые нужны. Принято решение использовать кастомную накопительную библиотеку SVG-иконок. И конечно же использование по БЭМ-методологии. Хочу поделиться мыслями.

Реализация:

1) Каждая иконка является модификатором блока icon cтруктура папок:

    common.blocks/
        icon/
            _rub/
            _search/
            ...

2) На уровне common.blocks в папочках модификатора лежат файлики bemhtml.js, пример icon_rub.bemhtml.js:

block('icon')(
    mod('rub')(
        content()('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595 776"><defs><style>.icon_color{fill:#201600;fill-rule:evenodd;}</style></defs><title>rub_sign_1</title><path class="a" d="M573.39,118.92c-7.81-20.13-40.26-56.55-52.25-67.71-19.41-18.06-51.76-37.66-80.31-43.69C420.27,2.26,390,0,351.19,0L49.75,2V333.47H.5V440.09H49.75v39.67H.5V588.38H49.75V776H173.18V588.38H445.75V479.76H173.18V440.09H358c83.62-3.76,138.79-26.92,179.17-69.49,35.55-43.21,58.29-80.07,58.29-146.3,0-38.39-10.69-73.76-22.11-105.37ZM450.82,300.59h0c-21.69,24.84-38.48,26.91-91.63,32.88h-186v-226H357.47c35.4,0,57.94,8.26,70.5,12.77,20.52,10.86,26.19,18.07,33.1,25.91,14,23.1,22.84,40.18,22.84,71.79C480.5,266.5,471.37,276.5,450.82,300.59Z" transform="translate(-0.5)"/></svg>')
    )
);

3) На уровне desktop.blocks и пр. в папочках модификатора лежат стили icon_mods.post.css, пример icon_rub.post.css:

.icon_rub svg .icon_color
    fill #333
    stroke #333

.icon_rub svg
    margin 0
    height 21px

@media (--xlarge-only) {
    .icon_rub svg {
        height 19px
    }
}

@media (--large-only) {
    .icon_rub svg {
        height 15px
    }
}

со стилями цвета может перемудрил )))

4) В bundles файлике page.bemjson.js декларируется блок иконки:

{
    block : 'icon',
    mods : { rub : true }
}

Люди, хочется верить что схема идеальная, поправьте - если что не так.

Добрый вечер, подскажите пожалуйста есть ли в стеке bem библиотека tab? Найдя ссылку на одно из библиотек: https://github.com/bem-contrib/hackaton/tree/master/common.blocks/tabs, столкнулся с такой проблемой, что переключения вроде бы и есть, но переключение срабатывает только в 1 случае (Идёт смена контента), при дальнейших дейтсвиях, появляются уже оба контента.

Привет!

Мы, наконец, выпустили bem-history v4.0.0. История изменений.

По просьбе в нашем Телеграмм-чатике опубликовали мини-библиотечку bem-calendar с календарем на основе bem-components.

Выглядит он вот так:

Пользуйтесь на здоровье!

Недавно пришлось пописать на PUGJS... долго не смог это терпеть. Пришлось запилить 100 строчек кода, что бы писать нормальные шаблоны на BEMHTML в ExpressJS.

Код доступен как модуль https://www.npmjs.com/package/express-bem-xjst

Он умеет правильно работать с уровнями, кешируется и даже ничего не портит. Пробовал подключать bem-components — шаблонизирует все правильно.

Приятного использования тем, кто больше не может использовать ничего кроме BEM-XJST в шаблонах 😉

Привет!

Сегодня в bem-history появилась веточка v4, совместимая с bem-core v4.

Главное изменение — переименование блока uri в элемент uri__querystring, который расширяет базовую реализацию одноименного модуля из bem-core классом Uri. Методы класса сохранились без изменений.

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

Приятного использования!

Доброго времени суток. Подскажите пожалуйста кто знает, почему в bem-components и bem-core не используется SASS, а вместо этого все манипуляции над css совершаются с помощью JS? Чем обусловлен такой подход? Хочется очень услышать аргументы.

И небольшое пожелание по поводу ваших библиотек для BEM: запилите реализацию норм грида. Спасибо

Добрый вечер.

В конфиге уровни определены:

const builder = Builder({
    levels: [
        'node_modules/bem-core/common.blocks',
        'node_modules/bem-core/desktop.blocks',
        'node_modules/bem-core/touch.blocks',
        'node_modules/bem-components/common.blocks',
        'node_modules/bem-components/desktop.blocks',
        'node_modules/bem-components/touch.blocks',
        // 'node_modules/bem-components/design/common.blocks',
        // 'node_modules/bem-components/design/desktop.blocks',
        'common.blocks',
        'desktop.blocks',
        'touch.blocks'
    ],

Вопросы:

1) Означает ли что с данной настройкой - desktop.bundles/index/index.html соберет в себя уровень touch ?

2) У меня собирает уровень touch для desktop. так и должно быть? Необходимо в конфиге закомментировать "не нужное" находящееся на одном уровне с "нужным"?

Привет, друзья!

Мы наконец-то выпустили долгожданную версию bem-components 5.0.0! Это там самая версия, которая под капотом использует bem-core 4.1.1. Как и в bem-components 4.0.0, в версию вошли сразу 2 набора стилей: исходники на postCSS и скомпилированный CSS на случай, если вы предпочитаете использовать какой-нибудь препроцессор.

В ближайшее время на bem.info появится документация на эту версию.

Кстати, вы обратили внимание, как круто она выглядит в новом дизайне?

Давно хотел понять, пожалуйста поясните какой смыл в одинаковом содержании разделов платформ.

В документации библиотеки, например BEM Components страницы уровней переопределения "платформы" выглядят идентично с точки зрения документации.

Понятно что каждый уровень может содержать доопределения и какие именно можно разглядеть в табе "Source" (если внимательно присмотреться), и как следствие демонстрация блоков учитывает эти доопределения.

При этом дока, html, BEMJSON deps на первый взгляд идентичны.

Какая в этом польза?

Сделал простой wysiwyg редактор. Посмотреть можно здесь Код здесь Работы еще много, поэтому буду рад любой помощи. Присоединяйтесь:)

Всем привет. Занялся портированием Animate.CSS на БЭМ. Начал делать для себя, но т.к. это оказалось удобно - решил сделать для сообщества. Портирована для тех, кто не хочет каждый раз настраивать анимации вручную.

Ссылка на GitHub с инструкцией по подключению.

Статус портирования

Перенесены все анимации из AnimateCSS, они доступны по модификатору type:

Например: fadeInDown -> animate_type_fade-in-down

Дополнительно

В дополнение есть ещё несколько модификаторов: animation_speed_{1,2,3,4,5} - скорость анимации animation_delay_{1,2,3,4,5} - задержка анимации animation_direction_{reverse,alternate,alternate-reverse} - направление анимации

Благодарность

Спасибо @Flyer3d за помощь с портированием эффектов и также сообществу за голосование/обсуждение реализаций.

JS

На данной стадии JS блока есть только для bem-core@v4. Позже появится для bem-core@v3.

Сейчас JS позволяет менять модификаторы и вещает 3 вида событий: start, end, iteration.

Чего ждать в ближайшем будущем?

Расширение API. Будут добавлены методы: queue, start, stop, pause, reset

Примерная реализация:

// Просто старт анимации
animation.start('fade-in-down');

// С передачей объекта с функциями обратного вызова
animation.start('fade-in-down', {
  onStart: function() {},
  onEnd: function() {},
  onIteration: function() {}
});

// Простой обратный вызов по завершению
animation.start('fade-in-down', function () { 
  console.log('animation end')
});

// Простая очередь
animation.queue(['fade-in-down', 'flip-x', 'fade-out']);

// Очередь с обратным вызовом по завершению
animation.queue(['fade-in-down', 'flip-x', 'fade-out'], callback);

// Расширенные параметры для очередей
animation.queue([
  {type: 'fade-in-down', onStart: callback, onEnd: callback}, 
  {type: 'flip-x', onStart: callback, onEnd: callback}, 
  {type: 'fade-out', onIteration: callback}
], callback);

Всем приятной разработки! :)

Жду комментариев и участия заинтересованных людей ;)

upd Спасибо @JiLiZART, добавил ещё несколько методов в планы :)

По ходу своей работы, часто сталкиваюсь с ajax запросами внутри i-bem блоков. Часто повторяющиеся паттерны решил вынести в отдельную надстройку над jquery.ajax.

Где можно использовать?

Допустим у вас есть кнопка, которая по клику на себя, добавляет куда то контент, а когда контента нет, удаляет сама себя

_onButtonClick: function () {
    Http
        .abortable(this)
        .get(this.params.url)
        .then(function (response) {
            BEMDOM.replace(this.domElem, response.getText());
        }.bind(this));
}

Eсли вдруг по кнопке нажали два раза, предыдущий запрос отмениться, так же навешаются правильные обработчики, которые, в случае удаления блока, остановят запрос и удалят все ненужные ссылки.

Или по клику на ссылку вам нужно подгрузить текст для модального окна, закешировать его, и при последующих кликах отдавать данные из кеша.

_onButtonClick: function () {
    Http
        .once(this)
        .get(this.params.url)
        .then(function (response) {
            this.showModal(response.getText());
        }.bind(this));
}

запрос на сервер отработает только единожды, последущие вызовы, этой функции, запросы на сервер делать не будут, просто буду возвращать отработанный промис.

Или вам нужно делать много разных запросов в разные места, но нужно чтобы выполнился только последний.

this._req = Http.abortable(this);

this._req.get(this.params.someUrl).then(this._onSomeDone); //этот запрос отменится, т.к следом идет другой
this._req.get(this.params.anotherUrl).then(this._onAnotherDone);

Не нужно плодить дополнительных переменных, самому вызывать abort() у jqXHR перед другим запросом.

Или если нужно сделать два разных запроса в разные места

Http.abortable(this, 'some').get(this.params.someUrl).then(this._onSomeDone);
Http.abortable(this, 'another').get(this.params.anotherUrl).then(this._onAnotherDone);

https://github.com/JiLiZART/bem-http

Ставим через bower install bem-http, и подключаем в уровнях { path: 'libs/bem-http/common.blocks', check: false }.

Пример как использовать в блоке https://github.com/JiLiZART/bem-http/blob/master/example.blocks/app/app.js

P.S. Если есть какие либо идеи по улучшению API, буду очень благодарен.

Добрый день! Сразу говорю, документацию не читал, в философии не разбирался. Вопрос только один. Существует достаточно много js библиотек для построения интерфейса. У некоторых из них (ext.js, smartclient, webix, qooxdoo и пр.), есть возможность писать представление прямо в javascript по способу, очень похожему, который описан в bemjson. Это я считаю очень удобно, код получается чистым. А у некоторых из них сделано все это не очень красиво: аля jquery ui. Т.е цепляемся к определенным dom элементам по css селектору и прописываем в js свойства. Такой метод конечно хорош для простого сайта, но для полноценной SPA - не очень приятно. Например кнопки тулбара одна библиотека хранит в json, а сам тулбар цепляется к dom элементу, другая требует чтобы обязательно див элементы на эти кнопки и т.п.. В результате получается бардак. За примером далеко ходить не надо, посмотрите easyui, jQWidgets, kendo UI и тп. Я хочу писать подобные вещи без строчки html кода. Сможет ли bem превратить json код в что-то аля:

<body>
   <input id = ‘spinner’ class="easyui-numberspinner" 
</body>
<script>
$('# spinner’). numberspinner ({increment:10});
</script>

@tadatuta рассказал как использовать автоматическую генерацию актуальной документации для модульного фронтенда, презентация.

~Осталось не понятно, как это использовать. Покажите минимальный кейс использования bem-lib-site и расскажите где читать про остальное.~

UPD

git clone git@github.com:ilyar/bem-lib-site-test.git
cd bem-lib-site-test && npm install
npm test
open docs/index.html

Работает, хак внутри (может быть он уже не нужен). Сборку можно посмотреть тут ilyar.github.io/bem-lib-site-test/.

UPD 1/1/17

Убрал один хак https://github.com/ilyar/bem-lib-site-test/commit/a18e4849d46ed3ec370823080b204b3e14041877, добавил автотест генерации доки:

Привет всем! Мы разложили "материальные иконки" от google по БЭМ методологии. репозиторий: https://github.com/appwilio/bem-material-icons

Добрый день! Внимательно прочитал всю доступную документацию в старом виде и в новом, несколько статей, посмотрел несколько вебинаров и лекций. Но некоторые моменты всё равно ускользнули от моего внимания и понимания. В целом эта непонятная ситуация причиняет мне физический дискомфорт. Боюсь, что для понимания многих вещей, придется просмотреть много кода, что бы найти примеры использования, а это камень в огород документации. Без ответа на эти вопросы, я буду плавать в методологии и не смогу ей воспользоваться.

Из документации я не понял:

1. Шаблонизация в браузере когда и зачем нужна? Я предполагаю, что весь HTML будет собираться на сервере, в том числе, что динамично будет отправляться клиенту. Но, коль есть возможность компилировать в браузере, хотелось бы узнать о плюсах и кейсах, когда это может понадобиться. Что, касательно ресурсов, насколько это ресурсозатратно?

2. Возможность частичной сборки и компиляции со статичными html файлами Многие элементы интерфейса - статичные, например, шапка, меню, футер, общие лейауты. Собирать их отдельно для каждого клиента - бессмысленно. Возможно ли как-то объединять уже собранный, статичный HTML и динамичные блоки?

3. Документация про сборку Я прочитал весь раздел про enb, но там скорее кейсы, чем сама архитектура. Мне непонятно, как организовать сборку для проекта в целом.

4. Как организовать сборку для дева, прода, лайв В продолжение предыдущего вопроса - для разработки и для прода требуются разные настройки. Я правильно понимаю, что разные настройки обеспечиваются разными файлами по типу make.js ?

5. Документация про декларацию Я не нашел цельной информации про декларацию (?.bemdecl.js), и всё, что я про это знаю - частички из статей про enb, из-за этого складывается ощущение, что я чего-то не догоняю.

_6. Почему и зачем есть BEMHTML и bh, какой для каких ситуаций лучше _ Я долго пытался понять - что делает bh, пока не понял, что это - еще один шаблонизатор, такой же, как BEMHTML. Так в чём же разница, и как так получилось, что есть два шаблонизатора? Какой из них под какие цели заточен? И, кстати, про bh нет документации.

_7. Где доки про BEMTREE, когда что лучше использовать _ Про BEMTREE лишь сказано, что синтаксис "Такой же, как в BEMHTML, но только с двумя режимами", при всём при том, что это - важный и основной инструмент при сборке. Очень хотелось бы увидеть примеры и объяснения, как делать шаблоны для BEMTREE.

8. Доки про SASS|LESS| любые модули Основной инструмент библиотеки для css - stylus, по историческим причинам. Хотелось бы узнать, как можно использовать другие препроцессоры. Я часто встречал мнение, что БЭМ - навязывает свой стек. Я понимаю, что это не так, просто инструменты дефолтные такие. Хотелось бы узнать, как можно в сборку включать те, что соответствуют моему стеку.

9. Контроллеры для сборки, практики BEM - штука хорошая, но кажется очень замкнутой в себе из-за того, что до конца не ясен сам процесс сборки и связь с внешним миром. Во всех статьях и гайдах говорится в-основном о статичных сайтах. И из-за этого, совсем мне не понятно, как сделать динамичный сайт, как организовать динамичную и частичную сборку, роутинг и т. д.

10. Шапка, лейаут в общем html Возможно, мой мозг еще не переключился в БЭМ-область, но мне до конца не ясно, как сделать общие части интерфейса для всех страниц сайта - каждый раз подключать header, content, footer?

11. Подключение скриптов, стилей, других библиотек. Если подключение своих скриптов, всё худо-бедно понять можно, то как подключить скрипты библиотек? Их ведь нужно указать в head (а некоторые скрипты в футере). Как же это всё делается в рамках шаблонов, страниц? Хардкодить?

12. Какие практики бандлов Из документации мне совсем не понятно что такое и для чего нужны бандлы. Как я понял - это собранные пакеты css и js, но куда их нужно пихать и зачем - непонятно.

13. Борщик Для чего борщик существует внутри enb, ведь в enb есть другие инструменты, для работы с файлами. В чем его отличие и назначение?

Возможно, многие вопросы очевидные или неправильно сформулированы, про неправильное пользование той или иной технологией. Каждый из этих вопросов - для меня важный, прошу, если вы знаете ответ или имеете мнение хоть по одному из них - не стесняйтесь.

Привет!

Только что вышел релиз bem-history 3.2.0.

Основное изменение — поддержка bem-core 3.x в bower.json. И, конечно, несколько багфиксов в комплекте.

Предполагается «бесплатное» обновление.

Привет!

Мы под покровом ночи выпустили bem-components 3.0.0!

Несмотря на мажорную версию, обновление должно быть «бесплатным»: просто обновите версию в bower.json и пересоберите проект.

Тогда почему мажор? Потому что:

• обновили зависимость от библиотеки bem-core до версии 3.0.1, где оторвали FastClick в пользу собственного решения для iOS
• отказались от поддержки древних версий bem-xjst (вы ведь уже давно обновились?)
• переименовали *.bemhtml в *.bemhtml.js (даешь подсветку синтаксиса!)
• и еще по мелочи.

Теперь версия публикуется с предкомпилированным CSS, так что больше нет необходимости использовать Stylus для сборки (вреда однако ж тоже никакого ;)

Кроме того, версия теперь публикуется еще и в npm.

И как всегда, помимо основного варианта поставки в виде исходников, доступна не требующая сборки dist-поставка для локальной установки в проект и для прямого подключения с CDN.

Подробно со списком изменений можно ознакомиться здесь.

Приятного обновления!

PS: project-stub уже обновлен.

Попробовав project-stub, теперь не могу слезть с него. Думаю над проектом уже в виде блоков, элементов, модификаторов и тд. Нужен сервис, бэкенд которого работает только с базой данных. Принимает и отдает в json. Работает на php. Это есть. Но фронтенд должен отвечать за весь функционал, routing, запросы через http request к серверу. Ну вы поняли. Здесь мне нравится angular 2 со встроенным роутингом. Что на счёт bem? Есть решения? Сделав часть проекта на ангуляре втором, понимаешь что не хватает БЭМ(((

Подскажите был ли в bem-bl метод destruct() у блока? Заинтересовал вот этот код. Под bem-core он работать отказывается. Я заменил на BEMDOM.destruct() но вопрос, правильно ли?

Устанавливаем project-stub

1. Устанавливаем project-stub

git clone https://github.com/bem/project-stub.git --depth 1 --branch v1.5.0 my-bem-project
cd my-bem-project
npm install # Do not use root privilege to install npm and bower dependencies.

1. Устанавливаем bem-grid

npm i --save-dev bem-grid
bower install --save bem-grid

!!! ВАЖНО установить двумя способами через npm и bower UPD: говорят, что работает даже с одним npm

1. Заходим в папку проекта. Редактируем файл my-bem-project/.enb/make.js Добавляем строчку

{ path: 'libs/bem-grid/common.blocks', check: false },

// make.js
...
  enbBemTechs = require('enb-bem-techs'),
    levels = [
        { path: 'libs/bem-core/common.blocks', check: false },
        { path: 'libs/bem-core/desktop.blocks', check: false },
        { path: 'libs/bem-components/common.blocks', check: false },
        { path: 'libs/bem-components/desktop.blocks', check: false },
        { path: 'libs/bem-components/design/common.blocks', check: false },
        { path: 'libs/bem-components/design/desktop.blocks', check: false },
        { path: 'libs/bem-grid/common.blocks', check: false }, // Добавили сюда
        'common.blocks',
        'desktop.blocks'
    ];
...

1. В этом же файле находим //css и заменяем на

// make.js
...
        //css
            [techs.stylus, {
                target: '?.stylus.css',
                sourcemap: false,
                autoprefixer: {
                    browsers: ['ie >= 10', 'last 2 versions', 'opera 12.1', '> 2%']
                }
            }],
            [require('bem-grid').enb, {
                source: '?.stylus.css',
                target: '?.css',
                config : {
                    maxWidth : '1100px',
                    gutter : '10px',
                    flex : 'flex'
                }
            }],
...

1. Готово. Теперь можем писать так

// index.bemjson.js
...
{
    block : 'row',
    content : [
        {
            elem : 'col',
            elemMods : { mw : 6 },
            content : 'left column'
        },
        {
            elem : 'col',
            elemMods : { mw : 6 },
            content : 'right column'
        }
    ]
}
...

В итоге получим

...
<div class="row">
    <div class="row__col row__col_mw_6">left column</div>
    <div class="row__col row__col_mw_6">right column</div>
</div>
...

Старался писать как можно подробней. Источник: по ссылке

Какой из вариантов вернее?

Первый

{
         block: 'row', //bem-grid row
         mix: {block: 'someelse'}, // добавляю падинги 
         content: [
              {
                  elem: 'col',
                  elemMods: {mw: 12},
                  content:
                       {
                            block: 'someelse',
                            elem: 'heading', // элемент блока someelse
                            content: 'Какой-то заголовок секции'
                       }
             },
             {
                 elem: 'col', 
                 elemMods: {mw: 6}, 
                 content: 
                     {
                         block: 'someelse',
                         mix: {block: 'box'},
                         elem: 'item',
                         content: 'some content'
                     }
             }
         ]
}

Второй

{
    block: 'row', //bem-grid row
    content: {
         block: 'someelse',
         content: [
              {
                  block: 'row',
                  elem: 'col',
                  elemMods: {mw: 12},
                  content:
                       {
                            elem: 'heading', // элемент блока someelse
                            content: 'Какой-то заголовок секции'
                       }
             },
             {
                 block: 'row',
                 elem: 'col', 
                 elemMods: {mw: 6}, 
                 content: 
                     {
                         mix: {block: 'box'},
                         elem: 'item',
                         content: 'some content'
                     }
             }
         ]
     }
}

В первом мы примиксовываем стили, во втором вкладываем блок "someelse" в строку "row".

В первом случае приходится потом постоянно объявлять блок при создании элементов блока

...
block: 'someelse', 
elem: 'item'
...

во втором случае приходится объявлять

...
block: 'row', 
elem: 'col'
...

Как быть? Может быть скинете примеры реализации в уже рабочих проектах?

Вы меня конечно простите, если я задаю тупые вопросы. Просто я хочу докопаться до сути, чтобы потом двигать БЭМ в массы.

Доброго времени суток.

Кто-нибудь работал с ColdFusion и БЭМ? Возможно ли использовать их вместе?