Войти с помощью github

Всем привет. Прислали вот такой скриншот. https://yadi.sk/i/5-NyX9-Abc3he Попап себя отлично ведет на разрешениях меньше 2000px. Когда больше почему то съезжает на 20px.

В js ничего странного.

modules.define('menu-control', ['i-bem__dom'], function(provide, BEMDOM) {

provide(BEMDOM.decl(this.name, {
    onSetMod : {
        'js' : {
            'inited' : function() {
                var control = this.findBlockInside({ block : 'checkbox', modName : 'theme', modVal : 'menu'});
                var popup = this.findBlockInside({ block : 'popup', modName : 'theme', modVal : 'menu'});

                popup.setTarget(this);
                control.bindTo('click', function() {
                    popup.toggleMod('visible');
                });
            }
        }
    }
}));

});

В css похоеже тоже ничего не обычного. Сайт http://domjourvrn.ru .

Посмотрите может бага?

Вот такой вот у меня make файл, поставил, заинсталил все в libs npm/bower, но не взлетает js файл, пишет, что modules is not defined, так понимаем, что ym не подключается в начало, хотя объвление i-bem-dom. :( Как его подружить? Уже много способов вроде перепробовали, но ничего не получается.

module.exports = function(config) {
  config.node('pages/index', function(nodeConfig) {
    nodeConfig.addTechs([
      [ require('enb/techs/levels'), { levels: getLevels(config) } ],
      [ require("enb/techs/file-provider"), { target: "?.bemjson.js" } ],
      require("enb/techs/bemdecl-from-bemjson"),
      // [ require('enb/techs/file-provider'), { target: '?.bemdecl.js' } ],
      require('enb-bh/techs/bh-server'),
      require('enb-bh/techs/bh-client'),
      require('enb/techs/deps'),
      require('enb/techs/files'),
      require('enb/techs/css-stylus'),
      require('enb-bh/techs/html-from-bemjson'),
      [ require('enb-diverse-js/techs/browser-js'), { target: '?.pre.js' }],
      [ require('enb-modules/techs/prepend-modules'), { target: '?.js', source: '?.pre.js' }],
      // require('enb/techs/js'),
      // [ require('enb/techs/file-copy'), { sourceTarget: '?.js', destTarget: '_?.js' } ],
      [ require('enb/techs/file-copy'), { sourceTarget: '?.css', destTarget: '_?.css' } ]
    ]);


  nodeConfig.addTargets(['?.html', '?.bemdecl.js', '?.deps.js', '_?.js', '_?.css', ]);


  });
};


function getLevels(config) {
  return [
    {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: 'common.blocks', check: true},
    {path: 'desktop.blocks', check: true}
  ].map(function(levelPath) { return config.resolvePath(levelPath); });
}

Здравствуйте. По этой ссылке http://jsbin.com/xulado/7/edit размещено два экземпляра виджета табов. Примеры выдернуты из рабочего проекта. Цель — сделать виджеты, которые не поломают верстку и JS. К стилю контейнеров применены селекторы тем. Интересует насколько приемлемо с точки зрения методологии БЭМ применять такой способ изменения внешнего вида блоков. Может будет лучше дописывать к каждому элементу модификатор?

Пытаюсь установить bem сервер на своем компьютере (Macbook Air, OS X 10.9.4) Делаю все по инструкции ru.bem.info/tutorials/project-stub После команды 'bem server' перехожу на страницу localhost:8080/desktop.bundles И вижу следующее сообщение

HTTP error 500

Error: Tech module with path '/Users/my_username/lab/project-stub/libs/bem-core/.bem/techs/bemhtml.js' not found on require search paths at exports.Level.INHERIT.resolveTechPath (/Users/my_username/lab/project-stub/node_modules/bem/lib/level.js:280:19) at exports.Level.INHERIT.resolveTech (/Users/my_username/lab/project-stub/node_modules/bem/lib/level.js:228:25) at exports.Level.INHERIT.resolveTechName (/Users/my_username/lab/project-stub/node_modules/bem/lib/level.js:244:47) at exports.Level.INHERIT.resolveTech (/Users/my_username/lab/project-stub/node_modules/bem/lib/level.js:231:25) at exports.Level.INHERIT.createTech (/Users/my_username/lab/project-stub/node_modules/bem/lib/level.js:206:32) at exports.Level.INHERIT.getTech (/Users/my_username/lab/project-stub/node_modules/bem/lib/level.js:193:43) at null. (/Users/my_username/lab/project-stub/node_modules/bem/lib/nodes/bundle.js:64:28) at Array.forEach (native) at null. (/Users/my_username/lab/project-stub/node_modules/bem/lib/nodes/bundle.js:62:29) at Promise.apply (/Users/my_username/lab/project-stub/node_modules/bem/node_modules/q/q.js:1122:26)

Что означает это сообщение? И как сделать, чтобы все заработало?

В статье http://ru.bem.info/tutorials/start-with-project-stub/ используется project-stub из ветки master и там совсем странный результат получается.

Могли бы показать какой-нибудь проект с таким кодом? Я вижу, что есть некий midleware в enb и есть возможность сделать builder, но хотелось бы посмотреть как это сделать "правильно", есть у кого примеры, которыми он может поделиться?

Здравствуйте всем! При прохождение руководства "Создаем свой проект на БЭМ" я столкнулся с проблемой. Я шел по этому руководству, ничего не пропускал и в разделе "BEMHTML-шаблоны" в файл goods.bemhtml я написал/вставил нужный код, а затем решил посмотреть как выглядит index.html и заместо ожидаемого содержимого увидел такую ошибку: http://firepic.org/images/2014-09/14/m707f9za5aj0.png Полез в доки, там черным по белому написано также. Если убрать this.ctx.url и написать, к примеру, какую-нибудь строку типа "test", то все в порядке и страничка index.html отображается нормально.

У меня есть некий блок с Голосованием (.vote). В нем есть две кнопки "За" и "Против" (button.voteaction). Так же у меня есть блок Кнопка (.btn). Кнопки "За"/"Против" должны быть блоками Кнопка (button.voteaction.btn) - т.е. микс получился. При клике на кнопки "За" или "Против" я хочу, что бы они выделялась цветом, например зеленым. Для этого у блока Кнопка есть модификатор green (.btn_theme_green) Т.е. при клике на voteaction с помощью JS я добавляю ей модификатор voteaction_active, но при это я должен добавить и класс btn_theme_green. Использовать в JS классы btn и btn_theme_green не хочется ибо кнопки могут быть заменены на другие (например, .btn34).

Скажите как правильно огранизовать взаимодействие этих двух блоков в JS?

Есть БЭМ блок, у которого прописаны свои поведения. Изначально его на странице нет. но в deps он прописан поэтому все исходники подгружаются. Так вот. Надо чтобы по событию нажатия кнопки, в DOM добавлялся этот блок. Таких блоков может быть добавлено много. Необходимо чтобы он при всем при том еще и работал. Каким образом это сделать?

Привет. Наткнулся на такую проблему. Когда делаю попап

 {
                block : 'popup',
                mods : { autoclosable : true },
               ...
}

Внутри которого есть блок select который в свою очередь использует блок popup, то по клику (выбору их селекта) попап родитель скрывается.

Подскажите как лечить? Знаю про то что блок popup будет переделан, понимаю что скорее всего не подразумевалось что попап может быть в попапе с поведением автоскрытия, но интересны варианты решения.

Кто-нибудь пробовал запускать преобразование большого количества таргетов? bh/html-from-bemjson-i18n намертво застревает, можно 20 минут смотреть, как оно потихоньку съедает память, но ни одного файла так и не появится. Проявляется при превышении определённого количества таргетов, windows 7. До этого при помощи bemtree успешно билдится такое же количество bemjson-файлов.

А пока пришлось наваять такую кашу в enb-make, чтобы билдить порциями https://gist.github.com/xdghcnt/501a7e9b293fd270405c

Эти выходные с BEMup'ом в Питере были просто чудесны! Не говоря про погоду, которая просто была сказочной, программа митапа была насыщенной, а многие приехали в Питер аж из Москвы посмотреть и пообщаться с нами. Спасибо, мы тронуты!! А еще нас много просили показать мастер-класс не самим, а сделать так, чтобы пришедшие участники могли писать код. А это ой как не просто! Почти 2 месяца подготовки заданий и написания тестов, сто раз проигранные в мозгу планы, трансляция, видео, зал, как все это соединить воедино, плюс тестирование на --котиках-- коллегах, и вот он долгожданный день! Это был урок, проверка, и круто, что все получилось! Даже коллеги не из службы БЭМ подходили и говорили: «Круто! Я сделал что-то сам на bem-core!» И да, нам есть, что теперь оттачивать дальше, к ноябрю А вы это, не расслабляйтесь! https://tech.yandex.ru/events/bemup/ :) Видео как всегда через 2 недели в разделе «Выступления», фото уже тут https://www.facebook.com/media/set/?set=a.825215090831947.1073741904.122612334425563&type=1, вопросы к нам можно писать в форум и помечать 2-мя метками — продукт и asktheteam

https://github.com/factorymn/bem-factory/tree/master/common.blocks/fancybox

Обернул fancybox в модульную систему. Мне кажется что не верно в данном случае провайдить jquery. Что там должно быть?

Как и в случае с https://github.com/bem/bem-forum-content-ru/issues/49 плагин работает из скоупа jquery

После клика на кнопку сохранить ничего не происходит. Бесконечно прокручивающийся желтый загрузчик.

После перезагрузки страницы: Метки не обновляются, но заголовок исправляется.

Chrome 36

Есть какое-то стандартное решение?

Здравствуйте. Занимаюсь сабжем. Я - дизайнер, на проекте совмещаю две работы - проектирую/прототипирую интерфейс, а после согласовки - рисую его красиво. Я - ни разу не программист/верстальщик/кто-либо другой.

Давно вожу жалом в сторону БЭМ; он привлекает меня даже не потому, что иногда приходится общаться с программистами, а потому, что вижу в нём помощь в самоорганизации. Проблема старая и всем знакомая - проект крупный, и всё в башке нереально удержать, приходится как-то структурировать.

В общем, довольно прелюдий, вот мой ламеронубский вопрос.

Очевидно, что шапка сайта - блок. Она есть на всех страницах. А внутри шапки еще довольно-таки самостоятельные блоки: логотип, выпадающий список с языками, меню навигации, поп-ап с формой логин/пароль/войти, поп-ап с регистрацией. Или же эти объекты нужно считать элементами блока "шапка"?

То есть, у меня проблемы с логикой методологии, помогите разобраться.

Второй вопрос из этой же серии. В статье на хабре ( http://habrahabr.ru/company/yandex/blog/234905/ ) сказано:

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

В таблице - ячейки. Ячейка - элемент. Допустим, внутри ячейки мы имеем какой-то интерфейс, допустим - форму ввода каких-то данных, грубо говоря - пару полей и кнопка вроде "сохранить". Вот этот интерфейс внутри ячейки считать блоком? Блоком со своими элементами? То есть, может ли элемент внутри себя иметь блок? Как их в таком случае лучше называть? Допустим, таблица - блок с названием b-table. Следовательно, имя ячейки - b-table__cell. А как тогда назвать нашу формочку внутри ячейки, учитывая что она тоже блок? b-table-cell-form? b-cell-form? b-form?

После нескольких попыток подобраться к данной технологии, стало ясно - отсутствие документации никак не продвинет технологию в массы.

Читать, что-то на форумах, в каких-то статьях и не понятном разделе "Руководства" - очень интересно, но кроме каши не дает ничего.

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

Нет примеров кратких но самодостаточных, большинство тем возникали на форуме.

Нигде не сказано, что новым трендом в данной технологии является выделения mVc в отдельный bundle design. Изобилие bem и enb в разных статьях, в документации должно быть что-то одно.

Ситуация вводящая в ступор:

  • создаем страницу bem create -l desktop.bundles -b index на выходе получаем один файл index.bemjson.js;
  • компилируем bem make, на выходе еще получаем 10 файлов.

WTF? Что за файлы, за что отвечают, являются ли они build файлами и не подлежат ручному редактированию? Почему финишные файлы называются по разному, например index.html _index.css _index.js? Нельзя ли результат компиляции, что не подразумевает ручного редактирование перенести в подпапку distr например?

Очень нужна документация, по каждой технологии, устаревшие технологии документировать не первостепенно. Показывать примеры и с подгрузкой данных через API, и динамическое изменение DOM.

Из того, что не критично, но хотелось бы получить:

  1. право переопределять константы BEM_CLASS и BEM_PARAMS_ATTR, ну не нравится мне i-bem и data-bem, хочу получить js и data-js;
  2. не нравится именование модулей i-bem__dom, i-bem как-то не вписывается в Code Style.

Из документаций которые покрывают 99% вопросов мне нравится https://docs.djangoproject.com/en/dev/ http://symfony.com/doc/current/index.html http://git-scm.com/doc - это те документации, которые рассказывает и о различных приемах, и о назначении, и полноценные use case.

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

Привет. Занимаюсь тем, что пытаюсь внедрить БЭМ стэк на уже готовый к первому релизу проект. Т.к. полностью и сразу мне его на БЭМ переводить никто не дает, то я решил поступить следующим образом, определить бандл components, в components.bemdecl.js объявить зависимости от всех блоков, которые у меня сейчас есть, и понемногу начинать разбивать код сайта на блоки там где я могу это безболезненно сделать. В принципе такой подход работает. Но меня напрягает необходимость после добавления нового блока в мой уровень, прописывать его в deps файла components.bemdecl.js, по-любому кто-то будет забывать это делать. Можно как-то сделать, чтобы у меня собирались все блоки со всеми элементами уровня по умолчанию, без необходимости править components.bemdecl.js?

Привет! Подскажите есть в природе enb или bem-tools технологии для работы с графикой(jpg/png/svg). Например блок с фоновой картинкой(картинка лежит гдето в папке блока)

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

Неправославный вопрос: кто-то пробовал разрабатывать, используя бем и Enb, под виндой? Работает ли? Какие могут возникнуть подводные камни?

Подскажите как создать блок BEM (в идеале из BEMJSON) в runtime, например по событию нажатия на кнопку, и добавить его в к содержимому другого блока.

5 years ago

BEM + php

Подскажите как использовать php-скрипты при сборке страницы? Я только начал вникать в БЭМ и не въезжаю где писать серверную часть на php. В bemhtml описываю шаблон, в bemjson структуру блоков... где писать php-скрипты?

А кто-то использует subj?

Поделитесь как это использовать?

Решил я попробовать обернуть сторонний виджет в блок БЭМ, возьмем например Yandex Share

<script type="text/javascript" src="//yandex.st/share/share.js" 
    charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" 
    data-yashareQuickServices="vkontakte,facebook" data-yashareTheme="counter"></div>

Я создаю блок bem create -l desktop.blocks -b yashare с содержимым

# desktop.blocks/yashare/yashare.bemhtml
`block('yashare')(
    tag()('div'),
    bem()(false),
    cls()('yashare-auto-init'),
    attrs()({'data-yashareQuickServices': '...', 'data-yashareTheme': '...')
)
/* desktop.blocks/yashare/yashare.browser.js */
modules.define('yashare', ['loader_type_js'], function(provide, loader) {
    loader('//yandex.st/share/share.js', provide);
});

А теперь вопрос, как воспользоваться данным блоком, чтоб подключения share.js было единожды (это уже реализует loader), но только в случае наличия на странице блоков yashare?

Если в yashare.browser.js добавить modules.require(['yashare'], function() {}); то подключение скрипта будет вне зависимости от наличия на странице блоков.

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

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

Всем привет! Когда запускаю генератор, то на вопросе "Use design from bem-components? YES" вылетает такая ошибка http://floomby.ru/s2/hW686z Что это значит? Вроде пишет что нет какого-то модуля, вообщем не могу разобраться..

Я создаю несколько страниц командой bem create -l desktop.bundles -b about bem create -l desktop.bundles -b map

После выполнения bem make я получаю соответствующие css и js для каждой страницы, а как получить общий css и js для подключения на сайте?

И второй вопрос, на сколько я понял команда bem make не "минифицирует" js и css файлы?

P.S. за время написания данного текста, курсор раз 20 убегал в поле поиска, не удобно.

Что делаю не правильно?

modules.define('navigation', ['i-bem__dom'], function (provide, BEMDOM)
{
  provide(BEMDOM.decl({block: this.name}, {
    onSetMod: {
      'js': function ()
      {
        console.log("navigation активен")
      }
    }

  }, {
    live: function ()
    {
      this
        .liveBindTo('click', function ()
        {
          var wrapper = this.findBlockOutside({ blockName : 'wrapper'});
          if (this.hasMod("open")) {
            this.delMod("open");
            wrapper.delMod("compress");
          } else {
            this.setMod("open", "true");
            wrapper.setMod("compress", "true");
          }

        });

    }
  }));

});
modules.define('wrapper', ['i-bem__dom'], function (provide, BEMDOM)
{
  provide(BEMDOM.decl({block: this.name}, {
    onSetMod: {
      'js': function ()
      {
        console.log("wrapper активен")
      }
    }
  }, {
    live: false
  }));

});

this.findBlockOutside({blockName: 'wrapper'}) возвращает null

Кажется, я упустила что-то из документации по bemhtml. Хочу ответы на следующие простые вопросы:
1) как в bemhtml связать input-radio с label, когда radio не находится внутри label?
2) как определить в bemhtml input-radio и label, когда radio внутри label?
в обоих случаях radio одиночный.
Примеры видела, пост про radio (http://ru.bem.info/libs/bem-components/v2/desktop/radio/docs/) читала.