Заманчиво выглядит сгенерить на BEM MapReduce и загрузить в CouchDB. Можно было бы и json отдавать, и html для блоков на разных уровнях. Навскидку проблема с модулями: reduce не поддерживает, а в остальных результаты не кешируются. Может BEM собираться без модулей (все инлайнить)?

не увеличивается ли программа от modules.require или это все равно что использовать просто require

подскажите пожалуйста в чем ошибка

код:

    var bemtreeTemplate = fs.readFileSync(path.join('.',pathToBundle, 'index.bemtree.js'), 'utf-8');
    var context = vm.createContext({
        console: console,
        require: require,
        Vow: vow
    });
    vm.runInContext(bemtreeTemplate, context);

ошибка:

node ./desktop.bundles/index/index.node.js
evalmachine.<anonymous>:85
       if('onreadystatechange' in doc.createElement('script')) { // ie6-ie8
                                      ^

TypeError: Cannot read property 'createElement' of undefined
    at evalmachine.<anonymous>:85:39
    at evalmachine.<anonymous>:104:7
    at Object.__vow_init (evalmachine.<anonymous>:1331:3)
    at buildBemXjst (evalmachine.<anonymous>:1335:12)
    at evalmachine.<anonymous>:1603:25
    at evalmachine.<anonymous>:1605:3
    at Object.exports.runInContext (vm.js:44:17)
    at /home/rustam/work/newkent/desktop.blocks/server/server.node.js:18:5
    at pendingRequires.push.cb (/home/rustam/work/newkent/desktop.bundles/index/index.node.js:88:32)
    at onDeclResolved (/home/rustam/work/newkent/desktop.bundles/index/index.node.js:175:29)

Здравствуйте.

Нахожусь в начале пути освоения методологии БЭМ, разбираюсь с именованием блоков и не могу понять:

Есть меню

<ul class="menu">
  <li class="menu__item">1</li>
  <li class="menu__item">2</li>
</ul>

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

<div class="aside">
  <ul class="menu aside__menu">
    <li class="menu__item aside__item">1</li>
    <li class="menu__item aside__item">2</li>
  </ul>
</div>

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

Необходимо в блоке вывести один раз title и три раза пару элементов year и university.

На странице должно быть так:

ОБРАЗОВАНИЕ 2000 - институт 1999 - институт 1998 - институт

Если добавить элементы, например, так:

sections: [
    {
        title: 'ОБРАЗОВАНИЕ',
        year: '2000 — ',
        university: 'институт',
        year: '1999 — ',
        university: 'институт',
        year: '1998 — ',
        university: 'институт'  
    }
]

выводится только последняя пара year и university.

index.bemjson.js:

//...
content: [
        { block : 'name',
          content : 'имя'
           },

        {
            block: 'sections',
            sections: [
                {
                    title: 'ОБРАЗОВАНИЕ',
                    year: '2000 — ',
                    university: 'институт'
                }
            ]
        }
        ]
//...

sections.bemhtml:

block('sections')(

    tag()('div'),

    content()(function() {
        return this.ctx.sections.map(function(item){
            return [
                {
                    elem: 'item',
                    content: [
                        {
                            elem: 'title',
                            content: item.title
                        },
                        {
                            elem: 'year',
                            content: item.year
                        },
                        {
                            elem: 'university',
                            content: item.university
                        }
                    ]
                },
                ' '
            ];

        });

    }),


    elem('item')(
        tag()('div')
    ),

    elem('title')(
        tag()('h3')
    ),

    elem('year')(
        tag()('span')
    ),

    elem('university')(
        tag()('span')
    )
);

Сижу изучаю, просмотрел несколько видео, прочел статьи сверстал пару страниц по туториалам, сверстал свою страницу через BEM, но теперь встал вопрос как эту вёрстку теперь собрать? Вот чтоб в папочку сложились html, css, js, картинки и оставалось упаковать в архив и отправить?

Сижу изучаю, просмотрел несколько видео, прочел статьи сверстал пару страниц по туториалам, сверстал свою страницу через BEM, но теперь встал вопрос как эту вёрстку теперь собрать? Вот чтоб в папочку сложились html, css, js, картинки и оставалось упаковать в архив и отправить?

При попытки создать через терминал .styl файл, ругается на несовместимость с версией bem-core. Установил project-stub с мастера. Что можно сделать? (bem create -l desktop.blocks (уровень переопределения) -b (название блока) -T styl)

Разбирая проблему сбора тестов под специфику проекта Внезапно захотелось получить возможность к сборке enb-сборщиком указать просто список блоков c с которых и надо начать сборку.

Например как-то так:

             nodeConfig.addTechs([
                    [provide, {
                        source: ['messages', 'b-level', 'm-trevel'],
                        target: 'app.bemdecl.js'
                    }]
                ]);

В посте https://ru.bem.info/forum/686/#comment-153710450 я хотел узнать какую сетку ставить на БЭМ лучше. Определился c bem grid. НО... Как я не старался у меня не получилась ее нормально установить в project-stub У кого есть пошаговая инструкция по установке этой сетки. Хотя бы в двух-трех шагах, чтобы проверить все действия на практике.

PS: Мне нравится идея БЭМ, но пока что я не могу к ней приблизиться и на шаг.

Заранее большое спасибо!

Сделал свою первую небольшую страницу на основе generator-bem-stub блоки описывал в bemjson и прописывал правила css в common-blocks. Страница задумывалась как адаптивная. Поэтому нужно сделать для планшетов и телефонов. В папках touch-pad.bundles и touch-phone.bundles имеются bemjson с минимальным контентом.

Я так понимаю нужно скопировать содержимое desktop.bundles в папки touch-pad.bundles и touch-phone.bundles и прописать нужные css для них. Или как то по другому надо делать?

Доброе утро. Подскажите как БЭМ сочетается с koajs? Не возникнет ли проблем если отказаться от express в пользу koajs.

Ребят как правильно переопределить свойство блока (на файловой системе, как это делает Дмитрий Белицкий в вебинаре https://github.com/bem-events/beminar-3 или же установить модификатор)? Лично мне симпатичен способ Дмитрия, потому что легко найти на какой странице какое свойство переопределяем и общие блоки при этом не захламляются модификаторами. Просто если проект 100 страниц я представляю на что может быть похожа папка общего блока.Что на это говорит методология БЭМ?

Приветы!

Подскажите, я правильно понимаю, что нельзя наследоваться от блок с модификатором?

Пример:

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

    // Объявляем базовый блок
    provide(BEMDOM.decl(this.name, {})); 

});

modules.define('input', function(provide, Input) {

    // Доопределяем базовый блок с модификтором _type_number
    provide(Input.decl({ modName : 'type', modVal : 'number' }, {})); 

});

// Тут хочется отнаследоватьсяо о input_type_number, дописать/изменить метод
modules.define('input', ['input_type_number'] function(provide, Input) {

    provide(Input.decl({ modName : 'type', modVal : 'phone' }, {})); 

});

Можно ли с помощью i-bem.js проверять email с помощью регулярных выражений или обязательно нужно подключать jQuery? Например, так будет работать бeз jquery

 if (/\S+@\S+\.\S+/.test(this.elem('email').val())) return true;

Всем привет. Стоит такая задача. Выделить общий css который используют все бандлы. То есть те блоки которые лежат в common.blocks необходимо выделить в common.css, а блоки которые лежат в бандлах выделить в отдельный для каждой страницы css например: index.css. Скажите пожалуйста как правильно это сделать

Не могу понять как правильно реализовать сетку на подобии b-layout-table. Если теперь bem-bl разрабатывают на базе библиотеки bem-core, где лежит замена b-layout-table.

Пример: <div class="loader"></div>

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

<form class="search-form">
    <input class class="search-form__input" >
</form>

После того как ввели текст и нажали ENTER система крутит наш loader пока не придут данные.

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

У меня возник вопрос, можно ли написать эти блоки таким образом, чтобы не зависимо от того, есть в нашей системе loader или нет мы всегда имели АНБ, и имели возможность использовать функционал loader'а. Придется ли нам внедрять loader в каждый блок или есть более изящное решение? Будут ли в таком случае блоки абсолютно независимыми? Возможно нужно смотреть в сторону событий?

п.с сорри за опечатки не попадаю в клавиатуру на планшете своими сосисками, исправлю за компом

Скоро ухожу служить родине. Но перед этим захотелось закончить несколько дел и одно из них - это поделиться своим сборщиком.

lightBEM

сборщик ресурсов для веб-разработки

Описание

Сборщик ориентирован на разработку проектов с использованием методологии БЭМ, но его также можно использовать как сборщик блоков (модулей), организованных вне рамок методологии.

Возможности

• Сборка стилей (используется препроцессор Stylus и Autoprefixer)
• Сборка JS файлов
• Сборка спрайтов (в том числе и из svg)

  Преимущества

Данный сборщик показал своё удобство внедрения при разработки на Yii и Joomla. Основным его преимуществом является простота использования.

Установка

• установить nodejs
• установить gulp
• скопировать репозиторий git clone https://github.com/belozyorcev/lightBEM.git
• запустить команду npm i для установки всех зависимостей
• запустить команду gulp в директории проекта

  Сруктура блока

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

{blockName}/{blockName}.{js, styl}

например:

lightBEM/blocks/page/page.styl

или для библиотек

lightBEM/libs/vars/vars.styl

Структура проекта

Сборка проекта происходит на основе файла builder.json расположенного в директории lightBEM/ Пример builder.json

{
    "libs": [
        "spriteHelper",
        "sprite"
    ],


    "pages": {
        "site": [
            "block1",
            "block2"
        ],
        "site_index": [
            "block1"
        ],
        "site_about": [
            "block1"
        ]
    }
}

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

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

В разделе pages указаны конечные страницы, для которых будет производиться сборка.

Например секция site создаст конечный файлы css/site.css и js/site.js в который войдут блоки block1 и block2 из директории lightBEM/blocks/

Переопределения (или локальные блоки для страниц)

По-умолчанию файлы блоков берутся из директории lightBEM/blocks/, но сборщик позволяет переопределять блоки для разных страниц. Блоки отдельных страниц лежат в директории lightBEM/pages/{pageName}/.

Например: Если в категории lightBEM/pages/site/ разместить блок block1 то он переопределит/доопределит блок из категории lightBEM/blocks/ (если он в ней имеется, иначе будет использован только локальный блок).

Работа со спрайтами

Изображения для спрайтов располагаются в директории lightBEM/images/4sprite/. Из этих файлов формируется спрайт, который располагаются по адресу images/sprite.png. А карта спрайта сохряняется в библиотеке lightBEM/libs/sprite/. В файл lightBEM/libs/sprite/sprite.styl записываются переменные, которые являются названиями файлов из директории lightBEM/images/4sprite/ с добавлением префикса s-. Далее в блоках их можно использовать путём вызова миксина sprite($s-image-name). Например, если в дирректорию lightBEM/images/4sprite/ положить файл arrow_up.png, то его параметры можно получить путём вызова sprite($s-arrow_up).

Пример:

блок arrow

.arrow
{
    sprite($s-arrow_up)
    display: inline-block
}

сгенерирует

.arrow
{
    width: 30px;
    height: 20px;
    background-position: 0px 0px;
    background-image: url(../images/sprite.png);
    display: inline-block;
}

Сборщик позволяет использовать векторный формат изображений SVG. Данные файлы хранятся в директории lightBEM/images/svg4sprite/, которые при сборке конвертируются в формат PNG и сохраняются в директории lightBEM/images/4sprite/. После конвертации происходит пересборка спрайта.

В планах на будущее

• добавление зависимостей для блоков
• оптимизации сборки
• добавление гибкости в настройки проекта

modules.define('testing', ['i-bem__dom', 'jquery'], function (provide, BEMDOM, $) { provide(BEMDOM.decl( this.name, { onSetMod: { // Будем реагировать на изменения 'js': { // 'inited': function (elem, modName, modVal) { //Простое всплывание при инициализации блока //this.findBlockInside('popup').setAnchor(this.findBlockInside('testing')).setMod('visible');

                        //Подписка на событие onClick (прилип к ссылке)
                        /*this.bindTo('click', function(e) {
                            this.findBlockInside('popup')
                                .setAnchor(this)
                                .setMod('visible');
                        });*/

                        // Установка позиции
                        this.bindTo('click', function(e) {
                            this.findBlockInside('popup')
                            // Не работает caught TypeError: this.findBlockInside(...).setPosition is not a function ??
                                .setPosition(200, 200)
                                .setMod('visible');
                        });
                        // Второй, третий и т.д. клики по блоку testing уже не работают. ??
                    }
                },
            },
        }
));

});

Возможно ли использовать AngularJS совместно с i-bem? Или в этом нет никакого смысла.

Есть два уровня переопределения, в них есть по блоку

Верхний angular.js /borschik:include:../../libs/angular/angular.js/ /borschik:include:../../libs/angular-ui-router/release/angular-ui-router.js/

Мой блок

/borschik:include:../../libs/angular/angular.js/ /borschik:include:../../libs/angular-route/angular-route.js/ /borschik:include:../../libs/angular-resource/angular-resource.js/ /borschik:include:../../libs/angular-ui-router/release/angular-ui-router.js/

При этому браузер сообщает ошибку "WARNING: Tried to load angular more than once." То есть верхний уровень, как-то странно переопределяется, видимо из-за сборщика. Подскажите как поступить?

Добрый день.

Начал делать проект на bem + angular. Для блока angular.js

/*borschik:include:../../libs/angular/angular.js*/
/*borschik:include:../../libs/angular-ui-router/release/angular-ui-router.js*/
// Hello World!

В index.js скрипт подключает, но файлы не инклюдит.

/* end: ../../libs/bem-ng/common.blocks/angular/angular.js */
/* begin: ../../service.blocks/angular/angular.js */
/*borschik:include:../../libs/angular/angular.js*/
/*borschik:include:../../libs/angular-ui-router/release/angular-ui-router.js*/
// Hello World!

Все библиотеки существую и лежат в lib

Подскажите, что не так? Спасибо.