Всем привет!
Ребят, подскажите. Студия стала поддерживать проект на бэм инструментах. И недавно у клиента безопасники обрезали доступ к сторонним ресурсам. Т.е. теперь у них не работает jQuery. С ходу не удалось вникнуть, как подключается jQuery. Можно ли как-то локально это сделать? "Пропихнуть" в сам проект или разместить на их сервере и как-то ссылаться?
Есть необходимость сделать такой эффект https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c#.rhhn4m1i6
И уже на этапе реализации просто зафиксированной шапке возникает вопрос, как ее зафиксировать если к блоку body нужно добавить padding-top? Получется, если я не захочу использовать залипшую шапку на другой странице у меня все равно у body будет отступ... Подскажите как сделать такой блок. Было бы идеально менять тип шапки, например вот так sticky : true. Спасибо.
Можно ли каскадом от модификатора изменять вложенные сущности?
Предположим, есть три одинаковые колонки, но элементы в средней колонке отличаются от элементов в крайних. Я могу каждому из этих элементов дать свой модификатор и получить то, что нужно:
https://jsfiddle.net/h9ms6moy/
А могу задать один модификатор самой колонке, и каскадом от него получить такой же результат:
https://jsfiddle.net/h9ms6moy/1/
Я где-то слышал, что последний вариант приемлем, правда, речь шла о каскаде от модификатора не элемента, а блока.
Противоречят ли такие приемы методологии?
Прошу обратить внимание, что в конкретном случае модификатор сам по себе не несет никаких стилей, а используется только для каскада.
Возможно ли это? Сейчас все крутится в gulp. Нужно чтобы сборка осуществлялась на локальном компьютере, а результаты выкладывались на сервер (абсолютный путь). Ибо при запуске на сервере все работает очень медленно.
BEM Design (pre-alpha) - http://bemdesign.github.io/bemdesign-blocks/
Первый набросок библиотеки блоков с кастомными БЭМ компонентами, для "живого прототипирования".
Библиотека на самом старте. Впереди большая работа последовательных улучшений:
Кит дизайноориентированый. Тем кто хочет внести свой вклад и поработать со:
Велкам!
bemdesign@yandex.ru https://twitter.com/bem_design
Сплю такой, красивые девки снятся. А какой-то голос из далека хриплым баритоном:
Проснулся, поймал мысль.
А суть вот в чем: Писать deps часто приходится из-за css по большей части чем из-за всего остального. Если из ymodules и прочего модульного зависимости можно вытянуть легко, то css остается не удел.
А вроде бы и сделать-то всего ничего - распарсить css посредством https://github.com/reworkcss/css, да или чем по проще. Взять названия классов и прогоняя через https://ru.bem.info/tools/bem/bem-naming/ Сформировать deps/decl и мерджить с тем что взято из js.
Ну пока мысль дошла до логического конца подумалось мне, что уже по любому это сделали.
Может кто расколится, кто делал? Чего не засветил? Какие проблемы?
Читая документацию к enb-bem-techs возник вопрос - возможно ли настроить сборку на deps.js не пользуя bemdecl?
Возможно ли использовать модификаторы для бандлов и стоит ли это делать?
Опишу проблему, которую хотелось бы решить. Кроме разделения на бандлы по платформам (desktop, mobile, tablet), страницы нужно сгруппировать логически (public, profile, admin). В итоге нужно будет собрать несколько мерджей (desktop -> public, desktop -> admin, desktop->profile, mobile->profile, mobile->public итд.)
Создал проект веб-страницы (результат).
Внутри использую свой слайдер, который находится в библиотеке, подключаемой через bower (https://github.com/Oopscurity/oopsy). измененный make.js
При сборке и запуске страницы в консоли браузера получаю следующее сообщение:
Uncaught Error: Module "image": can't resolve dependence "lightbox"
На странице как image с js: true, так и lightbox не используются. Помогает (и это понятно) комментирование image.js в коде установленной библиотеки.
Демо: работа слайдера, лайтбокса. Все собирается и работает без нареканий.
Помогите, пожалуйста, разобраться, в чем проблема.
Может быть уже давно пора отказаться от прописывания this.un для каждого on? Просто заносить в реестр каждый on И в деструкторе анбайндить.
Всем привет! Помогите разобраться с make.js.
https://github.com/proudwax/ergo-bem_tree/blob/static/.enb/make.js
Если использовать: [enbBemTechs.depsByTechToBemdecl, { target: folder + '_' + page + '.bemhtml.bemdecl.js', sourceTech: 'js', destTech: 'bemhtml' }],
То требует для сборки файл с названием каталога, в котором располагается сборка. В моём случае view, но мне необходимо view_*. Изменил deps-by-tech-to-bemdecl.js, под себя: this._filesTarget = path.basename(this._options.target, '.bemhtml.bemdecl.js') + '.tmp.files'; , но в итоге хорошего ничего не вышло. Что не так делаю, подскажите?
Цель: реализовать всплывающие подсказки в таблице при клике на иконку (если сравнивать, то тоже самое можно увидеть на маркете в информации о товаре).
@voischev подсказал, что лучше реализовывать не через popup, а через dropdown. Отсюда вопрос, как кастомизировать тот popup который вызывается через dropdown? Особенно интересует:
1) как установить положение для popup (которое по умолчанию bottom-left). 2) Как правильно изменить внешний вид. 3) В качестве посредника между ссылками и попапами может выступать таблица? 4) Такая конструкция считается годной или как то иначе нужно?
{
elem : 'th',
tag : 'th',
content : [
'1 year',
{
block : 'dropdown',
mix : { block : 'hint', elem : 'handle' },
directions : ['right-center'],
mods : { switcher : 'link', theme : 'project', size : 's' },
switcher : '',
popup : 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
]
}
Всем привет. Не нашел такого компонента, если у кого нибудь есть, поделитесь пожалуйста. Нужно сделать в точности такое: http://getbootstrap.com/javascript/#collapse-example-accordion
Скопировал себе на проект эти табы https://github.com/bem-contrib/hackaton/tree/master/common.blocks/tabs
BEMJSON:
{
block : 'tabs',
mods : { theme : 'islands', type : 'button', size : 'm' },
tabs : [
{
title : 'First',
content : 'First tab content'
},
{
title : 'Second',
content : 'Second tab content'
},
{
title : 'Third',
content : 'Third tab content',
checked : true
}
]
}
В итоге генерируется все верно, есть radio кнопки, есть вкладки с контентом. Вкладка указанная становится активной, а вот radio кнопка нет, что нужно указать или исправить? Спасибо.
Всем привет, хотелось бы подробнее узнать о переменной YENV, есть какая-нибудь дополнительная информация, ссылки? :)
modules.define('test', ['i-bem__dom', 'BEMHTML'], function (provide, BEMDOM, BEMHTML) {
provide(BEMDOM.decl(this.name, {
onSetMod: {
js: {
inited: function () {
console.log(BEMHTML.apply({block: 'foo'}));
}
}
}
}));
});
Функция BEMHTML.apply генерирует HTML-элементы по BEMJSON-декларации в соответствии с правилами именования БЭМ.
в консоли ожидаю что-нибудь типа
<div class="foo"></div>
Но там ничего, пустая строка.
Как это работает?
Пробую на https://github.com/bem/project-stub.git --depth 1 --branch v1.5.0 my-bem-project
var fs = require('fs'), path = require('path'), vm = require('vm'), vow = require('vow');
var Bundle = function(name, folder){
this.name = name+'.bundles';
this.folder = folder;
this.path = path.join(this.name,this.folder,this.folder);
this.BEMTREE = this.bemtree();
this.BEMHTML = require('../../../' + this.path + '.bemhtml.js');
};
Bundle.prototype.bemtree = function(){
var bemtreePath = './' + this.path + '.bemtree.js',
bemtreeFile = fs.readFileSync(bemtreePath, 'utf-8'),
context = vm.createContext({
console: console,
Vow: vow,
require: require,
setImmediate: setImmediate
});
vm.runInContext(bemtreeFile, context);
return context.BEMTREE;
};
module.exports = Bundle;
var Bundle = require('../server/libs/bem');
var index = new Bundle('desktop', 'index');
index.BEMTREE.apply({ block: 'header' }).then(function(bemjson){
console.log(bemjson);
});
evalmachine.
Error: Wrong .match() argument
at assert (evalmachine.
Здравствуйте! Пытаюсь разобраться с БЭМ, в частности, сейчас пытаюсь понять, как правильно реализовать компоненты MDL в BEMJSON. Например, компонент tabs (ссылка). Если ориентироваться на семантику, лучше всего, наверное, как-то так:
{
block : 'tabs',
content : [
{
elem : 'tab',
name: 'Tab 1',
content : 'Tab 1 content'
}
]
}
Но в готовой вёрстке элементов у блока больше: для названий вкладок дополнительно есть mdl-tabs__tab-bar и mdl-tabs__tab. Можно создать эти элементы из поля name в шаблонизаторе, тогда получается, конечный пользователь ничего не должен знать о существовании этих элементов и их не надо добавлять в документацию. Так можно делать? Если нет, то как сделать лучше всего: неужели в BEMJSON должны быть все элементы, в т.ч. относящиеся к реализации?
Что хотелось бы получить в итоге.
Реально ли такое организовать?
На данный момент проблема в следующем: composer умеет собирать архив, но использует для этого git archive, следовательно, все что заигнорено в git (как раз собранные файлы) не попадают в архив.
Стандартная инициализация блока i-bem понятна, есть желание реализовать блок с авто инициализацией внутри, делаю так:
modules.define( 'myBlock', ['i-bem__dom', 'jquery', 'next-tick' ],
function ( provide, BEMDOM, $, nextTick ) {
BEMDOM.decl( this.name, {
onSetMod: {
js: {
inited: function () { }
}
}
} );
provide(BEMDOM);
$(function() {
nextTick(BEMDOM.init('myBlock'));
});
}
);
Это не работает, подскажите куда посмотреть.
Хочу для этого особенного блока использовать простую разметку, вместо:
<div class="myBlock i-bem" data-bem="{"myBlock": {}}">load...</div>
только так:
<div class="myBlock">load...</div>
Eсли БЭМ блоки самостоятелен и независим, то использование в нем переменных цвета или размера шрифта нарушает его концепцию, ведь значения буду хранится отдельно в variables.scss? Вывод - отказаться от глобальных переменных?
В #829 Я писал о странном поведении html-differ, Который вдруг начал учитывать порядок атрибутов в html. Сейчас выяснилось что такое поведение связанно с тегом <noscript> все что в этом теге html-differ сравнивает как простые сроки.
Хотелось бы узнать, это бага или фича?
Зачем мне это все.
Мы делаем блок ленивой загрузки картинок. Для пользователей без js заворачиваем img в noscript
cc @eGavr
С удивлением обнаружил отсутствие этой функции. Прощу помощи в расширении функционала стандартного модального окна в bem-components.
Хотелось бы узнать как происходит процесс отладки бэм инструментов. (Или все просто ниндзя в js и им отладчик не нужен?)
У меня падает сборка спеков. То что вываливается в консоль - лишь промис. Каков алгоритм поиска ошибки?
Пытаюсь верстать по BEM (приоритет именно на методологию).
Сделал адаптивное меню. Для блока menu создал модификаторы _mobile и _desktop. Не знаю правильно ли это, поэтому не хватает критики.
Ссылка на Plunker. Жаль песочница не поддерживает препроцессоры, было бы удобнее.
P.S.: на счет сетки, то мне удобнее использовать отдельные классы и миксовать их с конкретным блоком, чем использовать миксины.
Буду чрезмерно благодарен за помощь.
Как добавить атрибут к тэгу html, используя блок page из bem-core?
Изучаю вёрстку с БЭМ-именованием классов. Решил посмотреть как свёрстана главная страница яндекса. И увидел такую ситуацию:
<div class="container headline">
<div class="row">
<div class="col headline__item headline__leftcorner"> ... </div>
<div class="col headline__item headline__center"> </div>
<div class="col headline__item headline__bar"> ... </div>
</div>
</div>
В блок row вложены элементы блока headline. Не противоречит ли это тому, что элементы одного блока не могут быть элементами другого блока?
На PiterJS рассказал о стеке технологий БЭМ.
Было мало времени на подготовку, но я старался.
Видео: http://bit.ly/bem-full__video Доклад: http://bit.ly/bem-full
Буду рад вашим вопросам и предложениям!
Пишите: https://github.com/alexbaumgertner/presentation-bem-stack/issues
Спасибо!
Привет!
Мы долго не могли решиться, но наконец набрались смелости и переименовали организацию bem-incubator в bem-contrib.
На наш взгляд, новое название гораздо лучше передает смысл — проекты в этой организации могут быть вполне production-ready, смысл в том, что они развиваются и поддерживаются сообществом.
Если вы используете (или разрабатываете) какие-либо пакеты, следует обновить пути к репозиторию (какое-то время github поддерживает редиректы автоматически). В качестве инструкции можно использовать https://help.github.com/articles/changing-a-remote-s-url/
// cc @blond @remnev @awinogradov @zxqfox @levonet @arikon @voischev @4ok @Guria @aristov @h4 @kompolom @sameoldmadness @sipayrt @teryaew @Yeti-or
