Настройка bem-grid

FA73F0X commented 9 years ago

Здравствуйте! Нужна помощь по настройке bem-grid. Делаю все как написано здесь https://github.com/bem-incubator/bem-grid Но в результате стилей в браузере нет. enb make отрабатывает без ошибок. Я понимаю, что дело в настройке, но информацию по этой теме найти не могу. На форуме подобная тема есть. В конце отписались, что заработало а что сделали ни слова. Если есть у кого инструкция или статья по настройке, буду благодарен и думаю в дальнейшем не только я.

tadatuta commented 9 years ago

cc @awinogradov

awinogradov commented 9 years ago

@FA73F0X Рассказывай как подключаешь) Там дока старая, простите меня)

FA73F0X commented 9 years ago

Подключаю как написано. Если дока на сегодня не актуальна, давайте набросаем черновик новой доки здесь ) Заодно и обкатаем новый вариант. @awinogradov напиши, что установить и какие файлы подправить а я отпишусь, что у меня получилось.

awinogradov commented 9 years ago

А можешь прислать конфиг или ссылку на реп? Если нет, то опиши стек: препроцессор и версии библиотек. Это очень поможет!

FA73F0X commented 9 years ago

Да, забыл написать, если enb-postcss обязателен для работы, то с ним у меня проблема он не устанавливается. Я использую NVM для Node сейчас попрыгаю по версиям. Попробую собраться на других версиях node. Хотя не в этом дело скорее всего.

FA73F0X commented 9 years ago

https://github.com/FA73F0X/bemgrid

Linux version 3.16.0-38-generic (buildd@allspice) (gcc version 4.8.2 (Ubuntu 4.8.2-19ubuntu1) ) #52~14.04.1-Ubuntu SMP x86_64 node v4.1.2 npm 2.14.4

Если нужен npm-debug.log могу из .gitignore его убрать и загрузить?

awinogradov commented 9 years ago

enb-postcss обязателен. Он собирает и компилирует стили. Кроме того обязателен набор плагинов из bem-grid.

FA73F0X commented 9 years ago

Собрался на разных версиях node и везде одна ошибка при установке пакета enb-postcss. Все остальное ставится и работает без проблем. Сам Bem тоже без проблем работает. Как мне этот пакет ставить, если он огрызается?)

npm WARN peerDependencies The peer dependency enb@>=0.13.11 <1.0.0 included from enb-postcss will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm ERR! Linux 3.16.0-38-generic
npm ERR! argv "/home/fa73f0x/.nvm/versions/node/v0.12.7/bin/node" "/home/fa73f0x/.nvm/versions/node/v0.12.7/bin/npm" "i" "--save-dev" "enb-postcss"
npm ERR! node v0.12.7
npm ERR! npm  v2.11.3
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package enb does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer enb-postcss@0.1.2 wants enb@>=0.13.11 <1.0.0
npm ERR! peerinvalid Peer enb-bem-techs@2.1.0 wants enb@>=0.15.0 <2.0.0
npm ERR! peerinvalid Peer enb-bemxjst@2.1.0 wants enb@>= 0.16.0 < 2.0.0
npm ERR! peerinvalid Peer enb-borschik@2.1.0 wants enb@>= 0.16.0 < 2.0.0
npm ERR! peerinvalid Peer enb-js@1.1.0 wants enb@>= 0.15.0 <2.0.0
npm ERR! peerinvalid Peer enb-stylus@2.1.0 wants enb@>=0.16.0 <2.0.0

Guria commented 9 years ago

в enb-postcss не успели добавить поддержку недавно вышедшего enb@1.0 #635 Пока можно установить 0.17.2: npm i --save-dev enb@0.17.2

FA73F0X commented 9 years ago

Алексей, спасибо за подсказку. enb-postcss установился и bem-grid стоит, но стилей нет. Возможно я не все настроил? Для css какие пути нужно прописывать или достаточно прописать ?

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

awinogradov commented 9 years ago

@FA73F0X а хде тут enb-postcss?) Смотри чего не хватает и вот.

FA73F0X commented 9 years ago

@awinogradov да его там нет bemgrid/.enb/make.js, но установка прошла без ошибок(когда откатился npm i --save-dev enb@0.17.2). А файлы bem-grid/.enb/make.js и bem-grid/.enb/postcss-plugins.js у меня установились в папку libs в корне.

awinogradov commented 9 years ago

Эти файлы и плагины должны участвовать в твоей сборке. Перенеси их в свой конфиг и подключи по примеру с бем-грид. Все заработает.

Sent from my iPhone

On 10 Oct 2015, at 12:48, Dmitriy Balabanov notifications@github.com wrote:

@awinogradov да его там нет bemgrid/.enb/make.js, но установка прошла без ошибок. А файлы bem-grid/.enb/make.js и bem-grid/.enb/postcss-plugins.js у меня установились в папку libs в корне.

— Reply to this email directly or view it on GitHub.

FA73F0X commented 9 years ago

Не понимаю, что мешает разработчикам Bem добавить Grid в ядро. А то получаются какие-то костыли и протезы в данном случае. Я делая проект в Meteor устанавливаю сетку одной командой. А в Bem не один плагин нужно поставить, исправить кучу файлов и не забыть переместить папки в другую директорию. Да, чуть не забыл еще нужно откатиться а то плагин еще не обновился для новой версии enb. Извините, но такой инструмент только усложняет процесс разработки! Можете закрыть тему.

olegdenisov commented 8 years ago

реально жопа какая-та с установкой, попробовал по иструкции, вылезла ошибка попробовал ещё раз вылезла npm WARN EPEERINVALID vow-queue@0.0.2 requires a peer of vow@~0.3.9 but none was installed.

awinogradov commented 8 years ago

Возьми ветку из project-stub с именем bem-grid. Там все работает. Можно сделать диф от мастера чтобы увидеть как. Скоро появится нормальная инструкция и примеры в репозитории bem-grid. Потерпите немножко:)

Sent from my iPhone

On 29 Nov 2015, at 15:22, Oleg notifications@github.com wrote:

реально жопа какая-та с установкой, попробовал по иструкции, вылезла ошибка попробовал ещё раз вылезла npm WARN EPEERINVALID vow-queue@0.0.2 requires a peer of vow@~0.3.9 but none was installed.

— Reply to this email directly or view it on GitHub.

olegdenisov commented 8 years ago

не ставится она

awinogradov commented 8 years ago

Кто она? Будет продуктивнее, если подробнее опишешь проблему и что делаешь.

Sent from my iPhone

On 29 Nov 2015, at 17:35, Oleg notifications@github.com wrote:

не ставится она

— Reply to this email directly or view it on GitHub.

olegdenisov commented 8 years ago

пробовла установить ветку git clone https://github.com/bem/project-stub.git --depth 1 --branch bem-grid получил https://gist.github.com/c1n1k/0bc3b24e030d3d662968

apsavin commented 8 years ago

Я не имею отношения к bem-grid, но:

Скорее всего, с пятой нодой и npm 3 вообще ничего не выйдет. Попробуйте 4-ую.
Вывод Please try running this command again as root/Administrator. как бы намекает, что стоит попробовать поставить от рута.

olegdenisov commented 8 years ago

это как? у меня win10

tadatuta commented 8 years ago

@awinogradov Антон, есть какой-нибудь эстимейт по улучшению ситуации с bem-grid?

awinogradov commented 8 years ago

@tadatuta давай к концу недели пофикшу все

voischev commented 8 years ago

@tadatuta все будет ;) Есть отличный план :)

awinogradov commented 8 years ago

Теперь есть и релиз. Со скомпиленным css и enb модулем https://github.com/bem-incubator/bem-grid/releases/tag/2.2.0

koloskof commented 8 years ago

@awinogradow как можно отрубить адаптивность сетки?

awinogradov commented 8 years ago

Не думаю, что я правильно понял вопрос:) можешь рассказать чего хочется?

Sent from my iPhone

On 20 Feb 2016, at 00:09, Mikhail Koloskov notifications@github.com wrote:

@awinogradow как можно отрубить адаптивность сетки?

— Reply to this email directly or view it on GitHub.

koloskof commented 8 years ago

Хочу чтоб у контейнера оставался min-width: 1100px (допустим) и колонки не перестраивались при ресайзе окна. Сейчас мне нужна сетка, только для десктопной версии. Прописать gridMinWidth : '1100px' не пракатило )

awinogradov commented 8 years ago

Братишка, так тебе надо у твоего контейнера установить min-width: 1100px, и внутри него использовать сетку с колонками s размерности: {s: true} - для автоматического расчета ширины, {sw: 0..12} - для ручного управления ;) Размерность s задаёт работу на маленьких девайсах и выше, так что ничего не будет переустраиваться.

Sent from my iPhone

On 20 Feb 2016, at 00:40, Mikhail Koloskov notifications@github.com wrote:

Хочу чтоб у контейнера оставался min-width: 1100px (допустим) и колонки не перестраивались при ресайзе окна. Сейчас мне нужна сетка, только для десктопной версии. Прописать gridMinWidth : '1100px' не пракатило )

— Reply to this email directly or view it on GitHub.

koloskof commented 8 years ago

Вот как оно тут оказывается. Это тебе не буЦтраповский грид ) Спасибо, Антон. Разобрался.

adinvadim commented 8 years ago

Установил bem-grid как enb модуль, а он конфликует со stylus, как быть?

awinogradov commented 8 years ago

Опиши подробнее что значит конфликтует?

Sent from my iPhone

On 21 Feb 2016, at 17:46, Vadim notifications@github.com wrote:

Установил bem-grid как enb модуль, а он конфликует со stylus, как быть?

— Reply to this email directly or view it on GitHub.

adinvadim commented 8 years ago

Подключил bem-grid как enb module @awinogradov

Вот лог

Error: Concurrent techs for target: index.css, techs: "stylus" vs "enb-bem-grid"
    at Error (native)
    at module.exports.inherit._registerTarget (/Users/adinvadim/sandbox/_liot.mipt/vps/frontend/themes/basic/node_modules/enb/lib/node/node.js:396:19)
    at /Users/adinvadim/sandbox/_liot.mipt/vps/frontend/themes/basic/node_modules/enb/lib/node/node.js:523:23
    at Array.forEach (native)
    at /Users/adinvadim/sandbox/_liot.mipt/vps/frontend/themes/basic/node_modules/enb/lib/node/node.js:522:31
    at Array.map (native)
    at module.exports.inherit._registerTargets (/Users/adinvadim/sandbox/_liot.mipt/vps/frontend/themes/basic/node_modules/enb/lib/node/node.js:521:21)
    at module.exports.inherit.requireSources (/Users/adinvadim/sandbox/_liot.mipt/vps/frontend/themes/basic/node_modules/enb/lib/node/node.js:470:14)
    at module.exports.inherit.build (/Users/adinvadim/sandbox/_liot.mipt/vps/frontend/themes/basic/node_modules/enb/lib/node/node.js:572:21)
    at /Users/adinvadim/sandbox/_liot.mipt/vps/frontend/themes/basic/node_modules/enb/lib/make.js:482:54

Вот настройки

            [techs.stylus, {
                target: '?.css',
                autoprefixer: {
                    browsers: ['ie >= 10', 'last 2 versions', 'opera 12.1', '> 2%']
                },
                sourceSuffixes: ['styl', 'css', 'post.css'],
                useNib: true,
            }],

            [require('bem-grid').enb, {
                sourceSuffixes: ['post.css'],
                config : {
                    maxWidth : '900px',
                    gutter : '10px',
                    flex : 'flex'
                }
            }],

awinogradov commented 8 years ago

@adinvadim а зачем ты в stylus postcss отдаешь? :) тут проблема в настройке enb. Тебе надо результат stylus передавать в сетку;)

belozer commented 8 years ago

Ребят. Уже весь вечер промучался с установкой sharps (bem-grid). Сборка зависает на 21:07:52.891 - [rebuild] [desktop.bundles/index/index.min.js] borschik `. Файла css после технологии sharps.enb не создаётся. Кто-то сталкивался с данной проблемой?

DjonyBastone commented 7 years ago

Сборка Gulp. gulpfile - https://gist.github.com/DjonyBastone/4302ff39b7c2ace02bcdbd447ca91562

выдает ошибку при сборке:

[14:58:45] Starting 'default'... [14:58:45] Starting 'build'... [14:58:46] gulp-debug: desktop.bundles\index\index.bemhtml.js [14:58:46] gulp-debug: desktop.bundles\index\index.html { [Error: CSS parse error index.min.css: Identifier is expected 18 | align-items: stretch; 19 |} 20 |@media (--xxlarge-only) { ----------------^ 21 | .header { 22 | width: 100%;] message: 'CSS parse error index.min.css: Identifier is expected\n 18 | align-items: stretch;\n 19 |}\n 20 |@media (--xxlarge-only) {\n----------------^\n 21 | .header {\n 22 | width: 100%;', showStack: false, showProperties: true, plugin: 'gulp-csso', __safety: { toString: [Function: bound ] } } [14:58:46] gulp-debug: desktop.bundles\index\index.min.js [14:58:46] The following tasks did not complete: default, build [14:58:46] Did you forget to signal async completion?

Пожалуйста помогите разобраться

DjonyBastone commented 7 years ago

@media (--xxlarge-only) {
    .header {
        width: 100%;
    }
}

Или не правильно css написал?

tadatuta commented 7 years ago

Судя по логу, дело именно в ошибке в синтаксисе стилей, сборка не виновата.

DjonyBastone commented 7 years ago

const postcss = require('gulp-postcss');
const sharps = require('sharps').postcss;
postcss([sharps({
    columns: 12, // default
    maxWidth: '2048px',
    gutter: '10px',
    flex: 'flex'
})]);

В настройке указано что максимальная ширина 2048px. С этими настройками, выплывает ошибка при попытке стилизации блока .header:

@media (--xxlarge-only) {
    .header {
        width: 100%;
    }
}

Сделано в точности по примеру из документации - https://github.com/theprotein/sharps/blob/master/common.blocks/mq/mq.ru.md

Цель: задать при помощи Media queries максимальную ширину 2048рх., не используя row и col

Если не сложно можете выложить пример применения Media queries для модульной сетки Sharps ?

Или подскажите в каком месте я не прав?

tadatuta commented 7 years ago

в комменты призывается @awinogradov

belozer commented 7 years ago

@DjonyBastone а что за ошибка?

awinogradov commented 7 years ago

Плюсую предыдущему дяде, больше подробностей бы или тест кейс очень помогли бы.

On 23 Jan 2017, at 22:24, Sergey Belozyorcev notifications@github.com wrote:

@DjonyBastone а что за ошибка?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

tadatuta commented 7 years ago

если я правильно понял, то текст ошибки в предпредыдущем сообщении @DjonyBastone

DjonyBastone commented 7 years ago

Не появляются колонки вообще, sharps - не работает.

1) Думаю, что написал gulpfile.js с ошибкой.

2) Кроме этого при сборке выскакивает ошибка. Все что связано с ошибкой выложил в - https://gist.github.com/DjonyBastone/ee11a069c13023944279d8430317cf7a

Проект с ошибкой целиком - https://github.com/DjonyBastone/osipbove-bem-project.git

awinogradov commented 7 years ago

@DjonyBastone может тебе просто не хватает https://github.com/theprotein/sharps/blob/master/engines/plugins.js#L9 ? Просто потому что для декларации media используется этот плагин.

DjonyBastone commented 7 years ago

@awinogradov, благодарю)))

А пример gulpfile.js с настроеным sharps можете скинуть?

У меня и row col не работают. Думаю что не верно в gulpfile

awinogradov commented 7 years ago

@DjonyBastone не могу) я не пользуюсь гульпом. Но кажется, что дело не в нем. PostCSS настраивается одинаково для всех плагинов. Можно смотреть любой пример хоть тут. А что значит не работают row и col?

DjonyBastone commented 7 years ago

Блок row, 2 элемента col по 6 колонок

В css ни чего по ним не приходит. Следовательно сборка css плагина sharps не происходит. Скорее всего, не верно в конфиге сборщика что-то.

awinogradov commented 7 years ago

Судя по всему это должно быть здесь. Sharps работает как обычный плагин для PostCSS и подключается так же.

DjonyBastone commented 7 years ago

Да этот вариант я попробовал уже. С таким вариантом лог:

[14:10:21] Using gulpfile E:\html\osipbove-bem-project\gulpfile.js [14:10:21] Starting 'default'... [14:10:21] Starting 'build'... TypeError: require(...) is not a function at css (E:\html\osipbove-bem-project\gulpfile.js:56:42) at tryCatch (E:\html\osipbove-bem-project\node_modules\gulp-bem-bundle-builder\lib\index.js:93:47) at tryCatch (E:\html\osipbove-bem-project\node_modules\gulp-bem-bundle-builder\lib\index.js:137:16) at Object.keys.map.target (E:\html\osipbove-bem-project\node_modules\gulp-bem-bundle-builder\lib\index.js:93:32) at Array.map (native) at DestroyableTransform._transform (E:\html\osipbove-bem-project\node_modules\gulp-bem-bundle-builder\lib\index.js:91:40) at DestroyableTransform.Transform._read (E:\html\osipbove-bem-project\node_modules\readable-stream\lib_stream_transform.js:159:10) at DestroyableTransform.Transform._write (E:\html\osipbove-bem-project\node_modules\readable-stream\lib_stream_transform.js:147:83) at doWrite (E:\html\osipbove-bem-project\node_modules\readable-stream\lib_stream_writable.js:347:64) at writeOrBuffer (E:\html\osipbove-bem-project\node_modules\readable-stream\lib_stream_writable.js:336:5) at DestroyableTransform.Writable.write (E:\html\osipbove-bem-project\node_modules\readable-stream\lib_stream_writable.js:274:11) at Readable.ondata (_stream_readable.js:555:20) at emitOne (events.js:96:13) at Readable.emit (events.js:188:7) at readableAddChunk (_stream_readable.js:176:18) at Readable.push (_stream_readable.js:134:10) [14:10:22] gulp-debug: desktop.bundles\index\index.bemhtml.js [14:10:22] gulp-debug: desktop.bundles\index\index.html [14:10:22] gulp-debug: desktop.bundles\index\index.min.js [14:10:22] The following tasks did not complete: default, build [14:10:22] Did you forget to signal async completion?

Process finished with exit code 0

bem-site / bem-forum-content-ru

Настройка bem-grid #633