Просьба разработать слайдер :) на подобии: https://jqueryui.com/slider/ http://www.eyecon.ro/bootstrap-slider/

Добрый вечер, есть что-то готовое типа Tooltips (bootstrap), чтобы при наведении (без клика) на ссылку всплывала подсказка?

Всем привет, подскажите почему нет этих двух атрибутов в библиотеке bem-components для блока input? Понятно, что можно модификатором навесить hidden, а зачем? И что в случае reset предлагаете?

Всем привет! Как добавить id к блоку (блок div)?

Оптимизировал bem-components, для удобной кастомизации их цветов.

1. Вытащил все цвета, которые были в файлах common.blocks/компонент/_theme/компонент_theme_island.styl. Получился 31 цвет (вместе с оттенками, прозрачностями итд). Часть их была в hex, часть в rgba. Где-то прозрачность была в формате .n, где-то 0.n
2. Привел все к hsla, чтоб были наглядно видно основные цвета
3. Разбил цвета(оттенки) на группы, по основным цветам
4. Вытащил в переменные основные цвета: $base = #000 $active = #070 $link = #44b $project = #fc0 $alert = #e00 $normal = #f6f5f3
5. Задал hue, saturation, lightness, opacity через Stylus
6. Создал файлик design/colors.styl и импортировал его в стили компонентов

Процесс оптимизации - http://codepen.io/koloskof/full/gaNGgB/

Что получилось - https://github.com/koloskof/bem-custom-components

Скриншот - http://koloskov.kz/bem-custom-components.png

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

Всем привет, можно ли блок popup привязать к input, необходимо сделать выпадающий список при поиске.

В библиотеке bem-components есть блоки menu и menu-item, тогда как в bem.info используется блок nav. Хотел бы узнать почему в bem.info не используются блоки меню из bem-components? А также как сгенерировать блок меню с помощью технологии bemtree? В примерах есть шаблоны для bemjson и html. Также есть код deps. Почему нет кода для bemtree?

С недавнего времени я погружаюсь в БЭМ. И чтоб удостовериться в правильном ли я направлении двигаюсь, хочу попросить более опытных в этом деле ребят сделать небольшое ревью.

В качестве примера для верстки я взял одно старое Яндексовое тестовое задание - https://yandex.ru/jobs/vacancies/dev/dev_des/

Моя реализация - https://github.com/koloskof/bem-taxi

Буду благодарен!

Подскажите пожалуйста, если я использую bem-componentes dist, подключаю так -

<link rel="stylesheet" href="bower_components/bem-components-dist/desktop/bem-components.css">
<script src="bower_components/bem-components-dist/desktop/bem-components.js+bh.js"></script>

для того, чтобы все работало на ipad нужно ли подключать еще стили и скрипт из папки touch-pad? Что то у меня при подключении как я указала на ipod, вообще сайт перестает работать, ссылки, кнопки не нажимаются, если отключаю bem-components.js+bh.js, то работает, никак не могу понять в чем дело. Я понимаю, что трудно подсказать , так сказать в слепую, но может подскажите, проблема ли в подключении, или же нужно мне копать в другой стороне.

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 уже не работают. ??
                    }
                },
            },
        }
));

});

Подскажите пожалуйста есть ли реализация bem вкладок tab?

Добрый всем день! Возникла необходимость стилизовать скролл у компонента select. Насколько я поняла у библиотеки bem-components нет такой возможности. Подскажите, как можно поступить в такой ситуации? Подключить плагин по типу - http://www.rudebox.org.ua/tiny-scrollbar-plugin-for-band-scrolling/

И второй вопрос, подскажите пожалуйста по подключению скриптов. Если скрипт используется только на одной странице, например настройки слайдера, карты, какой-то анимации, их нужно склеивать в общий файл скрипт? На данный момент я создала отдельную папку scripts, из которой просто копирую эти отдельные скрипты в папку проекта, а те скрипты, которые нужны блокам на всех страницах, склеиваю в общий scripts.js. Правильно ли я делаю? Спасибо за ответы

Всем добрый день, я снова к вам за помощью новичку. Подскажите пожалуйста по такому вопросу, у меня в проекте используется стиль именования Гарри Робертса. Я хочу подключить библиотеку bem-components (из коробки bem-components-dist), чтобы использовать элементы форм Можно ли я эти элементы переименовать в используемом мной стиле именования, при этом переопределяя стили в своем css, или это нарушит их функциональность Спасибо.

Пользуюсь dist-сборкой bem-components. Подключил себе на страницу стили с CDN и генерирую html сам.

Сейчас обнаружил, что button не меняет свое состояние по hover и click, поскольку эти стили задаются через отдельные классы а не псевдоклассы :hover и :active. Почему вы их не используете? Намного проще сделать это поведение на чистом css без необходимости навешивать обработчики на javascript.

В Bootstrap так и сделано, на кнопку можно добавить класс .active который содержит те же стили, что и :active

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

Ребят, у меня такая ситуация. Начинаю использовать bem-components и bemjson для прототипирования. Мне нужно заменить базовый желтый цвет (в этом есть необходимость именно для наших прототипов).

Какой самый "ювелирный" способ переопределять базовые цвета темы. Я правильно понимаю, что цвета у каждого компонента жестко прописаны, а не вынесены в переменные.? Нет возможности поменять значение где-то в одном месте, а нужно руками пробегаться по компонентам. Либо подключать свой файл стилей, где все переопределить.

Еще раз здравствуйте! Заметил такую особенность у блоков select и popup (даже если у popup напрямую указать

directions : ['bottom-right'],

), при первом клике выпадающее окно смещается чуть влево. При последующих кликах такого не происходит. Даже здесь на форуме, это отчетливо видно в селекте меню "Сортировка". Это так и должно быть, или можно исправить? Не совсем красиво, особенно на темном background.

P.S. Кстати вопрос отпадает если перед вышеуказанными блоками стоят элементы с фиксированной шириной.

Привет, всем! Мне необходимо разбить текст кнопки на два независимых элемента. Например, внутри кнопки написать "2 в третьей степени", чтобы число "2" имело свои стили, а степень свои.

Привет.

Есть такой вот блок:

{
            block: 'dropdown',
            mix: {
                block: 'services',
                elem: 'dropdown'
            },
            mods: {
                switcher: 'link'
            },
            switcher: {
                block: 'link',
                mods: {
                    pseudo: true
                },
                mix: {
                    block: 'services',
                    elem: 'icon',
                    content: '?'
                },
                content: '?'
            },
            popup: {
                block: 'popup',
                mods: {
                    theme: 'islands',
                    target: 'position',
                    autoclosable: true
                },
                mix: [
                    {
                        block: 'services',
                        elem: 'popup'
                    }
                ],
                directions: [
                    'bottom-right'
                ],
                mainOffset: -13,
                secondaryOffset: -54,
                content: [
                    {
                        elem: 'tail',
                        mix: {
                            block: 'services',
                            elem: 'tail'
                        }
                    },
                    {
                        block: 'services',
                        elem: 'p',
                        content: 'Lorem ipsum и так далее'
                    },
                ]
            }
        }

При клике на свитчер в браузер вываливается "Uncaught TypeError: Cannot read property 'setAnchor' of null". Версия bem-components 2.1.0. Что могло пойти не так?

UPD. Грешу на сборочный процесс, потому что подключенные напрямую с cdn яндекса сборки работают без ошибок. UPD. А в Firefox идет ошибка "this.findBlockInside(...) is null"

В руководстве по миграции https://ru.bem.info/libs/bem-core/v2.6.0/migration/#Деструктор написано, что «Вызывать base для того, чтобы у блоков работал базовый деструктор, определенный в i-bemdom, больше не нужно.»

Однако в блоке input в bem-components родительский деструктор вызывается явно. https://github.com/bem/bem-components/blob/v2/desktop.blocks/input/input.js#L49-L57

Вопрос — когда такое делать необходимо?

Всем привет. Собираю БЭМ-проект по описанию zxqfox https://ru.bem.info/forum/175/ Далее запускаю сервер с помощью ENB: Проверяю результат по ссылке http://lookingschools.com:8080/desktop.bundles/index/index.html Открывается страница с примерами блоков библиотеки. Только вот селекты какие-то кривые. При нажатии страница мерцает. Подскажите, что не так и где править? Если делаю так: git clone https://github.com/bem/project-stub.git --depth 1 --branch v1.0.0 start-project cd start-project npm install , то все отрабатывает отлично. Но так как у меня php проект, пользуюсь описанием zxqfox.

Привет всем! Хочу изменить стили для одной кнопки в теме islands. Пытался добавить модификатор, который будет переопределять свойства, но так не получилось (стили из темы перекрывают стили моего модификатора). Если создаю у себя на проекте button/_theme/button_theme_islands.styl и перекрываю нужные свойства из bem-components на свои, то переопределяются свойства всех кнопок. Может есть какое-то интересное встроенное решение для выборочного переопределения стилей.

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

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

Здравствуйте, пытаюсь разобраться в этой технологии, подскажите пожалуйста, как можно организовать выпадающее меню ? С одноуровневым все понятно, взял из компонентов, затемизировал как нужно, но как тут поступить ?

Всем привет! У меня php сайтик на самописном mvc - фреймворке, сейчас хочу использовать методологию БЭМ для своего представления.

Сделал следующее:

Логинимся на наш сервер ( не локальный)
Перехожу в htdocs cd htdocs Версия git (у меня 2.4.2) git version Версия php (5.5.26) php -v Клонирую на сайт git clone --depth 1 -b php-bem-bh git@github.com:bem/project-stub.git ls-php-bem-bh Иду в эту директорию cd ls-php-bem-bh Чищу от остальных коммитов — опционально rm -rf .git; git init; git add ./; git commit -m "initial" Устанавливаю последнюю версию Node.js Перед установкой необходимо убедиться в наличии libexecinfo. Ставится он так: cd /usr/ports/devel/libexecinfo sudo make install Устанавливаем Node.js cd /usr/ports/www/node sudo make DISABLE_VULNERABILITIES=yes install clean Проверяю, (должно отобразится Hello World) node console.log('Hello World');

Для того, чтобы выйти из интерактивной оболочки, необходимо просто нажать Ctrl + C. Ctrl + C (2 раза) Затем устанавливаю менеджер пакетов npm Перехожу в директорию, в которой находился до перехода в текущую директорию cd Устанавливаю curl -L https://npmjs.org/install.sh | sudo sh Проверяю npm -v

Иду в директорию с проектом cd htdocs/ls-php-bem-bh стягиваю npm и bower зависимости (нужны только для сборки и станка верстальщика) npm install стягиваем bem/bh-php (можно и через composer: composer require bem/bh) git clone --depth 1 https://github.com/bem/bh-php.git ./vendor/bem/bh Собираю проект с помощью ENB:

Конфигурация процесса сборки хранится в файле .enb/make.js. На ее основе ENB подключает все технологии, которые составляют реализацию блоков: шаблоны, зависимости, CSS-правила и JavaScript-функциональность. ./node_modules/.bin/enb make -n смотрим файлы:ls ./desktop.bundles/index/ | grep php Для удобства разработки запускаем сервер: ( переназначаем порт с помощью аргумента –p ) node_modules/.bin/enb server

второй вариант если порт 8080 занят

./node_modules/.bin/enb server -p 3333 На нашем сервере запускаю инструмент для разработки, который при обновлении страницы в браузере будет автоматически пересобирать только ту часть проекта, которую затронули ваши изменения. Результат доступен по ссылке:

http://мой сайт.com:8080/desktop.bundles/index/index.html

или

http://мой сайт.com:3333/desktop.bundles/index/index.html

У меня такие вопросы:

1. Как написано здесь https://ru.bem.info/forum/175/ В libs должны лежать бибилиотеки, в т.ч. библиотеки (с суффиксом -php) с bh.php шаблонами. Что-то я немогу их найти, где конкретно искать, и что я сделал не так?
2. В папке desktop.bundles/index тоже ничего не вижу с расширением php
3. Что мне нужно удалить, какие файлы и с каким расширением создавать?
4. как мне передавать данные из своих контроллеров, если структура сайта следующая (упрощенный вариант):

index.php /app |----myapplication.php |----/core |----/config |----/controllers |----/helpers |----/filters |----/models |----/view |----------/contetnt |----------/layout ну и соответственно наш Бэм проект /ls-php-bem-bh |------------------/.bem |------------------/.enb |------------------/.git |------------------/common.blocks |------------------/node_modules |------------------/desktop.blocks |------------------/libs |------------------/desktop.bundles |---------------------------------------/.bem |---------------------------------------/index |-----------------------------------------------index.bemjson.js |-----------------------------------------------index.bemhtml.js |-----------------------------------------------index.html

Существует несколько способов подключения 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>

как добавить атрибут hidden в конкретный input блока radio-group?