Всем привет. Не нашел такого компонента, если у кого нибудь есть, поделитесь пожалуйста. Нужно сделать в точности такое: http://getbootstrap.com/javascript/#collapse-example-accordion

Назревает такая необходимость. Первое что приходит на ум: создать уровень под названием sb-admin-2, а в нем разместить папки, в которых уже нужно организовать структуру по БЭМ. К примеру есть папка holderjs со следующей структурой:

holderjs\holder.js holderjs\src\augment.js holderjs\src\holder.js holderjs\src\ondomready.js holderjs\src\polyfills.js

Верная структура для БЭМа по идее будет следующей:

holderjs\holder.js holderjs\augment\holderaugment.js holderjs\augment\holderaugment.deps.js holderjs\holder\holderholder.js holderjs\holder\holderholder.deps.js holderjs\ondomready\holderondomready.js holderjs\ondomready\holderondomready.deps.js holderjs\polyfills\holderpolyfills.js holderjs\polyfills\holderpolyfills.deps.js

Где в депсах прописана зависимость от holder.js

Собственно сам вопрос: перебирать все папки и писать депсы как-то муторно, можно ли обойтись малой кровью?

Например я установил bem-bemtree-project-stub теперь хочу прикрутить сетку bem-grid. Как правильно стыковать данные сборки, чтобы они не ломали друг друга? Просто ставить поверх в ту же деректорию или как? Прошу не ограничиваться данными сборками. Меня интересует общий принцип соединения bem решений.

Всем привет. В проекте на project-stub'е решил использовать сетку bem-grid . Сделал следующее:

$ git clone https://github.com/bem-incubator/bem-grid.git
$ cd bem-grid
$ npm install

Добавил необходимые уровни из bem-grid в файл make.js:

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

Пример из доков:

 {
block : 'row',
content : [
       {
        elem : 'col',
        mods : { mw : 6 },
        content : 'left column'
    },
    {
        elem : 'col',
        mods : { mw : 6 },
        content : 'right column'
       }
   ]
}

не работает. mods : { mw : 6 } нет.

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

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

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

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

Если не трудно, подскажите пожалуйста еще такой вопрос, чтобы в проекте использовать другие слайдеры, скажем owl-carousel, http://owlgraphic.com/owlcarousel/#demo, достаточно ли будет только разметку в html сделать по БЭМ, ну и стили css слайдера соответственно, или же это плохая практика и желательно использовать только bl-slider ? Спасибо еще раз за ответы

Скажите, а есть ли такое место где можно посмотреть список всех библиотек сообщества. Если нет, планируется ли? Для бутстрапа есть bootsnipp для ангулара ngmodules. Я думаю было бы круто иметь место куда можно выложить свои наработки или посмотреть что уже существует перед написанием своего велосипеда.

Здравствуйте. Начал познавать методологию БЭМ, и буквально сразу возник вопрос, касаемо места классов сетки (не использую полный стэк, только методология). Что из этого более верный путь: примешивать класс размера блока к самому блоку в верстке:

<div class="block grid__col_3">

или примешивать миксином непосредственно в css (пример на less):

.block {
    color: red;
    .grid__col_3;

}

С одной стороны - блок должен быть Абсолютно Независимым, то есть его отображение не должно зависеть от того, какой класс сетки мы ему примешали - он должен выглядеть так, как описан в стиле - аргумент ЗА миксин в css. С другой - блок становится более транспортабельным, мы его можем таскать куда и как угодно, и задавать размер непосредственно в верстке - благодаря миксину в html классе блока мы можем растянуть его как угодно без вмешательства в стили - аргумент ЗА миксин в html классе.

Чутье подсказывает третий вариант: создание модификатора элемента блока. "Семантичненько", и все такое. Но тогда такой модификатор нужно создать для каждого элемента блока - этот оверхэд не окупится, в случае, если нужно изменить размер "контейнера" самого блока, и не более того.

Если я что то дико путаю - прошу поправить, и наставить на верный путь, поделиться своим опытом. Благодарю.

Здравствуйте! Нужна помощь по настройке bem-grid. Делаю все как написано здесь https://github.com/bem-incubator/bem-grid Но в результате стилей в браузере нет. enb make отрабатывает без ошибок. Я понимаю, что дело в настройке, но информацию по этой теме найти не могу. На форуме подобная тема есть. В конце отписались, что заработало а что сделали ни слова. Если есть у кого инструкция или статья по настройке, буду благодарен и думаю в дальнейшем не только я.

Ставил несколько сборок и заметил, что после всех npm install и подобных команд не устанавливаются библиотеки bem-core и bem-components. Ставлю вручную, работает. Хотя в generator-project-stub выбираю установить bem-components.

Второй вопрос. Можно ли один раз скачать библиотеки, а потом просто указывать путь до них? Если да, то в какой файл и как правильно прописать путь, дабы экономить время и место?

Есть в bem-components модальное окно https://ru.bem.info/libs/bem-components/v2.3.0/touch/modal/examples/ Каким образом можно создать его налету и запихнуть скажем контент из скрытого дива?

Немного освоился с установкой и созданием блоков. Могу подключить блоки через bemjson из bem-components. Вывожу блоки, хотелось бы их как-то разместить по странице Какую css сетку для структуры лучше использовать?

Возникло пару вопросов, возможно, совершенно нубских, так что заранее извиняюсь) Итак.

Cетки

Как правильнее использовать сетки, в том числе с БЭМ-нотацией, к примеру bem-grid?

Задача: есть блок features, в него вложены блоки features__item, нужно сделать сетку. Как я понял, есть 3 варианта:

1.Вложить эти блоки в сетку:

{
     block : 'features',
     content : [
         {
             block : 'row',
             content: [
                 {
                     elem : 'col',
                     mods : { sw : 12},
                     content : [
                         {
                             block: 'features',
                             elem : 'item',
                             content : ''
                         }
                     ]
                 }
             ]
         }
     ]
 }

2.Примиксовать их

{
    block : 'features',
    mix : { block : 'row' },
    content : [
        {
            elem : 'item',
            mix : [ { block : 'row', elem : 'col', mods : { sw : 12} } ],
            content : ''
        }
    ]
}

3.Использовать миксины

.features
  row()

Вопрос: Какой вариант лучше?

Типографика

Какие единицы использовать (особенно для адаптива): rem, em, px?

Мне удобно делать, например, так: html-font_baze = 62.5% (ну или сразу 10px) и дальше делать шрифты в rem. Насколько это труъ в БЭМ?

Здравствуйте! Есть проблема с подключением библиотек. Если конкретно bem-grid. Насколько я понял из руководств чтобы подключить библиотеку необходимо выполнить следующее:

1. Прописать библиотеку в bower.json
2. bower-npm-install для установки и подтягивания всех зависимостей
3. Прописать уровень в make.js сборщика { path: 'libs/bem-grid/common.blocks', check: false }
4. Запустить сервер

В результате стили не подтягиваются. Подскажите пожалуйста что я упустил. Пользуюсь enb. И еще один вопрос. Как можно подключить библиотеку на enb, если весь проект на bem-tools?

Привет всем! Как правильно подключать сторонние библиотеки (например если хочу подключить иконки Font-Awesome, или materialize.min.js)

Сделал демку использования bem-components с angular'ом с поддержкой ngModel и 2-way data binding.

Скоро будет уже в виде либы в инкубаторе. Жду фидбек, пожелания, идеи.

Существует несколько способов подключения bem-библиотек на свой проект.

Здесь я рассмотрю варианты подключения заранее собранных версий, их 4:

1. Подключить напрямую с CDN Яндекса
2. Установить собранные библиотеки через bower
3. Самостоятельно собрать из исходников
4. Воспользоваться альфа-версией кастомного билдера

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

Подключить напрямую с CDN Яндекса

Это самый простой способ. Достаточно подключить необходимые файлы (см. раздел «Состав») в HTML и готово:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bem-components dist</title>
    <link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css">
</head>
<body class="page page_theme_islands">
    <!-- write your code here -->
    <script src="https://yastatic.net/bem-components/latest/desktop/bem-components.js+bh.js"></script>
</body>
</html>

Более полный вариант базовой HTML-разметки, включающий поддержку IE8 и определение наличия JS в браузере см. в конце поста.

Установить собранные библиотеки через bower

При условии, что bower у вас уже установлен, достаточно выполнить bower i bem/bem-components-dist#v2 (либо bower i bem/bem-core-dist#v2).

Далее просто прописать путь к необходимым файлам в HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bem-components dist</title>
    <link rel="stylesheet" href="bower_components/bem-components-dist/desktop/bem-components.css">
</head>
<body class="page page_theme_islands">
    <!-- write your code here -->
    <script src="bower_components/bem-components-dist/desktop/bem-components.js+bh.js"></script>
</body>
</html>

Самостоятельно собрать из исходников

Этот вариант подойдет тем, кто хочет собрать еще не выпущенную версию. Для этого потребуется:

git clone https://github.com/bem/bem-components.git
cd bem-components
npm i
npm run dist

В результате в корне bem-components появится папка dist со всеми необходимыми файлами.

Подключение не отличается от предыдущего варианта.

Воспользоваться альфа-версией кастомного билдера

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

В качестве эксперимента поднята веб-морда, позволяющая собрать код только для необходимых на проекте блоков.

Чтобы получить бандлы, нужно отметить нужные блоки. В ответ будут сгенерированы ссылки на скачивание.

Как работать с подключенными библиотеками

Тут снова возникает несколько вариантов.

Общая часть состоит в том, чтобы найти нужные блоки на bem.info.

Допустим, нужен блок select. Среди примеров нужно найти тот, который больше всего подходит.

Далее 3 варианта:

1. Просто скопировать нужный HTML из примера и поправить его под свои нужды (для этого нужно нажать на HTML в шапке примера). Этот вариант максимально простой, но очевидно, что при обновлении шаблонов в последующих версиях библиотеки апдейт потребует ручного внесения изменений в каждый обновленный блок.
2. Воспользоваться шаблонизацией на клиенте (dist включает предсобранные шаблоны BEMHTML и BH на выбор).

Для этого вместо готового HTML-кода следует брать из документации с примерами BEMJSON (кнопка рядом). Получится что-то типа:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bem-components as a library</title>
    <link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css">
</head>
<body class="page page_theme_islands">
<script src="https://yastatic.net/bem-components/latest/desktop/bem-components.js+bemhtml.js"></script>
<script>
modules.require(['i-bem__dom', 'BEMHTML', 'jquery'], function(BEMDOM, BEMHTML, $) {
    var html = BEMHTML.apply({
        block : 'select',
        mods : { mode : 'check', theme : 'islands', size : 'm' },
        name : 'select1',
        val : [2, 3],
        text : 'Программа конференции',
        options : [
            { val : 1, text : 'Доклад' },
            { val : 2, text : 'Мастер-класс' },
            { val : 3, text : 'Круглый стол' }
        ]
    });

    BEMDOM.append($('.page'), html);
});
</script>
</body>
</html>

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

А третий вариант — это выполнять {BEMHTML,BH}.apply() на ноде и отдавать браузеру уже готовый HTML:

var BEMHTML = require('./dist/desktop/bem-components.bemhtml.js').BEMHTML;

BEMHTML.apply({
    block : 'select',
    mods : { mode : 'check', theme : 'islands', size : 'm' },
    name : 'select1',
    val : [2, 3],
    text : 'Программа конференции',
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}); // вернется HTML-строка

Разумеется, все три варианта можно произвольно комбинировать.

Как еще можно пользоваться dist-ом

Т.к. файлы теперь доступны с CDN, можно использовать их на разнообраных песочницах вроде jsfiddle: https://jsfiddle.net/bmu7bkne/4/ или http://jsfiddle.net/bmu7bkne/

Состав

bem-core

Доступны отдельные наборы файлов для двух платформ:

• desktop
• touch

Каждый набор включает в себя:

• bem-core.css # стили
• bem-core.js # JS
• bem-core.bemhtml.js # BEMHTML-шаблоны
• bem-core.bh.js # BH-шаблоны
• bem-core.js+bemhtml.js # JS + BEMHTML
• bem-core.js+bh.js # JS + BH

И аналогичные dev-версии (с сохранием форматирования и комментариев):

• bem-core.dev.css
• bem-core.dev.js
• bem-core.dev.bemhtml.js
• bem-core.dev.bh.js
• bem-core.dev.js+bemhtml.js
• bem-core.dev.js+bh.js

  bem-components

На данный момент доступны отдельные наборы файлов для трех платформ:

• desktop
• touch-pad
• touch-phone

Однако каких-либо отличий в коде между touch-pad и touch-phone нет, поэтому планируется их объединение.

Каждый набор включает в себя:

• bem-components.css # стили
• bem-components.ie.css # стили для IE8 (подробнее)
• bem-components.js # JS
• bem-components.bemhtml.js # BEMHTML-шаблоны
• bem-components.bh.js # BH-шаблоны
• bem-components.js+bemhtml.js
• bem-components.js+bh.js

И аналогичные dev-версии (с сохранием форматирования и комментариев):

• bem-components.dev.css
• bem-components.dev.ie.css
• bem-components.dev.js
• bem-components.dev.bemhtml.js
• bem-components.dev.bh.js
• bem-components.dev.js+bemhtml.js
• bem-components.dev.js+bh.js

Схема подключения с CDN: //yastatic.net/название-библиотеки/версия/платформа/имя-файла. Например, //yastatic.net/bem-components/latest/desktop/bem-components.dev.js+bh.js.

Полный вариант базовой HTML-разметки

<!DOCTYPE html>
<html class="ua_js_no">
<head>
    <!--[if lt IE 9]><script src="https://yastatic.net/es5-shims/0.0.1/es5-shims.min.js"></script><![endif]-->
    <meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>bem-components dist</title>
    <script>(function(e,c){e[c]=e[c].replace(/(ua_js_)no/g,"$1yes");})(document.documentElement,"className");(function(d,n){d.documentElement.className+=" ua_svg_"+(d[n]&&d[n]("http://www.w3.org/2000/svg","svg").createSVGRect?"yes":"no");})(document,"createElementNS");</script>
    <!--[if gt IE 8]><!--><link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css"/>
    <!--<![endif]--><!--[if lte IE 8]><link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.ie.css"/><![endif]-->
</head>
<body class="page page_theme_islands">
<!-- write your code here -->
<script src="https://yastatic.net/bem-components/latest/desktop/bem-components.js+bh.js"></script>
</body>
</html>

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

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

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

У меня есть пара снипетов, которые можно потенциально оформить как библиотеку технологий для 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, поможешь?

тут поступило предложение добавить библиотечку в bem-incubator. Это можно организовать?

//cc @tadatuta

Всем привет!

Начинаю изучать BEM, пытаюсь поработать с библотекой bem-forms. Библиотеку подключил, прописал путь до библиотеки в .bem/make.js. BEMHTML библиотеки отрабатывает, html-tag формы преобразуется из div в form. Не получается доопределить поведение формы в JavaScript. Пытаюсь сделать это следующем образом, как указано здесь.

modules.define('form', function(provide, Form) {
    provide(Form.decl({
        onSetMod: {
            'js': {
                'inited': function() {
                    console.log('form started ...');
                }
            }
        }
    }));
});

При этом поведение блока button из библиотеки bem-components таким же образом переопределить получается. Использую bem-tools и project-stub.

Пока писал, заметил, что у формы не проставляется модификатор js_inited. Как можно поправить? В BEMJSON явно указал js: true, но ничего не происходит.

P.S. И не большой вопрос, при создании нового блока, bem-tools создает файл blockName.browser.js. Что значит browser.js? Чтобы указать, что в файле клиентский код?

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

Всем привет.

Попробовал использовать библиотеку bem-forms в проекте на базе bnsf. Однако, при изменении значений в полях ввода ни у блока form-field, ни у блока input, ни у блока message не появляется модификатора invalid. Да и вообще, судя по всему, блок validation не инициализируется. Я только начинаю изучать БЭМ, поэтому у меня есть подозрение, что ошибка скорее в моем коде, нежели в bem-forms или bnsf.

В связи с этим у меня есть несколько вопросов.

1. В какой стадии разработки находится библиотека bem-forms?
2. Если библиотека bem-forms готова для практического использования, где я мог ошибиться?
3. Есть ли какой-нибудь инструментарий для инспектирования в браузере состояния блоков, не имеющих DOM-представления?

Спасибо!

BEMTREE-шаблон страницы с формой: https://github.com/narkq/bnsf-form-example/blob/4900760f8d797cc7a4df950f73043fcfcbaf779f/desktop.blocks/page-registration-step1/page-registration-step1.bemtree#L38-L71

Хочу сказать спасибо @tadatuta за ревью кода моего компонента меню представленного на конкурс. Замечания были очень полезные.

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

Мой компонент построен на блоках menu, menu-item, button и прочих из библиотеки bem-components. Для реализации второго уровня в меню, я воспользовался элементом group блока menu задав ему абсолютное позиционирование и overflow-y: auto. Однако, код метода _scrollToItem не был рассчитан на такое рассположение пунктов меню и мне понадобилось переопределить его: я скопировал код метода из библиотеки, сделал автоматическое определение контейнера со скроллом и изменил функцию анимации. Так же мне не понравилось, что вызов метода _scrollToItem происходит при наведении мышью. Пришлось переопределять метод _onItemHover. Потом выяснилось, что клавиатурная навигация для переключения выбранного пункта меню устанавливает ему модификатор hovered (этому я посвящу отдельный пост). Методы _onKeyDown и _onItemClick тоже пришлось переопределять.

Всю эту красоту я оформил, как модификатор menu_fix_scroll, чтобы не ломать блок menu в других местах и разместил его как модификатор моего блока kg-menu_fix_scroll. Этот модификатор указан как зависимость самого блока kg-menu.

Вот тут я подошёл к вопросам:

• правильно ли я решил, что доопределения библиотечного блока, которые необходимы только моему блоку и нигде более правильно разместить внутри моего блока?
• критично ли, что kg-menu_fix_scroll.js фактически описывает menu_fix_scroll?
• есть ли другие более изящные пути решения такой проблемы?

Сейчас я делаю поле типа autocomplete в рамках компонента поиска. Есть мысль сделать его на базе dropdown, определив новый модификатор dropdown_switcher_input. Снова возникают вопросы означенные выше.

Вариант 1. В блок dropdown добавить модификатор _switcher_input. (Будет странно смотреться, как не совсем самостоятельная сущность. Скорее всего не получится выделить общие правила для отображения попапа, оставив только метод аналогичный onSwitcherClick) Использовать его в блоке autocomplete (или даже в модификаторе _type_autocomplete блока input). Затем всё это использовать это в моём блоке поиска.

Вариант 2. Определять модификатор dropdown_switcher_input внутри autocomplete / input_type_autocomplete.

Вариант 3. Не использовать код dropdown и реализовать autocomplete / input_type_autocomplete самостоятельно.

Вариант 4. Только что придумал вариант, похожий на правильный ответ. Наследовать autocomplete (input_type_autocomplete врядли получится?) от dropdown.

Подскажите правильную реализацию меню, сделал несколько вариантов для теста, результатом не удовлетворен=) Стоит ли использовать блоки из bem-components? или стоит писать свое?