Как настраивать bem-components под проект?

[romanslonov]

Всем привет. Расскажите, пожалуйста, какие есть варианты кастомизации bem-components под проект? Хочется отказатья от привязки к теме islands, но в тоже время чтобы блоки имели "основной каркас" и функциональность (выпадающие списки, селекты и т.д), чтобы можно было "додизайнить" под проект.

Один из вариантов решений предлагает @koloskof, он вынес большинство свойств в переменные, с помощью которых можно координально изменить внешний вид темы islands.

Какие существуют еще варианты? Спасибо.

[vithar]

Не подключать islands из design и реализовать полностью свою тему, смотря на islands.

[romanslonov]

@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. Почему? Что то упустил?

[vithar]

Надо прописать в deps и в конфеток сборки эту тему.

[Guria]

М-м-м, конфетки сборки.

[romanslonov]

@vithar deps создать нужно и как именно прописать? Можно поподробней, пожалуйста.

[vithar]

Надо в .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

[vithar]

Как вы сейчас подключаете и используете bem-components? Покажите код.

[romanslonov]

@vithar bem-components подключены стандартно, как в project-stub, подтягиваются с помощью bower в libs. Вот мой файл .enb/make.js https://gist.github.com/romamilkovic/ff0c33495a812cb512e7

Надо в .enb/make.js в levels прописать mytheme вместо islands (у меня так https://github.com/vithar/bem.info/blob/master/.enb/make.js)

Не вижу, что в этом файле указывается тема.

[vithar]

Надо не подключать /design/ из компонент, а вместо этого подключить свою папку с темой, со структурой, аналогичной design.

[vithar]

Я неправильно в начале сказал, в .enb/make.js не указывается конкретная тема, только папка с дизайном, где лежат темы.

[romanslonov]

Надо не подключать /design/ из компонент, а вместо этого подключить свою папку с темой, со структурой, аналогичной design.

В make.js { path: 'libs/bem-components/project-design/common.blocks', check: false },

В какой директории должен лежать файлы button.deps.js с указаной темой?

[vithar]

Вы указываете mytheme или project-design? До этого писали про первое.

[romanslonov]

project-design везде указываю. Кнопка работает, а вот что то посложнее уже нет, селект или инпут, например.

[voischev]

положите эту тему кнопки в свой проект. (кажется так будет правильнее) если собираете по bemjson то нужно просто заиспользовать этот модификатор на кнопке. если кнопка используется в bemhtml, то нужно укадать зависимость от кнопки в этом блоке вместе с указанием темы

[romanslonov]

@voischev Не, мне нужно не только кнопку, а практически все блоки темы islands кастомизировать. Поэтому лучше пускай они лежат на "нулевом" уровне (libs). Просто хочу понять, как правильно подключить новую тему (папку project-design) чтобы все блоки которые там лежат по аналогии с папкой design от islands, работали.

[voischev]

1. Тогда можно сделать форк выкинуть от туда все кроме css и там все переделать. А потом подключить в свой проект.
2. Можно положить на своем проекте папку /design/ и туда скопировать все файлы из bem-components про тему. и там все кастомизировать. Подключить эту папку в сборку бэм дизайн отключить

[romanslonov]

@voischev

Можно положить на своем проекте папку /design/ и туда скопировать все файлы из bem-components про тему. и там все кастомизировать. Подключить эту папку в сборку бэм дизайн отключить

Вот это вариант, спасибо!