Подключить внешний css с содержимому iframe?

Sermar, нет. Доступ к чужим сайтам запрещен политикой безопасности.
Вы можете максимум установить расширение, типа Stylish и в нем поправить стили для нужных сайтов.

Разбить слово на слоги и посчитать их количество?

Один запрос в гугле, функция найдена =) Для php.

<?
$text="признаны уязвимыми или вымирающими Международным союзом охраны природы";
#char patterns
$RusA = "[абвгдеёжзийклмнопрстуфхцчшщъыьэюя]";
$RusV = "[аеёиоуыэюя]";
$RusN = "[бвгджзклмнпрстфхцчшщ]";
$RusX = "[йъь]";
 
#main ruller
$regs[] = "~(". $RusX . ")(" . $RusA . $RusA . ")~iu";
$regs[] = "~(". $RusV . ")(" . $RusV . $RusA  . ")~iu";
$regs[] = "~(". $RusV . $RusN . ")(" . $RusN . $RusV . ")~iu";
$regs[] = "~(". $RusN . $RusV . ")(" . $RusN . $RusV . ")~iu";
$regs[] = "~(". $RusV . $RusN . ")(" . $RusN . $RusN. $RusV . ")~iu";
$regs[] = "~(". $RusV . $RusN . $RusN . ")(". $RusN . $RusN . $RusV . ")~iu";
$regs[] = "~(". $RusX . ")(" . $RusA . $RusA . ")~iu";
$regs[] = "~(". $RusV . ")(" . $RusA . $RusV  . ")~iu";
 
 
foreach($regs as $cur_regxp) {
        $text = preg_replace( $cur_regxp , "$1-$2" , $text);
}
var_dump($text);

Выглядит работоспособной.

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

Как подсказать, коль ты ничего не говоришь
https://www.youtube.com/watch?v=wGp2K8YhH6o
=))

Подозреваю, что причина в подключенных js библиотеках, но даже не представляю как это можно реализовать и как это отменить.

Вполне правдоподобное предположение. Но чем мы-то можем помочь?

Есть ли какое-то готовое решение для foundation+bem+phpstorm+gulp?

команды можно записать в батник и указать его в качестве external tools в шторме. Тогда вообще достаточно выбрать один пункт меню.

Есть ли какое-то готовое решение для foundation+bem+phpstorm+gulp?

создаете репу с заготовкой на github.com
старт проекта в три команды в консоли

git clone https://github.com/username/reponame .
npm install
gulp default

Как сделать нормальный wrap на flexbox?

подкрасил рамками для ясности

Как сделать нормальный wrap на flexbox?

darksladen, ну то что я говорил - неполное решение проблемы. медиазапрос тут все-таки понадобится - https://codepen.io/delphinpro/pen/RLKoNz?editors=1100

Как правильно использовать SVg иконки?

собирайте иконки в спрайт в виде symbols
вставляйте на страницу через xlink:href
подключите svg4everybody.js
И будет вам счастье. Вставлять удобно, через css стилизуется.

Ховер мерцает, как поправить?

sergey_from_saratov, реальный - не значит весь ваш код. пусть будут те же квадратики, но более приближено к реальности.

Впрочем если нужно на js, используйте пару событий mouseenter/mouseleave - всё получится.

Ховер мерцает, как поправить?

sergey_from_saratov, ну так и нужно реальный пример приводить, а не синтетический...

Ховер мерцает, как поправить?

https://codepen.io/anon/pen/rGjeed

Как сделать нормальный wrap на flexbox?

Максим Ленский, wrap - завернуть. Имеется ввиду перенос ячеек на вторую строчку

Как сделать нормальный wrap на flexbox?

с врапом ячеек? покажете?

Как сделать нормальный wrap на flexbox?

darksladen, Теперь понятно.
Есть вот такой хак https://codepen.io/anon/pen/pWRjbQ
Полностью вашу проблему не решает, но расширяет пределы нужного отображения и позволяет уменьшить количество медиазапросов.

Как сделать нормальный wrap на flexbox?

darksladen, друг, выражайся яснее. То тебе не надо по центру, то надо.
Ну сделай пример, нарисуй картинку, как надо, что ли..

Как сделать нормальный wrap на flexbox?

justify-content: flex-start

Как на Тостере смотреть вопросы по уровню сложности?

Я всё понял! =)
Они тренируют нейросеть на распознавание уровня сложности вопроса =))

Как на Тостере смотреть вопросы по уровню сложности?

Уверен, скоро будет. Фишка новая, необкатанная.
После опроса прошло несколько дней, а уже выкатили.

Для каких проектов нужен Webpack?

qbk17, webpack сам по себе крайне неудобно использовать для чего-то кроме SPA (ну или я не умею). Но в паре с gulp получается отличная связка.
Но если вас интересует только минификация/сборка/оптимизации - gulp ваш выбор. Плагинов полно, на любой вкус и цвет. Настройка тасков - дело пяти минут (впоследствии, когда разберетесь, но разобраться тоже несложно).

Как правильно реализовать прелоадер для сайта?

Er Code, гениально =)