Есть ли способ делать спрайты из изображений блоков через enb?

Здравствуйте команда BEM и сообщество. Изучаю сборщик enb. В данном примере - https://github.com/enb-bem/enb-bem-techs/blob/master/docs/build-page.md показана сборка страницы по bemjson. Сборка происходит без ошибок но файл page.html не создается. Вначале предположил, что надо добавить таргет для html.

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

Но тогда сборка заканчивается с ошибкой Error: Match failed. Подскажите где кроется проблема.

Практикуюсь по мастер классу Мастер-класс+наоборот+вы+пишете+БЭМ-проект,+а+мы+подсказываем+—+Евгений+Константинов,+Дима+Белицкий Список 16 задач получил Теперь надо запустить npm install -g generator -bem-stub@0.4.0. В итоге ругается на spawn-sync package Смотрим скриншот https://yadi.sk/i/hWiDz2tsgyh9L

Первая часть

В «Видео вебинара по БЭМ: верстаем веб-страницу» у Дмитрия Белицкого (ведущего, @dab) спросили какие он плагины использует для VIM, а он ответил, что сообщит об этом на страницах проекта позже, но я не нашел его ответа.

Прошу указать где, если он есть, ответ на поставленный вопрос, а если нет, то пожалуйста, Дмитрий Белицкий, будьте добры ответить.

Вторая часть

Существуют ли какие-нибудь удобные плагины под VIM для работы с BEM?

Всем заранее большое спасибо!

Практикуюсь по мастер классу Мастер-класс+наоборот+вы+пишете+БЭМ-проект,+а+мы+подсказываем+—+Евгений+Константинов,+Дима+Белицкий Клонирую репозиторий https://github.com/bem/do-it-yourself-workshop Теперь надо установить зависимости через npm i. Вместо этого получаю ошибки. Работаю в Ubuntu 15.04 Прилагаю скриншот установки зависимостей. https://yadi.sk/i/GIFiNVGtgyRDi

Можно ли добавить условие в bemjson что бы блок написаный мной показывался только в IE > 9, по аналогии

{
    elem : 'conditional-comment',
    condition : '< IE 9',
    content : [
        { elem : 'js', url : '//yastatic.net/es5-shims/0.0.1/es5-shims.min.js' },
        { elem : 'js', url : '/js/modernizr-html5shiv-respond.min.js' }
    ]
},

8 Осел ругается на js файл на любой странице проекта

(function() {

var origDefine = modules.define;

modules.define = function(name, deps, decl) {
    origDefine.apply(modules, arguments);

    name !== 'i-bem__dom_init' && arguments.length > 2 && ~deps.indexOf('i-bem__dom') &&
        modules.define('i-bem__dom_init', [name], function(provide, _, prev) {
            provide(prev);
        });
};

})();

Говорит что объект не поддерживает этот метод на этой строке

name !== 'i-bem__dom_init' && arguments.length > 2 && ~deps.indexOf('i-bem__dom') &&
        modules.define('i-bem__dom_init', [name], function(provide, _, prev)

Что бы это могло бы быть?

Мне нужно изменить базовый блок page следующим образом при навешивании модификатора sticky-push контент оборачивался оберткой добавлялся блок под контентом и подключался блок футера после данного контейнера

block('page').mod('sticky-push', true)(
    def()(function(){
        return applyCtx([
            {
                block: 'page-sticky-footer',
                content: [
                    {
                        tag: '',
                        content: this.ctx.content
                    },
                    {
                        block: 'sticky-push'
                    }
                ]
            },
            {
                block: 'footer'
            }
        ])
    })
);

Я написал следующий код, он не верен так как я юзаю this.ctx.content У меня естественно пропадают теги body и т/д

как правильно это осуществлять? Сейчас я указываю путь в блоке для борьщика и он цепляет библиотеку, У меня есть подозрение что это не совсем православный способ. Если мне эта библиотека понадобиться в других блоках то при указанном способе попадет несколько библиотек в общий js?

Много где уже искал, но не могу найти. Создаю БЭМ блок-обертку над библиотекой из bower.io, но не могу понять как саму библиотеку подключить. Просто копировать файлы в папку с блоком считаю не правильным.

Имея такой bemjson

    {
            block: 'blur',
            js: true,
            content:{
                elem: 'image',
                url: '/img/background-blur/background-gradient.jpg'
            }
        }

Ожидаю что появиться на блоке модификатор js_inited Но его нет, i-bem есть, не могу понять почему на некоторых блоках все ок и инициализация есть, а на некоторых не появляется? Js написан для блока.

Имеем такой bemjson

'footer-menu': [
    {
        elem: 'item',
        url: 'http://df.dfd/ ',
        content: 'пункт меню1'
    },
    {
        url: 'http://df.dfd/ ',
        content: 'пункт меню2'
    },
    {
        url: 'http://df.dfd/ ',
        content: 'пункт меню3'
    },
]

И такой bemhtml

block('footer-menu')(
    tag()('ul'),
    content()(function(){
        return this.ctx['footer-menu'].map(function(item){
            return [
                {
                    block: 'footer-menu',
                    elem: 'item',
                    tag: 'li',
                    content: {
                        tag: 'a',
                        attrs: { href: item.url},
                        content: item.content
                    }
                },
                ''
            ]
        })
    })
);

И такой deps.js

({
    mustDeps: [
        { block: 'footer-menu', elem:' item' }
    ]
})

Почему не подключаются стили элемента блока? Если я явно его укажу в bemjson то конечно все ок. Насколько я понимаю именно deps.js и должен был добавить зависимость и элемент в процессе сборки прилетел бы в css

Подскажите что почитать/посмотреть чтобы начать писать тесты на блоки. В первую очередь интересует browser.js

Предположим, что есть 2 блока: .sidebar и .button

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

Какой правильный выход из этой ситуации?

Ребята посоветуйте сетку с поддержкой ie8 Есть ли такая?

Как я понял из доки для того что бы манипулировать элементами блока, отдельный модуль написать нельзя. можно только в блоке создать модуль блока и в нем манипулировать элементами. Возможно есть какие либо новые механизмы для написания модулей для элементов блока? Просто в моей парадигме есть блок form, он имеет различные элементы control(input, checkbox, textarea, submit и т.д.) И было бы не дурно писать нужный js (для элемента) внутри папки элемента, а внутри блока form общий js (валидация и т.д.) Иначе приходиться бить все на блоки которые на мой взгляд являются элементами и логичность структуры меняется в сторону хаоса.

Существует ли способ обернуть элемент блока другим элементом внутри BEMHTML Имеем такой bem json

{
    elem: 'cancel',
    content: 'Отмена'
}

на выходе такой html div.form__cancel-wrapper>a.form__cancel Я вижу решение подключения elem: 'cancel-wrapper' и внутри его шаблона подключить другой элемент и тогда все ок. Но хотелось бы не знать о существовании такой обертки, когда пишется элемент, чтобы его шаблон оборачивал. Есть ли решение этой проблемы?

Наблюдаю активность вокруг enb-bem-i18n, однако по описаниям технологий не до конца ясно с чем они работают. Подскажите какой процесс интернационализации ими поддерживается и реально ли его использовать в своих проектах?

Хочу проверить свой код, на сколько я по стандарту сделал все, существует ли вадитор такой?

https://github.com/krll-k/vk.com

P.S. не использовал никаких bem-tools, скорее всего напишу свой bem-tools, имхо!

У меня есть пара снипетов, которые можно потенциально оформить как библиотеку технологий для enb. Однако подобного опыта пока не имею.

var path = require('path'),
    EOL = require('os').EOL;

module.exports = require('enb/lib/build-flow').create()
    .name('angular-templates')
    .useFileList(['tmpl.html'])
    .target('target', 'templates.html')
    .justJoinFiles(function (filename, data) {
        return '<script type="text/ng-template" id="' + filename.split(path.sep).pop() + '">' + EOL + data + EOL + '</script>';
    })
    .createTech();

var ngAnnotate = require("ng-annotate");
module.exports = require('enb/lib/build-flow').create()
    .name('ng-annotate')
    .defineRequiredOption('source')
    .defineOption('target')
    .target('target', '?.js')
    .useSourceText('source')
    .builder(function(source){
        return ngAnnotate(source, { add : true }).src;
    })
    .createTech();

Что скажете? Надо ли это оформлять как библиотеку? @blond, поможешь?

Хотелось бы узнать нет ли готового инструмента по сборке проекта на БЭМ Что бы из папки desktop.bundles прекладывать html, css, js и картинки в папку app Я ее просто заливаю на хостинг и сразу видно верстку, Сейчас начал писать task для gulp, но возможно у моей задачи есть решение и более верное. Слышал про desp но нечего не нашел где взять его.

Знаю что каскад это не тру в бэм, но У меня в проекте есть блок content. Внутри него есть стандартные теги h1,h2,h3... p ...ul Стили для них я написал каскадом внутри блока контента(это обусловленно тем что контент-менеджеры текст заполнять будут не чего не зная о классах) И есть заголовки которые используются внутри это блока аля contenttitle у которого такой же тег h1. Как можно правильно переопределить стили contenttitle внутри content не используя каскадность. Знаю про файл зависимостей deps.js но он эту проблему не решает так как каскад. Возможно есть способ переопределить элемент content__title, внутри content что бы последующие изменения править только в элементе. А не в нескольких местах. Таких блоков где контент менеджеры правят много и внутри их контекста заголовки отличаются.(Такой уж дизайн)

Здравствуйте, учусь БЭМ. Сейчас в проекте переписал шапку на БЭМ, но не уверен что с названием классов правильно все сделал. Можете что нибудь посоветовать? Прикладываю макет и папку со стилями. Заранее спасибо. https://yadi.sk/d/z1IPnxfRgrr53

Добрый день интересует возможность сделать escapeHtml на уровне шаблонизатора bemhtml, Проблема в том что когда шаблонизатор получает в качестве контента другой блок, он принимает объект а не результат исполнения шаблона входного блока. Задача имея такой bemjson

{
 block: 'prism',
 language : 'markup',
 content: {
   block: 'content',
   elem: 'title',
   сontent:'Заголовок content__title размер ssбез модификаторов'
 }
}

Получить за escape html Вот мой bemhtml

block('prism')(
    tag()('pre'),
    content()(function(){
            var text = this.ctx.content + '';

            return {
                tag: 'code',
                attr: {'data-language': this.ctx.language},
                cls: 'language-' + this.ctx.language,
                content: this.attrEscape(this.ctx.content)
            }
        }
    )
)

Как правильно можно получить результат исполнения шаблона блока внутри другого блока. В документации нашел applyCtx но опять же получаю объект. Извиняюсь за стиль кода, не нашел как его оформить в вашем редакторе.

Подскажите, есть ли инструмент чтобы конвертировать html в bemjson (кроме рук и клавиатуры)?

Привет!

Хочу защитить почтовый адрес от спама. Пытаюсь сделать это таким скриптом:

<SCRIPT LANGUAGE="JavaScript">
user = 'name';
site = 'domain.com';
document.write('<a href=\"mailto:' + user + '@' + site + '\">');
document.write(user + '@' + site + '</a>');
</SCRIPT>

Но как правильно встроить это в BEM придумать не получается. Получилось только заменить содержимое content на этот скрипт в зависимости от модификатора. Как же протянуть все классы для ссылки? Не подскажите в какую сторону смотреть или может уже кто-то решил данную задачу?

Заранее спасибо!

Начинаю изучать БЭМ и вот читаю про версию вторую, хотя думаю надо лучше учить 2.5.0? Но зачем выставлять по умолчанию вторую мне не понятно, она лучше или что?

Спасибо за ответ!