Всем привет. Расскажите, пожалуйста, какие есть варианты кастомизации bem-components под проект? Хочется отказатья от привязки к теме islands, но в тоже время чтобы блоки имели "основной каркас" и функциональность (выпадающие списки, селекты и т.д), чтобы можно было "додизайнить" под проект.
Один из вариантов решений предлагает @koloskof, он вынес большинство свойств в переменные, с помощью которых можно координально изменить внешний вид темы islands.
Какие существуют еще варианты? Спасибо.
Не подключать islands из design и реализовать полностью свою тему, смотря на islands.
@vithar Хорошо. В папке libs/bem-components/design/common.blocks/button/_theme/ скопировал файл button_theme_islands.styl и переименовал в button_theme_mytheme.styl, внутри переименовал первую строчку в ctx = '.button_theme_mytheme'. В bemjson пишу к блоку кнопки theme : 'mytheme', в итоге получается голая кнопка. Хотя на деле на кнопке висит класс button_theme_mytheme. Почему? Что то упустил?
Надо прописать в deps и в конфеток сборки эту тему.
М-м-м, конфетки сборки.
@vithar deps создать нужно и как именно прописать? Можно поподробней, пожалуйста.
Надо в .enb/make.js в levels прописать mytheme вместо islands (у меня так https://github.com/vithar/bem.info/blob/master/.enb/make.js)
В зависимостях блока, который использует блок из bem-components, нужно указать другую тему:
https://github.com/vithar/bem.info/blob/master/common.blocks/breadcrumbs/breadcrumbs.deps.js
Как вы сейчас подключаете и используете bem-components? Покажите код.
@vithar bem-components подключены стандартно, как в project-stub, подтягиваются с помощью bower в libs. Вот мой файл .enb/make.js https://gist.github.com/romamilkovic/ff0c33495a812cb512e7
Не вижу, что в этом файле указывается тема.
Надо не подключать /design/ из компонент, а вместо этого подключить свою папку с темой, со структурой, аналогичной design.
Я неправильно в начале сказал, в .enb/make.js не указывается конкретная тема, только папка с дизайном, где лежат темы.
В make.js { path: 'libs/bem-components/project-design/common.blocks', check: false },
В какой директории должен лежать файлы button.deps.js с указаной темой?
Вы указываете mytheme или project-design? До этого писали про первое.
project-design везде указываю. Кнопка работает, а вот что то посложнее уже нет, селект или инпут, например.
положите эту тему кнопки в свой проект. (кажется так будет правильнее) если собираете по bemjson то нужно просто заиспользовать этот модификатор на кнопке. если кнопка используется в bemhtml, то нужно укадать зависимость от кнопки в этом блоке вместе с указанием темы
@voischev Не, мне нужно не только кнопку, а практически все блоки темы islands кастомизировать. Поэтому лучше пускай они лежат на "нулевом" уровне (libs). Просто хочу понять, как правильно подключить новую тему (папку project-design) чтобы все блоки которые там лежат по аналогии с папкой design от islands, работали.
/design/и туда скопировать все файлы изbem-componentsпро тему. и там все кастомизировать. Подключить эту папку в сборку бэм дизайн отключить@voischev
Вот это вариант, спасибо!