Как в pug вывести одинаковые блоки с разным содержимым?

т.е. вы используете шаблонизатор, но не можете наполнить шаблон данными?

Как выровнять блоки Флексбокс по примеру?

Уточните вопрос. Где и что не так как хотелось бы. Можно, например, скриншот сделать, отметив на нём нужное.

Почему самостоятельно включаются остановленные приложения на Андроид?

Андрей, вы хотите сказать, что все приложения всегда висят в памяти (иначе как система пошлёт им сообщение)?

Не состыковка с @media-запросами?

.header {
  height: 580px;
}

@media (min-width: 1200px) {
  .header {
    height: 1000px;
  }
}

Есть альтернативы CSSComb?

при написании расширений к IDE.

softshape, ясно? Пишите расширение к VSCode =)))

Есть альтернативы CSSComb?

Александр Таратин, Эта хрень что по-вашему делает? https://www.npmjs.com/package/css-declaration-sorter

Есть альтернативы CSSComb?

Александр Таратин, На хуки линтеры вешать надо. Которые исходники чекают. Я же про билды интересуюсь.

Есть альтернативы CSSComb?

Позвольте поинтересоваться — в чём сакральный смысл сортировки свойств в билде?
Я еще понимаю желание сортировать исходники, потому что с ними работаешь и хочется эстетики. Но билд! Он же всё равно сжимается, в него никто не лазит ну и т.д.

Какой он, идеальный аккордеон?

Саша, скринридеры должны нормально воспринимать. Но это не точно =)

С поддержкой беда. Но тут фоллбэк написать — дело пяти минут.

Теперь серьёзно. Я бы никогда не стал использовать это в своих проектах. По крайней мере в текущей реализации. Слишком уж убого. И не кастомизируется. Только чтобы стрелку убрать, нужно танцы с бубном устраивать. И всё равно фоллбек на js писать надо.
Бутстраповский аккордион вполне юзабельный и доступный. Если аккуратно его выдрать из фреймворка, можно использовать где угодно.

Gulp, Npm, Yarn, Webpack - Чем пользоваться в 2017-2018 году?

Иван, Для первого вебпака был плагин BowerWebpackPlugin, можно было и bower заюзать совместно. Для новых версий не нашёл. Но это лирика.

Действительно, с подключением из npm есть некоторые проблемы.
И если скрипты подключать очень просто

import $ from 'jquery';
import 'slick-carousel';

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

@import '../node_modules/slick-carousel/slick/slick.scss';

Либо webpack с плагином ExtractTextPlugin
import 'slick-carousel/slick/slick.css';
В обоих случаях нужно лезть в папку модуля и смотреть как у него лежат файлы (либо смотреть документацию, но там не всегда есть нужная инфа, либо просто знать =) )

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

Gulp, Npm, Yarn, Webpack - Чем пользоваться в 2017-2018 году?

yarn vs npm — это исключительно дело вкуса. Никаких преимуществ. Сначала они делали упор на скорость и на более "понятные" команды. Но в свете выхода последних версий npm первое неактуально, а второе изначально было вкусовщиной.

Gulp, Npm, Yarn, Webpack - Чем пользоваться в 2017-2018 году?

С webpackom если разберетесь, то он сможет вам делить ваши бандлы как угодно. универсальный комбайн. Особенно в связке с гальпом (в связке рекомендую использовать обёртку piped-webpack вместо webpack-stream, она корректно работает с DLL).

Из-за чего флекс колонки стали разными по размерам?

raulvodov, или flex-shrink:0 всем колонкам. или всё вместе.

Из-за чего флекс колонки стали разными по размерам?

raulvodov, ширины в процентах укажите. часто бывает достаточно.

Из-за чего флекс колонки стали разными по размерам?

Потому что flex означает гибкий.
Указывайте параметры сжатия flex-shink, базовые размеры flex-basis. Ну и никто не отменял старые добрые width/min-/max-width.

Какие единицы измерения лучше использовать при верстке адаптивных сайтов и почему?

Дима Турков, Почему ты так негативно воспринимаешь ответы? Тебе советы дельные дают, а ты...

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

Эта задача всегда есть. Я же описал в предыдущем комменте про шрифты.
Вы читаете, что я написал то? (с) =)

Какие единицы измерения лучше использовать при верстке адаптивных сайтов и почему?

avr1972, Can I use rem?

Какие единицы измерения лучше использовать при верстке адаптивных сайтов и почему?

Дима Турков, Ладно, пиксельный ты наш. Вот тебе еще один аргумент против пикселей.

Я — слабовидящий человек. Для серфинга использую браузер в котором в настройках выставлен увеличенный размер шрифта. Мне так удобнее, лучше видно.

Делаем простую тестовую страницу:

<h1 style="font-size: 32px;">Heading in pixel (36px)</h1>
<h1 style="font-size: 2rem">Heading in rem (2rem)</h1>

Поясню, если не знаешь. По умолчанию в браузере размер шрифта у корневого документа равен 16 пикселям, что есть 1rem. Я взял удвоенный размер для лучшей наглядности.

Если мы откроем эту страницу при обычных настройках браузера, то увидим следующее:



Всё как и ожидается, размеры равны.

Но если мы откроем страницу в моём браузере, с кастомной настройкой, то будет совсем не то, что я ожидаю:



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

Надеюсь это убедит тебя использовать ремы хотя бы для шрифтов. Ну или хотя бы перестанешь пропагандировать заведомо неверные подходы в верстке =)

Удачной вёрстки ;)

Какие единицы измерения лучше использовать при верстке адаптивных сайтов и почему?

Дима Турков,

а сколько должен? Пойду и уменьшу на 40% для мобильного размера

минимально возможное для решения задачи — один стиль =)
Если конечно у вас не в пикселях всё =)))

Какие единицы измерения лучше использовать при верстке адаптивных сайтов и почему?

avr1972, Обстоятельный ответ на этот простой вопрос легко потянет на не хилую статью. Так что не буду вдаваться в подробности.
Хотите примеры, пожалуйста, подкину пару примитивных.

Задача. Сделать элемент, шрифт в котором будет всегда меньше родительского, внутри чего бы он не находился.
Решение.
.small { font-size: 0.75em; }

Задача. Масштабировать типографику через медиазапросы.
Решение. Задаём масштабируемым элементам размеры шрифтов в единицах rem. В медиазапросах меняем единственное правило

:root { font-size: 100%; }
@media (min-width: 1000px) { :root { font-size: 120%; } }

Задача. Сделать блок высотой в один экран
Решение.
.block { height: 100vh; }

Задача. Сохранять отношение шрифта и высоты строки
Решение. Указывать line-height без единиц измерения
body { line-height: 1.4; }

ну и так далее....