Можно не писать постоянно ../../.. , а например всему борщику сказать, что ищи не найденные файлы в bower_components или libs?
как это сделано в postcss-import
//вместо
/* borschik:include:../../../libs/owl.carousel/dist/owl.carousel.js */
//так
/* borschik:include:libs/owl.carousel/dist/owl.carousel.js */
Кто-то пробовал конвертировать шаблоны на PHP в JS для работы на клиентской стороне? Чтобы можно было спокойно писать шаблоны на сервере и работать с ними на клиенте без ручного переписывания.
Наткнулся вот на такой репозиторий https://github.com/dan-da/php2js
Привет всем!
Дано: использование CSS по методологии БЭМ без bem-tools или enb.
Вчера наткнулся на статью про миксы и на комментарий Виталия про использование каскадов для вложенных блоков:
Вложенные селекторы могут быть при: 1) определении стилей одних блоков/элементов внутри других для изменения их вида. Например, если надо изменить блок link при вхождении его в элемент tab блока head:
.head__tab .link { color: blue }2) изменении вида элементов блока в зависимости от его модификатора:.head_size_big .head__tab { font-size: 150%; }
У меня по этому поводу несколько вопросов:
Надеюсь не слишком запутанно спросил :) Заранее благодарю за ответы.
Привет всем. Планирую пилить проект на i-bem. Для него уже есть некоторые модели на backbone. Честно скажу, что о backbone слышал много хорошего но проекты не делал на нем. Кто в теме подскажите, насколько просто\сложно использовать backbone совместно с i-bem.js, что стоит учесть, как организовать связь...
Добре люди!
Занимаюсь формированием тестов через enb-bem-specs коя использует bem-pr
Так вот, при формировании странички блок spec в bem-pr перетирает себя так
block spec, default: applyCtx({ block: 'mocha' })
Но стало понятно, что для тестирование некоторых блоков нам нужно куда-то проинициализировать заранее шаблоны. Сделать это легко можно посредством BH (BEMHTML).
Чтобы не нарушать идилию с блоком mocha появилась идея добавить еще один блок spec-content
Было (bem-pr/spec.blocks/spec/spec.bh.js):
module.exports = function(bh) {
bh.match('spec', function() {
return { block : 'mocha', attrs: { id: 'mocha'} };
});
};
Стало:
module.exports = function(bh) {
bh.match('spec', function(ctx) {
ctx.tag(null);
ctx.content([
{
block: 'mocha'
},
{
block: 'spec-content'
}
]);
});
};
Подскажите, как будет верно тоже самое реализовать в BEMHTML, для того же блока?
В bemjson-файле описания страницы есть блоки .event-line и .article-preview. Внутри .article-preview используется .event-line. Не получается передать содержимое из bemjson в bemhtml. Все, до чего додумался уже проверил. Если у кого есть время, посмотрите, пожалуйста. Может подскажете, где проблема.
bemjson
{
block: 'event-line',
event: {
date: {
content: '19.11.2015',
visibilityMod: { visibility: true }
},
city: {
content: 'Ростов-на-Дону',
visibilityMod: { visibility: true }
},
place: {
content: 'Конгресс-отель "Амакс"',
visibilityMod: { visibility: true }
},
type: {
content: '',
visibilityMod: { visibility: false }
}
}
}
...
{
block: 'article-preview',
/*attrs: { style: 'display:none;' },*/
mods: { color: 'white' },
mix: [{ block: 'row' }],
logoWrap: {
mix: [
{ block: 'col-md-offset-1' },
{ block: 'col-md-3' }
],
},
logo: {
url: '/img/stories/autor-logo.jpg',
mix: { block: 'article-preview', elem: 'img', elemMods: { size: 'm' } },
mods: { circle: true, responsive: true },
},
title: {
content: 'Продвижение себя: строим личный бренд',
mix: { block: 'title', mods: { 'main-page': 'screen'} },
mods: {}
},
/* description of block .event-line */
event: {
date:{
content: '12.11.2015',
visibilityMod: { visibility: true }
},
city: {
content: 'Ростов-на-Дону',
visibilityMod: { visibility: false }
},
place: {
content: '',
visibilityMod: { visibility: false }
},
type: {
content: 'Вебинар',
visibilityMod: { visibility: true }
},
},
/* the end of .event-line description */
text: {
content: 'Почему об одном бизнесмене пишут СМИ и даже книги, приглашают на конференции, ' +
'у него спрашивают совета и хотят с ним сотрудничать, а о другом нет, при прочих равных вводных? ' +
'В деле персональный бренд.',
mix: { block: 'font', mods: { 'family': 'robotothin'} },
mods: {}
},
button: {
content: 'Подробнее',
mix: { block: 'article-preview', elem: 'btn' },
mods: { color: 'red-transparent', 'main-page': 'large' }
}
}
article-preview.bemhtml
block('article-preview')(
content()(function(){
return [
{
elem: 'logo-wrap',
mix: this.ctx.logoWrap.mix ? this.ctx.logoWrap.mix : {},
content:
{
block: 'img',
mix : this.ctx.logo.mix ? this.ctx.logo.mix : {},
mods : this.ctx.logo.mods ? this.ctx.logo.mods : {},
url: this.ctx.logo.url
}
},
{
block: 'col-md-7',
content: [
{
block: 'article-preview',
mix : this.ctx.title.mix ? this.ctx.title.mix : {},
elem: 'title',
elemMods : this.ctx.title.mods ? this.ctx.title.mods : {},
content: this.ctx.title.content
},
/*----------------------------------------------------------*/
{
block: 'event-line',
event:
{
date: [
{
content: this.ctx.event.date.content,
visibilityMod: this.ctx.event.date.visibilityMod
}
],
city: [
{
content: this.ctx.event.city.content,
visibilityMod: this.ctx.event.city.visibilityMod
}
],
place: [
{
content: this.ctx.event.place.content,
visibilityMod: this.ctx.event.place.visibilityMod
}
],
type: [
{
content: this.ctx.event.type.content,
visibilityMod: this.ctx.event.type.visibilityMod
}
],
}
},
/*----------------------------------------------------------*/
{
block: 'article-preview',
mix : this.ctx.textMix ? this.ctx.textMix : {},
elem: 'text',
elemMods : this.ctx.text.mods ? this.ctx.text.mods : {},
content: this.ctx.text.content
},
{
block: 'btn',
mix : this.ctx.button.mix ? this.ctx.button.mix : {},
mods: this.ctx.button.mods ? this.ctx.button.mods : {},
content: this.ctx.button.content
}
]
}
]
})
)
event-line.bemhtml
block('event-line')(
content()(function(){
return [
{
elem: 'date',
elemMods: this.ctx.event.date.visibilityMod,
content: this.ctx.event.date.content
},
{
elem: 'city',
elemMods: this.ctx.event.city.visibilityMod,
mix: { block: 'link', mods: { color: 'white' } },
content: this.ctx.event.city.content
},
{
elem: 'place',
elemMods: this.ctx.event.place.visibilityMod,
mix: { block: 'link', mods: { color: 'white' } },
content: this.ctx.event.place.content
},
{
elem: 'type',
elemMods: this.ctx.event.type.visibilityMod,
mix: { block: 'link', mods: { color: 'white' } },
content: this.ctx.event.type.content
}
];
})
)
article-preview.deps.js
([
{
mustDeps: [
{ block: 'event-line'},
{ block: 'event-line', elem: 'item' },
{ block: 'event-line', elem: 'city'},
{ block: 'event-line', elem: 'date'},
{ block: 'event-line', elem: 'place'},
{ block: 'event-line', elem: 'type' }
]
},
{
shouldDeps: [
{ block: 'btn' },
{ block: 'img'},
{
elems: [
{ elem: 'logo' },
{ elem: 'text' },
{ elem: 'title' },
{ elem: 'button' }
]
}
]
}
])
event-line.deps.js
({
shoudDeps: [
{ elems: [
{ elem: 'item' },
{ elem: 'city' },
{ elem: 'date' },
{ elem: 'place' },
{ elem: 'type' }
]}
]
})
Здравсвтуйте. Решил использовать bem совместно с webpack. Но возникла следующая проблема, может подскажете, как решить?: у каждого блока может быть много css тем, то есть имею вот такую структуру:
components/
menu/
menu.js
themes/
default/
menu.scss
dark/
menu.scss
light/
menu.scss
css тема должна подгружаться динамически, то есть что-то вроде: содержимое menu.js файла:
require('./themes/' + currentTheme + '/menu.scss');
Но при таком подходе в webpack-е в бандл будут собраны все файлы всех css тем. Можно, конечно, использовать
require.ensure([], function() {
require('./themes/' + currentTheme + '/menu.scss');
});
и тогда scss файл каждой темы будет помещен в отдельный бандл и будет подгружаться динамически. Но и в этом случае возникает проблема. Т.к. require.ensure выполняется асинхронно, то модуль menu.js отработает и разрезолвится и параллельно пойдет запрос за стилями блока, но сам блок и его верстка уже будут в DOM-е и пользователь увидит "голый" html, затем подгрузятся стили блока и верстка блока будет стилизована. Как это обойти? То есть как сделать, чтобы модуль menu.js не разрезолвился до тех пор, пока не резовленятся его зависимость, а именно css файл темы? Спасибо.
Возможно ли
BEMDOM.replace() сохранив существующие связи блока (подписки на события).Всем привет!
Долгое время используем БЭМ в качестве CSS методологии. Очень удобно. Возникло пару вопросов:
.d-none {
display: none !important;
}
т.е. выполняют одну единственную функцию, но при этом используют некрасивый прием с !important. Отчасти, это похоже на использование глобальных переменных, которые затирают основное поведение блока. Хотелось бы узнать, что делать если есть много блоков, состояние которых нужно как-то одинаково менять (ну тот же display: none). Создавать для этого у каждого блока отдельный модификатор типа block_hidden? Какие правильные практики для этого использовать?
Заранее благодарю за ответы.
Наконец научились запускать unit-тесты с enb-bem-specs
Пришлось, правда немного его доработать и даже были сделаны пулл-реквесты на основную репу.
Но как только начали массово внедрять поняли одну проблему.
enb-bem-specs тянет за собой тяжелые зависимости в виде phantomjs и остального по мелочи.
Однако у всех разработчиков уже есть PhantomJS и порой он по версиям сильно отличается.
Дошли до того, что не плохо было бы запускать фантом под докером, и обращаясь к докеру уже запускать тесты.
А вот зависимость из enb-bem-specs выпилить.
@blond были ли такие мысли насчет этого?
Да, и кстати, это упрощает запуск тестов на CI - задав нужное окружение.
На предыдущих вебинарах мы говорили о декларативных возможностях CSS и BEMHTML, используемых в БЭМ. В этот раз — 16 декабря в 17:00 — мы расскажем и покажем, что декларативно можно писать не только стили и шаблоны, но и код на JavaScript — в том числе и для уровней переопределения. Применяется i-bem — специальный JavaScript-фреймворк для БЭМ.
Это вебинар для тех, кто уже немного знаком с БЭМ, знает HTML и CSS хотя бы на базовом уровне, понимает общие процессы веб-разработки и знаком с командной строкой. Также пригодятся знания, полученные на прошлых вебинарах. Для выполнения заданий понадобится терминал с установленными git и node.js.
Чтобы стать участником, пожалуйста, зарегистрируйтесь. Регистрация завершится 15 декабря в 16.00.
Обратите внимание, трансляция будет не на этой странице. За день до вебинара мы пришлём напоминание на электронную почту, указанную при регистрации, а за час до начала — индивидуальную ссылку на трансляцию.
Здравствуйте. Начал разрабатывать проект, используя методологию БЭМ (именование, организация ФС; full bem stack не использую) - встал вопрос: для каждой страницы и для каждого блока нужно подключать свои стили/js (10 блоков на странице - подключаем 10 css файлов /blocks/blockname/blockname.css, /blocks/blockname2/blockname2.css, 10 js файлов итп ), или же собираем все блоки в один большой css/js, и подключаем его один раз на всех страницах? Есть какие то best practices, кто вообще как это делает? В примерах на github (которые смог найти) по одной странице (бандлу), и , соответственно, разумно собрать все блоки в 1 css и 1 js файл. А для многостраничного сайта, где на разных страницах используются разные комбинации блоков? То же самое касается js,не совсем ясен этот вопрос, в документации, к сожалению, ответов не нашел.
Всем привет. Есть ли у кого-нибудь многоступенчатая форма регистрации , что-то наподобии http://azmind.com/demo/bootstrap-multi-step-registration-form/ Интересует, как связывали блоки между собой или делали все одним блоком?
Для работы было необходимо работать с методологией, но использовать i-bem не представлялось возможным, а костыли на jQuery было муторно и уже невозможно писать из-за громозкости. Использовать плагины для БЭМ к jQuery тоже было не самым радужным решением.
Решил сделать своё решение, с заимствованием API i-bem, но с небольшими изменениями.
Краткое описание API
.elem() - доступ к элементу .elem().elem() - доступ к элементу в элементе .setMod() - установка модификатора .delMod() - удаление модификатора .on() - надстройка над jQuery.on(). (но возможно будет заменён на bindTo) .$ - переход в режим jQuery.
Новичек в БЕМ. В deps.js вроде прописал. CSS реализация блоков в зависимость попадает BH нет. В документации ответа не нашел.
В блок refill (desktop.blocks > refill) хочу вложить блок booblock (desktop.blocks > refill > booblock ). Потом в блок booblock вложить блок item (desktop.blocks > refill > booblock > item), а в в папке блока item создать файл .bemhtml ( desktop.blocks > refill > booblock > desktop.blocks.refill.booblock.bemhtml )
Так можно делать?
P/S: Собирается куча блоков, которые оч хочется распределить по папкам...
Помогите, пожалуйста. Я новичок в вёрстке. В компании, в которую удалось устроиться, велась разработка портала на БЭМ. Предыдущий разработчик переехал в другой город. В итоге, тяжеловато связываться с ним. Сверстал страницу, но не получается завершить задачу.
На странице есть псевдо-селект с несколькими псевдо-элементами ( на них примиксованы блоки .certificate-change ). certificate-change.js http://pastebin.com/U10aafcD
certificate-change.deps.js http://pastebin.com/nkMy9uRh
Каждому псевдоэлементу c .certificate-change соответствует блок .tiles-certificate со своим содержимым. Содержимое хранится в data-bem .certificate-change под именем newBemJSON, для которого есть bemhtml шаблон.
объект newBemJSON http://pastebin.com/Mnn72NNR
tiles-certificate.bemhtml http://pastebin.com/LkAuJxja
Родителем .tiles-certificate является блок .tiles-control, который и управляет заменой блока .tiles-certificate. Он слушает клик на .certificate-change, вытаскивает из него newBemJSON, прогоняет через шаблонизатор и аппендит в себя. tiles-control.js http://pastebin.com/beNxWMUw
tiles-control.deps.js http://pastebin.com/BSZ0U5Qr
Проблема в том, что не срабатывает шаблонизатор. Т.е. на страницу просто вставляется div с классом .tiles-certificate.
Здравствуйте. Есть проблема, не получается решить (
Корневой блок page имеет модификатор theme.
В файле theme.styl указана переменная borderColor1 = #A9A9A9
Дальше по коду есть блок search, у которого цвет бордера берётся
из этой переменной. Но он не применяется
.search__header
& .control-group
background-color borderColor1
В файле deps.js блока search прописан блок page
({
mustDeps: {
block: 'page',
}
})
Где то туплю, но не пойму где ( Помогите пожалуйста!
Трудность: Borschik не склеивает /* borschik:include:../../libs/smothScroll/js/smothScroll.js */ в один файл. Файл рабочий, пути правильные, декларация плагинов правильная.
Вопрос: Как починить борщик, если переустановка не помогает?
Предположения: У меня в проекте в папке node_modules установлено 3 борщика. Возможно они конфликтуют. borschik-tech-cleancss borschik enb-borschik
Вот весь текст
/* global modules:false */
modules.define('jquery__smothScroll', ['jquery'], function(provide, $) {
window.jQuery = $;
/*borschik:include:../../libs/smothScroll/js/smothScroll.js*/
provide($);
});
Есть простой плагин прокрутки на Jquerry. )) Сейчас вот так в конце index.html:
<script src="js/plugins-scroll.js"></script>
<script>
$(document).ready(function() {
try {
$.browserSelector();
if($("html").hasClass("chrome")) {
$.smoothScroll();
}
} catch(err) {
};
});
</script>
Как Это подключается через БЭМ? P/S: Спасибо!
Всем привет
Коллеги, у меня концептульный вопрос.
Мы на проекте используем Behat + PHPUnit и раним все это дело через Bamboo на виртуалках. Также настрена многопоточность выполнения features через parallel и объединение всех резалтов в один консолидированный репорт.
На сервер Бамбу был установлен ImageMagic он входит в стандартные пакеты дистриюутива RH. Доступ к API ImageMagic осуществляется через нативные методы PHP класса Imagick
Таким образом имея уже все описаные элементы страниц в функциональных тестах лекго их переиспользовать для визуальногт тестирования, что я и сделал. Get элемент на странице, передаю его в свой метод assertImage, который делает скрин страницы вырезает по координатам нужный объект и кладет его в папку с эталонами либо сравнивает с подготовленным эталоном в зависимости от конфига.
Результаты сравнения (etalon, actual, diff) выводятся в тот же репорт что и функциональные тесты таким образом мы используя наш фреймворк покрываем функциональное и визуальное тестирование и получаем один отчет.
Результаты такого визаульного тестирования стабильные.
Использование Gemini подразумеват как минимум дублирование селекторов в другой туле, другой язык тестов, другой очет и много другого. Также наш фреймворк работает со всеми браузерами и лекго скролит страницу к нужному элементу и делает скрин нужного элемента, возможно и у gemini с этим все ок.
Есть ли смысл тогда выносить визуальное тестирвание в отдельныую тулу Gemini ? Может есть какие-то очевидные минусы нашего подхода, которые мне на первый взгляд не видны и какие-то явные преимущества Gemini, которые должны заставить переписать все элементы в другой туле и сапортить ее в дальнейшем. Спасибо
Есть код в .bemhtml
block('button').mod('theme', 'theme001').content()(
function(){
return [this.ctx.icon,' ',this.ctx.text]
});
Вопрос: Как блок "button" обернуть в родительский блок "link" средствами .bemhtml?
Спасибо!
Можно ли сделать так, чтобы полезные для себя обсуждения на форуме можно было бы сохранять у себя в кабинете? А то потом ищешь или закладки плодишь.
Метод find в колбеке состояния(capture) ищет элемент от селектора, который указан в setCaptureElements?
Добре!
Тут обнаружил, что спеки у меня генерируются, а вот тесты не запускаются.
enb-bem-spec пишет, что мод тесты не прошли. Оказалось, у меня проблема с фатномом. После того как я засунул вывод ошибки в этом месте
https://github.com/enb-bem/enb-bem-specs/blob/master/lib/runner.js#L166-L169
в консоль.
Написал так:
.then(function (err) {
if (errorCount) {
console.log(err); //<-
return vow.reject(new Error('specs: ' + errorCount + ' failing'));
}
}) : vow.resolve([]);
Вывод:
[ { _value:
{ [Error: Command failed: /bin/sh -c /home/Projects/bem-project/node_modules/enb-bem-specs/node_modules/.bin/mocha-phantomjs --reporter spec file:////home/Projects/bem-project/specs/pc/platform/platform.html
/bin/sh: 1: /home/Projects/bem-project/node_modules/enb-bem-specs/node_modules/.bin/mocha-phantomjs: not found
]
killed: false,
code: 127,
signal: null,
cmd: '/bin/sh -c /home/Projects/bem-project/node_modules/enb-bem-specs/node_modules/.bin/mocha-phantomjs --reporter spec file:////home/Projects/bem-project/specs/pc/platform/platform.html' },
_status: 3,
_fulfilledCallbacks: undefined,
_rejectedCallbacks: undefined,
_progressCallbacks: undefined },
//.....
]
Ошибки то надо выводить! А то сидишь мучаешься.
В довесок напомню, что у многих есть BH, и надо бы уже давно принять МР: https://github.com/enb-bem/enb-bem-specs/pull/41
Такая идея, наверное, уже не у одного меня возникла.
Сделать шаблонизатор типа BN (Bem Node) который перегоняет bemjson в DOM дерево не посредством компиляции html строки, а через document.createElement()
Добре!
Может кто уже реализовывал свой enb-bem-spec с преферансом и поэтессами?
Да так, чтобы запускать его не с PhantomJS а с Karma?
Но помодульно!
Добрый день! Создал локальное хранилище. Клонировал удаленный репозиторий, push через https выдает ошибку : "unable to access ' ': The requested URL returned error: 403" Скрин http://s017.radikal.ru/i443/1511/f6/bd50ed82e737.png
И почему у мастера восклицательный знак?
Оптимизировал bem-components, для удобной кастомизации их цветов.
Процесс оптимизации - http://codepen.io/koloskof/full/gaNGgB/
Что получилось - https://github.com/koloskof/bem-custom-components
Скриншот - http://koloskov.kz/bem-custom-components.png
Сейчас легко манипулировать цветами, меняя значения переменных базовых цветов. Подскажите удачное ли это решение? Что можно улучшить? Или вообще как-то по-другому сделать?
Поиграться можно тут http://bem.github.io/bem-xjst/
Пара типов данных
({
block: 'block1'
});
или
({
block: 'block1',
mods: { a: 'b' }
});
Далее буду приводить по паре шаблонов где можно отсмотреть разное поведение при разных условиях и при этом ожидание результата не оправдывается
Вариант 1 (как бы правильный)
block('block1')(
def()(function() {
this.mods.bla = 'bla';
this.ctx.content = '1';
return applyNext();
})
);
block('block1').mod('bla', 'bla')(
def()(function() {
this.mods.ololo = true;
this.ctx.content = 'bla';
return applyNext();
})
);
вариант 2
block('block1')(
def()(function() {
this.mods = { bla: 'bla' };
this.ctx.content = '1';
return applyNext();
})
);
block('block1').mod('bla', 'bla')(
def()(function() {
this.mods.ololo = true;
this.ctx.content = 'bla';
return applyNext();
})
);
Вариант 3
block('block1')(
def()(function() {
this.ctx.mods = { bla: 'bla' };
this.ctx.content = '1';
return applyNext();
})
);
block('block1').mod('bla', 'bla')(
def()(function() {
this.mods.ololo = true;
this.ctx.content = 'bla';
return applyNext();
})
);
Вариант 4! Причем работает как нужно есть есть mods в bemjson
block('block1')(
def()(function() {
this.ctx.mods.bla = 'bla';
this.ctx.content = '1';
return applyNext();
})
);
block('block1').mod('bla', 'bla')(
def()(function() {
this.mods.ololo = true;
this.ctx.content = 'bla';
return applyNext();
})
);
Еще их вариации
Что интересно даже
block('block1')(
def()(function() {
this.mods = this.extend(this.mods, { bla: 'bla' });
this.ctx.content = '1';
return applyNext();
})
);
block('block1').mod('bla', 'bla')(
def()(function() {
this.mods.ololo = true;
this.ctx.content = 'bla';
return applyNext();
})
);
Не работает как нужно. Ожидаю что как бы я не записал модификаторы (через создание нового объекта или через ссылку. через this.mods или через this.ctx.mods) то отработают шаблоны по ним и классы будут в результате шаблонизации.
Вероятно дело в том что когда в mods пишешь новый объект ссылки теряются по этому то шаблон BEMHTML не отрабатывает то класс не проставляется в результате шаблонизации. Не доконца ясна в таком случае ситуация с this.mods и this.ctx.mods
Как это объясняется вами? И что делать? Что будет делаться если будет?