Например хочу добавить к себе select, подключив dist, а html посмотреть не могу (его просто нет). https://ru.bem.info/libs/bem-components/v3.0.0/desktop/select/#mode

Привет!

Мы под покровом ночи выпустили 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 уже обновлен.

Есть блок, в котором есть кнопка и блок с картой от Яндекса. При нажатии на кнопку раскрывается карта. Реализовано через toggleMod. Заменяю текст кнопки через

var button=...
...
button.findElem('text').text("Скрыть")

Как сделать, чтобы при закрытии карты текст в ней снова стал "показать"?

Добрый день. Кому не сложно, запилите пример использования popup из библиотеки bem-components на чистом проекте project-stub. Пытался подключить как указано в примере на странице компонента, выдает ошибку `popup is not a function'.

Все привет! Недавно начал разбираться с BEM. Для нового проекта понадобилась адаптивная сетка, решил использовать bem-grid.

postcss([bemgrid({
    maxWidth: '1100px',
    gutter: '10px',
    flex: 'flex'
})]).process('a {color: red}').then(function(result) {
    console.log(result.css);
});

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

https://youtu.be/QoFBmlgr9ho

Добрый день. Подскажите, пожалуйста, есть ли статья по темам? Не хочу использовать "islands". Как создавать свои темы?

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

Я подключил bem-components в проект dist-способом

<link rel="stylesheet" href="https://yastatic.net/bem-components/2.4.0/desktop/bem-components.css">
<script src="https://yastatic.net/bem-components/2.4.0/desktop/bem-components.js+bemhtml.js"></script>

Также у меня есть форма с несколькими select-блоками из bem-components, html которых скопировал со странички описания:

<form class='filter-form i-bem' data-bem='{ "filter-form": {} }'>
    <div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"city"}}'>
        ...
    </div>
    <div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"region"}}'>
        ...
    </div>
</form>

Мне нужно при изменении значения определенного select, а именно city, выполнить некоторые действия (если интересно, то нужно сделать post-ajax и выполнить submit формы).

Вроде надо что-то типа этого:

modules.define('filter-form', ['i-bem__dom'], function(provide, BEMDOM) {
    provide(BEMDOM.decl(this.name, {
        onSetMod: {
            js: {
                'inited': function() {
                    var sity_select = findBlockInside('cityselect');
                    city_select.on(this.domElem, 'change', this._onCityChanged, this);
                }
            }
        },
        _onCityChanged: function() {  ...  }
    }))
});

Как правильно указать событие и указать конкретный select?

про bemjson и про bemhtml понятно, а про js не понятно...

Привет!

Хочется подписаться через делегирование на бэм-событие изменения чекбокса, как-то так:

modules.define('foo', ['i-bem__dom', 'checkbox'], function(provide, BEMDOM, Checkbox) {
  provide(BEMDOM.decl(this.name, {
    onSetMod: {
      'js': function() {
         Checkbox.on(this.domElem, 'change', this._onCheckboxChanged, this)
      }
    },
    _onCheckboxChanged: function() {
      ...
    }
  });
});

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

На предыдущих вебинарах мы говорили о декларативных возможностях CSS и BEMHTML, используемых в методологии БЭМ, а также о специальном фреймворке JavaScript для БЭМ.

В этот раз мы расскажем об open-source библиотеке БЭМ-блоков bem-components, используемой в Яндексе. Она вобрала в себя весь накопленный опыт и учитывает множество тонких нюансов от пуленепробиваемости благодаря БЭМ методологии и полному покрытию тестами, до соответствия высоким требованиям доступности (a11y).

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

Это вебинар для тех, кто уже немного знаком с БЭМ, знает HTML и CSS хотя бы на базовом уровне, понимает общие процессы веб-разработки и умеет пользоваться командной строкой. Также пригодятся знания, полученные на прошлых вебинарах. Для выполнения заданий понадобится терминал с установленными git, node.js и npm.

Обратите внимание, трансляция начнется в 17:00 16 марта на отдельной странице.

Важно! В этот раз мы хотим поэкспериментировать с Hangouts, так что трансляция будет выглядеть по-новому и предварительная регистрация не нужна.

Читал форум, наткнулся на несколько ответов о responsive, что можно писать стили для разных размеров браузера прямо в файле блока, так и делаю. А как быть, например с кнопками, селектами из bem-components? Какое нибудь есть решение или нужно дописывать media запросы для этих блоков?

Здравствуйте. Извиняюсь, если писать вопросы начинающего сюда это спам. Подскажите, если не прав.

Начал разбираться с БЭМ библиотеками для PHP, имею знание о существовании библиотек =)

1. bh-php
2. bem-core-php
3. bem-components-php

Мне удалось установить лишь первую библиотеку через composer(очень удобно), но если верно всё понимаю - ничего не будет работать как минимум без второй.

Вот тут в обсуждении мне подсказали, что есть библиотеки, используемые Node.js, а есть для PHP. Сам пока предпочитаю использовать голый PHP 5.6.

Второй и третьей библиотеки в composer не нашёл, в руководствах по использованию дано указание для установки использовать bower. Если верно понимаю, то composer это менеджер пакетов для PHP, а bower это менеджер пакетов для Node.js Возник диссонанс - зачем мне устанавливать что-то для PHP через bower? Наводит на мысль что делаю что-то неправильно. Вопрос может быть некорректным с высоты опыта опытных=), но хочу ликбеза.

По ссылке выложил свои действия по установке и пробе примеров указанных тут. Номер картинки - это шаг, номер действия. PHP Storm выругался на рисунках 4, 5 и 7, что удалось мне частично исправить на рисунках 8,9. Ну а результат сами видите.

Вопросы: 1) Какие библиотеки мне надо ещё установить и как не бояться bower, если он для работы с php тоже помогает? 2) Возможно это касается настроек самого PHP Storm, но по возможности хотелось бы знать, почему ваши примеры заставляют его ругаться?

BEM Design (pre-alpha) - http://bemdesign.github.io/bemdesign-blocks/

Первый набросок библиотеки блоков с кастомными БЭМ компонентами, для "живого прототипирования".

Библиотека на самом старте. Впереди большая работа последовательных улучшений:

• оптимизация текущих блоков
• формирование новых
• улучшение кастомных компонентов
• проработка стилистических тем
• ...

Кит дизайноориентированый. Тем кто хочет внести свой вклад и поработать со:

• стилизацией
• проектированием
• унификацией

Велкам!

bemdesign@yandex.ru https://twitter.com/bem_design

Цель: реализовать всплывающие подсказки в таблице при клике на иконку (если сравнивать, то тоже самое можно увидеть на маркете в информации о товаре).

@voischev подсказал, что лучше реализовывать не через popup, а через dropdown. Отсюда вопрос, как кастомизировать тот popup который вызывается через dropdown? Особенно интересует:

1) как установить положение для popup (которое по умолчанию bottom-left). 2) Как правильно изменить внешний вид. 3) В качестве посредника между ссылками и попапами может выступать таблица? 4) Такая конструкция считается годной или как то иначе нужно?

{
    elem : 'th',
    tag : 'th',
    content : [
        '1 year',
        {
            block : 'dropdown',
            mix : { block : 'hint', elem : 'handle' },
            directions : ['right-center'],
            mods : { switcher : 'link', theme : 'project', size : 's' },
            switcher : '',
            popup : 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
        }
    ]
}

С удивлением обнаружил отсутствие этой функции. Прощу помощи в расширении функционала стандартного модального окна в bem-components.

Hi. Как скрыть у блока attach: имя файла (элемент text); крестик для отмены выбора (элемент clear)?

Проверил возможность использовать БЭМ-стек в песочницах. Учитывая наличие dist-поставки bem-core-dist и bem-components-dist препятствий для этого быть не должно.

Мотивация

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

Эксперимент

Для эксперимента взял блок hello из статьи Собираем статическую страницу на БЭМ. Вот что получилось:

• JSFiddle - http://jsfiddle.net/ilyar/e4ovosht/
• Plunker - http://plnkr.co/jM93Sd
• CodePen - http://codepen.io/ilyar/details/NxzVEa/

  Особенности реализации

Шаблоны заворачиваем в модуль:

bemhtml

modules.define('BEMHTML', [], function (provide, BEMHTML) {
  BEMHTML.compile(function() {
    block('hello')(
      js()(true),
      tag()('form')
    );
  });
  provide(BEMHTML);
} );

bh

modules.define('BH', [], function (provide, bh) {
  bh.match('hello', function (ctx) {
    ctx.js(true);
    ctx.tag('form');
  } );
  provide(bh);
} );

Для возможности использовать bemjson реализовал блок:

/**
 * @module bemjson
 */
modules.define(
  'bemjson', ['i-bem__dom', 'BEMHTML'],
  function(provide, BEMDOM, BEMHTML) {

    /**
     * @exports
     * @class bemjson
     * @bem
     */
    provide(BEMDOM.decl(this.name, /** @lends bemjson.prototype */ {
      onSetMod: {
        js: {
          inited: function() {
            BEMDOM.replace(this.domElem, BEMHTML.apply(JSON.parse(this.domElem.text())));
          }
        }
      }
    }));
  }
);

Пример использования:

<script type="text/bemjson" class="bemjson i-bem" data-bem="{&quot;bemjson&quot;: {}}">
{
 "block": "hello",
 "content": ""
}
</script>

Результаты

В проверенных песочницах все отлично работает. Plunker и CodePen дают больше свободы и поэтому больше подходят для экспериментов с БЭМ-стеком, а Pluker больше всего, потому что позволяет все разложить по отдельным файлам.

К сожалению в IE8 не работает хотя все необходимые ресурсы (shim, ie.css) для этого подключены в Plunker и CodePen кроме JSFiddle, ошибка:

'modules' is undefined

Вопросы

• Какие есть варианты оформить bemjson отдельным файлом в Plunker?
• Может быть кто-то знает более подходящею песочницу для экспериментов с БЭМ-стеком?
• Тестирование, приветствуется.

UPD: v2

• Каким образом можно оформить bemhtml в песочнице?

Подскажите, пожалуйста. Есть блок, но в разных случая, к нему примиксовываю разные свойства. В случае с elem: 'price', стили блока перекрываются, а в случае с elem: 'heading' - нет. В чем может быть проблема?

    {
    block: 'title',
            mods: { level: 4 },
    mix: { block: 'search-result', elem: 'price' },
    content: '368,00 $'
   },
   {
    block: 'title',
            mods: { level: 4 },
    mix: { block: 'search-result', elem: 'heading' },
    content: '*******'
   },

Хочется в реакт проекте использовать весь браузерный js из bem-core + bem-components this.elem('foo') == что-то такое что реакту понятно

что бы рекваиришь *.browser.js из bem-components и оно работает в реакте

Никто не думал о подобном? Реально ли это? Что нужно предпринять?

Всем привет. Подскажите, пожалуйста, как переопределить стили блока select через модификатор или киньте пример, в документации ничего не нашел, кроме общего описания, что это возможно https://ru.bem.info/method/key-concepts/#Переопределение-блока .

мне нужно переопределить два свойства: Первое:

.menu-item_theme_islands.menu-item_checked {
/* background: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%…h d%3D%22M13.5.5l-8 12L1.7 8l-1 1.6L5.6    15l9.1-13.4z%22%2F%3E%3C%2Fsvg%3E") 0 50% no-repeat; */
}

заменить на

 .menu-item_theme_islands.menu-item_checked {
   background-color: #fc0;
}

Второе:

.menu_size_m .menu__group-title~.menu-item_theme_islands, .menu_size_m[class*=menu_mode] .menu-item_theme_islands {
padding: 0 30px;
}

заменить на

.menu_size_m .menu__group-title~.menu-item_theme_islands, .menu_size_m[class*=menu_mode] .menu-item_theme_islands {
padding: 0;
}

В итоге, вместо http://i.imgur.com/HYTWPsN.jpg должно получиться так: http://i.imgur.com/hxGDcse.jpg

Что я сделал:

1. Добавил модификатор к блоку select ( without : 'tick' )

   mods : { mode : 'radio-check', theme : 'islands', size : 'm', without : 'tick' },

2. В папке common.blocks/select/_without создал файл select_without_tick.deps.js ({

         mustDeps : { block: 'menu-item', mods: { without: 'tick' } }
   

   })

3. В папке common.blocks/menu-item/_without создал файл menu-item_without_tick.styl

   .menu-item_without_tick {
       padding: 0;
   

   &.menu-item_checked {

           background: none;
   background-color: #fc0;
   }
   }
   

Где у меня ошибка?

Всем привет! Какой файл нужно править, чтобы при выботе в блоке select какого-то значения, в кнопку попадало не значение text блока select, а icon? Второе, нужно избавиться от __tick, и просто выделять цветом.

При установке модулей Ноды выдает ошибку с питоном ( http://prntscr.com/9qfkyt ). понятно что дело уже пахнет жареным, но я все равно попробовал собрать проект node_modules/.bin/bem server при переходе на страницу http://localhost:8080/desktop.pages/index/index.html получаю http://prntscr.com/9qfm9g . может кто сталкивался с проблемами запуска данной библиотеки под Windows? (лог ноды - https://yadi.sk/i/RGhkB8whn3LDz) Project-stub нормально запускается и показывает демонстрационную страницу Версии софта $ node -v v0.12.2 $ npm -v 2.7.4