Войти с помощью github
Форум /
9 years ago

Сетка/grid на БЭМ

rom111419
libs
bem-core

Не могу понять как правильно реализовать сетку на подобии b-layout-table. Если теперь bem-bl разрабатывают на базе библиотеки bem-core, где лежит замена b-layout-table.

9 years ago
tadatuta

Привет! Готовой замены b-layout-table нет. Я так понимаю, что библиотека bem-grid в качестве альтернативы не подходит и хочется именно b-layout-table?

Если так, то могу порекомендовать скопировать код из bem-bl к себе на уровень проекта и подправить для совместимости с bem-core. Если с этим возникнут сложности, готов помочь.

9 years ago
rom111419

) Подходит. Но Есть сложности с установкой bem-grid, это наверно другая тема.

Пишу: npm bower install https://github.com/bem-incubator/bem-grid.git Выдает:Specify configs in the ini-formatted file: C:\Users\Юзер.npmrc or on the command line via: npm --key value Config info can be viewed via: npm help config

Второй день бьюсь.

9 years ago
tadatuta

Похоже на какую-то локальную проблему с конфигурацией bower. Можно попробовать переустановить его глобально: npm i bower -g.

Если не поможет, поставить bem-grid через git.

// cc @awinogradov и @voischev

9 years ago
qfox

Может не надо писать npm bower install? Если писать bower install https://github.com/bem-incubator/bem-grid.git — какая ошибка?

9 years ago
rom111419

bower j#695d479fbdd7c97e61bd89953ef095e2e567e70e ENOGIT git is not installed or not in the PATH

9 years ago
rom111419

Говорят, что Git не установлен. Хотя все установлено.

9 years ago
qfox

Не совсем, говорят, что гит не доступен из бовера. Нужно убедиться, что при запуске bowerа он может сам запускать git. Как-то так: http://blog.countableset.ch/2012/06/07/adding-git-to-windows-7-path/ (но это про msysgit). Можно сделать echo %PATH% (кажется) и посмотреть есть ли там путь к гиту.

А чем не устроил bower install bem-grid?

9 years ago
rom111419

Такую же ошибку выдает.

9 years ago
qfox

@rom111419 Тогда нужно разбираться с гитом и виндовым окружением ;-( Самый адский ад.

9 years ago
rom111419

Товарищи, спасибо!

9 years ago
tadatuta

Под win все консольные команды настоятельно рекомендую запускать в git bash. Как минимум решит проблему нахождения git, ну и прочая мимикрия под *nix пригодится.

9 years ago
rom111419

Решение с сеткой решил след. образом. Темой вопроса была замена b-layout-table иным решением.

Проверка bem-grid.git Как не старался установить не получилось, при этом я:

  • переустановил GIT, Bower
  • Git установил в директорию C:\Program Files (x86)\Git\
  • По совету #tadatuta все консольные команды запускал в git bash
    • Проверил работу Git на установке jQuerry c помощью стандартной команды /c/OpenServer/domains/project-stub (master) $ bower install jquery Все установилось Git заработал

Решил проверить, работает ли bem-grid

  • Проверил работу Git на установке bem-grid c помощью стандартной команды /c/OpenServer/domains/project-stub (master) $ bower i https://github.com/bem-incubator/bem-grid.git Не установился. Решил что программное окружение не устанавливает дистрибутив по ссылке. Решил проверить.
  • Попробовал установить другую сборку c github: bem-bootstrap
  • Проверил ПО на установке bem-grid c помощью стандартной команды /c/OpenServer/domains/project-stub (master) $ bower i https://github.com/iamstarkov/bem-bootstrap.git Bem-bootstrap установился.

Теперь думаю, что не правильно работает установка по ссылке bem-grid.git. Возможно.

Итог: Думаю как прикрепить bem-bootstrap без копирования common blocks, а как с bem-components. На автомате.

Кто знает?

9 years ago
tadatuta

С bem-bootstrap я дело не имел, призову на помощь автора @iamstarkov

Протестировал установку bem-grid по адресу на github в папке с project-stub:

bower i https://github.com/bem-incubator/bem-grid.git
bower bem-grid#*            not-cached https://github.com/bem-incubator/bem-grid.git#*
bower bem-grid#*               resolve https://github.com/bem-incubator/bem-grid.git#*
bower bem-grid#*              checkout v2.1.0
bower bem-grid#*          invalid-meta bem-grid is missing "main" entry in bower.json
bower bem-grid#*              resolved https://github.com/bem-incubator/bem-grid.git#2.1.0
bower bem-core#~2.6.0       not-cached git://github.com/bem/bem-core.git#~2.6.0
bower bem-core#~2.6.0          resolve git://github.com/bem/bem-core.git#~2.6.0
bower bem-core#~2.6.0         download https://github.com/bem/bem-core/archive/v2.6.0.tar.gz
bower bem-core#~2.6.0          extract archive.tar.gz
bower bem-core#~2.6.0     invalid-meta bem-core is missing "main" entry in bower.json
bower bem-core#~2.6.0         resolved git://github.com/bem/bem-core.git#2.6.0

Unable to find a suitable version for bem-core, please choose one:
    1) bem-core#~2.6.0 which resolved to 2.6.0 and is required by bem-grid#2.1.0
    2) bem-core#2.7.0 which resolved to 2.7.0 and is required by bem-components#2.3.0

Prefix the choice with ! to persist it to bower.json


[?] Answer: !2
bower bem-core              resolution Saved bem-core#2.7.0 as resolution
bower bem-grid#~2.1.0          install bem-grid#2.1.0

bem-grid#2.1.0 libs/bem-grid
└── bem-core#2.7.0

И просто по названию модуля:

bower i bem-grid
bower bem-grid#*                cached git://github.com/verybigman/bem-grid.git#2.1.0
bower bem-grid#*              validate 2.1.0 against git://github.com/verybigman/bem-grid.git#*
bower bem-core#~2.6.0           cached git://github.com/bem/bem-core.git#2.6.0
bower bem-core#~2.6.0         validate 2.6.0 against git://github.com/bem/bem-core.git#~2.6.0

Unable to find a suitable version for bem-core, please choose one:
    1) bem-core#~2.6.0 which resolved to 2.6.0 and is required by bem-grid#2.1.0
    2) bem-core#2.7.0 which resolved to 2.7.0 and is required by bem-components#2.3.0

Prefix the choice with ! to persist it to bower.json

? Answer !2
bower bem-core              resolution Saved bem-core#2.7.0 as resolution
bower bem-grid#~2.1.0          install bem-grid#2.1.0

bem-grid#2.1.0 libs/bem-grid
└── bem-core#2.7.0

Оба раза установилось без проблем. Так что это какие-то особенности локальных конфигов. Чтобы как-то помочь, как минимум нужны подробные логи установки.

9 years ago
rom111419

Юзер@1-▒▒ MINGW64 /c/OpenServer/domains/project-stub (master) $ bower i https://github.com/bem-incubator/bem-grid.git bower bem-grid#* cached https://github.com/bem-incubator/bem-grid.git#2.1.0 bower bem-grid#* validate 2.1.0 against https://github.com/bem-incubator/bem-grid.git#* bower bem-core#~2.6.0 cached git://github.com/bem/bem-core.git#2.6.0 bower bem-core#~2.6.0 validate 2.6.0 against git://github.com/bem/bem-co re.git#~2.6.0 bower ECONFLICT Unable to find suitable version for bem-core

9 years ago
tadatuta

А можно еще содержимое bower.json и package.json? Судя по всему, bower не смог найти подходящую версию bem-core, что странно, т.к. в bem-grid стоит мягкая зависимость от ~2.6.0.

9 years ago
iamstarkov

Итог: Думаю как прикрепить bem-bootstrap без копирования common blocks, а как с bem-components. На автомате.

@rom111419 возьмите скомпиленный вариант бэм-бутстрап сетки так отдельный блок

9 years ago
rom111419

Файл bower.json в корне проекта project-stub

{
  "name": "bem-project-stub",
  "version": "1.3.1",
  "description": "BEM project stub",
  "bugs": "https://github.com/bem/project-stub/issues",
  "ignore": [
    ".bem/cache",
    "node_modules",
    "libs"
  ],
  "dependencies": {
    "bem-components": "2.3.0",
    "j": "git://github.com/innabelaya/j.git#695d479fbdd7c97e61bd89953ef095e2e567e70e"
  }
}

Содержимое package.json

{
  "author": "",
  "name": "bem-project-stub",
  "version": "1.3.1",
  "repository": {
    "type": "git",
    "url": "git://github.com/bem/project-stub.git"
  },
  "engines": {
    "node": ">=0.10"
  },
  "dependencies": {
    "bower": "^1.4.1"
  },
  "devDependencies": {
    "bem": "^0.10.0",
    "borschik-tech-cleancss": "^2.0.1",
    "enb": "^0.17.2",
    "enb-bem-techs": "^2.0.0",
    "enb-bemxjst": "^2.0.0",
    "enb-borschik": "^2.0.0",
    "enb-diverse-js": "^0.1.0",
    "enb-modules": "^0.2.0",
    "enb-stylus": "^2.0.0",
    "ym": "^0.1.2"
  },
  "scripts": {
    "start": "enb server",
    "postinstall": "npm run deps",
    "deps": "bower i"
  },
  "private": true
}
9 years ago
rom111419

..@rom111419 возьмите скомпиленный вариант бэм-бутстрап сетки как отдельный блок

Создал блок grid, вставил css (скомпилированный bootstrap), потом посмотрел файл css после сборки и увидел все правила, но мне нужно видеть только те, что я использую? так не катит, нужно bem-grid установить. Там должно браться только то, что используется. Весь файл сетки bootstrap неканает. Спасибо!

Или в bem-grid та же песня?

9 years ago
tadatuta

Добавление resolutions в bower.json не решает проблему?

{
  "name": "bem-project-stub",
  "version": "1.3.1",
  "description": "BEM project stub",
  "bugs": "https://github.com/bem/project-stub/issues",
  "ignore": [
    ".bem/cache",
    "node_modules",
    "libs"
  ],
  "dependencies": {
    "bem-components": "2.3.0",
    "j": "git://github.com/innabelaya/j.git#695d479fbdd7c97e61bd89953ef095e2e567e70e",
    "bem-grid": "https://github.com/bem-incubator/bem-grid.git#~2.1.0"
  },
  "resolutions": {
    "bem-core": "2.7.0"
  }
}
9 years ago
rom111419

Помогло! Все установилось. Можно в двух словах, что это мы сделали?

9 years ago
tadatuta

Когда разные пакеты требуют несовпадающих версий одинаковых зависимостей (в данном случае bem-components и bem-grid хотят bem-core разных версий), bower должен спросить, какую версию в итоге ставить. Но по какой-то причине он этого не сделал. Поле resolutions просто заранее говорит, какой версии отдать предпочтение.

9 years ago
rom111419

Спасибо. Но вопрос с сеткой все равно не решился(((

bem-grid установился в папку libs В файле project-stub/.enb/make.js прописал уровень

levels = [
   ....
        { path: 'libs/bem-grid/common.blocks', check: false },
        'common.blocks',
        'desktop.blocks'
    ];

Как тест вставил код

{
            block : 'row',
            content : [
                {
                    elem : 'col',
                    mods : { mw : 6 },
                    content : 'left column'
                },
                {
                    elem : 'col',
                    mods : { mw : 6 },
                    content : 'right column'
                }
            ]
        }

Не работает. Подскажите как быть?(((

9 years ago
awinogradov

Сетка стала на postCSS. Все руки не доходят поправить доки. Тебе надо заглянуть в сборку и подключить все нужные плагины у себя на проекте.

9 years ago
rom111419

Где все эти плагины можно взять?

9 years ago
awinogradov

Вот здесь весь список https://github.com/bem-incubator/bem-grid/blob/master/.enb/postcss-plugins.js

9 years ago
vithar

@awinogradov надо сильно упростить работу с сеткой, сейчас чтобы заставить её работать надо пройти нечеловеческий путь. А должно быть просто как раз-два-три ;)

9 years ago
awinogradov

Понимаю, виноват. Сделаю)

9 years ago
rom111419

Плагины установил в node_modules, но как установить модули в корневой .enb make.js не понимаю.

Кто знает как?

9 years ago
awinogradov

@rom111419 Тебе нужно в свой файл сборки добавить это https://github.com/bem-incubator/bem-grid/blob/master/.enb/make.js#L32

9 years ago
rom111419

Стопорится на enb-postcss.

Пишет Error: Cannot find module 'enb/techs/css'

Чтобы оставлять комментарии, необходимо авторизоваться.
Исходный код БЭМ_форумаСообщить об ошибке