Вадим Кот

SVG + padding/margin в процентах

Flexbox layout isn't slow https://developers.google.com/web/updates/2013/10/...

.homebox-row-1 {
  background: red;
}

.homebox-row-1 ~ .homebox-row-1 {
  background: yellow;
}

Получается задаешь всем цвет, а потом для всех которые идут после первого цвет сбрасывается на другой.

Через CSS это сделать невозможно при однородной структуре, только безумным хаком (column-reverse + селектор тильда + обратный порядок элементов). И другие способы, привязанные к последовательности блоков — это так себе.

Ни :nth-child, ни :first-of-type так не работают (читайте хороший пост на тему).

Поэтому простейший JS вам в помощь:



Update: посмотрите комментарии, там решение на строчку кода меньше.

jsfiddle.net/s67wxfLd/1 так ?
jsfiddle.net/s67wxfLd/2 вот так если надо встречное ответку сделать

Рисую без сетки, все хорошо в плане дизайна, но не хорошо для верстальщика, который ворчит. Рисую с сеткой, получается какой то не уклюжий дизайн (не всегда безусловно, зависит от идеи), но верстальщик доволен.

Я сомневаюсь в Вашей компетентности, в Ваших дизайнерских способностях, если Вы задаете подобные вопросы.
Каждый дизайнер знает что модульная сетка может быть разной.
Креативный дизайнер не ограничивается сеткой bootstrap, но это обязательно какая-то сетка со своими вертикальными и горизонтальными ритмами.
Если соблюдены ритмы, размеры текста и шрифтов, то для верстальщика нет проблем.

Начните хотя бы со статей о сетках, например Что такое модульная сетка и для чего она нужна в в... , Модульная сетка макета с нуля

--------------------------------------------------------------------

Могу ли я рисовать без сетки, но при этом на этапе верстки, все это дело можно было бы подогнать под бутстрап?

Ответ: нет! Максимум изменить количество колонок, подогнать gutter'ы, но это уже заморочки для верстальщика.

НО, плох тот верстальщик, который зациклен на одном лишь bootstrap.
Хороший верстальщик, этот тот который в основном верстает кастомно - без использования подобных html фреймворков.
В таком случае любой дизайн можно сверстать без проблем.

И, возможно, что вам с верстальщиком стоит расстаться, чтобы не мучить друг друга! Либо научитесь идти на компромиссы и прислушиваться друг к другу!

И стоит ознакомиться хотя бы с основами верстки, а то с вот таким мнением:

верстальщик должен подстраиваться под тебя, а не ты под него. ты-творец, твори))

можете остаться наедине со своими "творениями"!

Придётся вас огорчить. Nunjucks не выглядывает "outside of the box". Об этом сообщает один из авторов библиотеки. Обсуждается вот тут:

https://github.com/mozilla/nunjucks/issues/326#iss...

Относительные пути использовать можно, но только в том случае если они находятся в пределах paths: []. Так что нужно или переместить файл в templates или добавить '...img/svg' в массив paths. Соболезную.

Css классы вообще не несут никакой семантики. Хоть как обзывайте, всем пофиг. Если вы говорите о "понятности" для программиста/верстальщика, то тут вы правы — мнения разные.
Что такое .title? Заголовок. Какой заголовок? А хз...
А что такое .product-item__title? Это заголовок блока в списке товаров. Very good.

Окей. Но мы же видим в разметке class="title _product-item". А в css мы это видим? Нет. У нас голый класс .title {}, и еще где-то составной есть .title._product-item. Очевидно, что .title используется с другими блоками тоже. Пришел новый человек с задачей поменять поменять цвет тайтлов ну допустим в отзывах. Он откроет страницу, посмотрит в инспектор, увидит что цвет заголовка задан в классе .title, а про .title._product-item он даже не в курсе будет, это на другой странице сайта, в css через 1000 строк. Он просто поменяет цвет в .title. А потом выяснится что заголовки в товарах тоже поменяли цвет. А не надо было.

Короче, ребята, зачем вы ищете и выдумываете разную хрень? Всё уже придумано до вас — БЭМ. И не дураки это придумывали, а люди с большим опытом верстки и поддержки проектов разного уровня. А претензии типа "мне не нравятся длинные названия классов" — ну право же, детский сад, надо взрослеть.

Ну и можно слегка поэкспериментировать, объединив SMACSS с BEM.
Оставить уровни base и layout. Оставить уровень modules — по сути это будут БЭМ-блоки. Стейты выкинуть — состояния блока лучше в нем самом описывать. Темы — по желанию.

если не использовать SASS - а это зачастую не используется, так как работаю часто с готовыми проектами.

Если приходится лезть в готовый проект, то стоит изучить его и придерживаться стиля заданного автором. Если там нет никакого стиля, то сам бог велел наговнокодить =)) Ну или отрефакторить, если заказчик готов платить.

Zeplin, Avocode, Invision.

element.classList.toggle()
https://developer.mozilla.org/en-US/docs/Web/API/E...

Вот вам даже пример:
Ссылка

Пример использования

const container = document.querySelector(".container");

container.onclick = function(){
	container.classList.toggle("container_color_red");
}

Потому что некоторые (и их много) свойства принимают только дискретные значения