htmleater

Конкретно это - результат работы простенького, но платного скрипта по созданию буквиц (названия не вспомню).
Суть в том, что первая буква оборачивается в спан и с нею уже производятся действия. Копай в эту сторону.

Можно попробовать, к примеру, flexibility-master (есть на гитхабе) - маленький скрипт, который в ИЕ9 вместо флексбоксов подставляет флоаты.

caniuse.com/#search=page-break-inside
Полноценно не поддерживается ни одним браузером, кроме Опера мини

.flex-item:first-child {
flex: 0 0 200px; /*в любых единицах*/
}
.flex-item:last-child {
flex: 1 1 auto;
}

Я за свою практику делал 3-4 сайта + макеты для полиграфии в благотворительных целях бесплатно (семейные детдома). Ничего особо сложного нет или времязатратного, ибо максимум требований: фото-видеогалерея, новости, обратная связь. Никаких особых изысков в дизайне, как правило, хватает штатных шаблонов + логотип + слайдер.
danneo.com
сами освоите за 2-4 дня + несколько дней на нестандартные задачи с помощью сообщества и поиска + 2-3 дня на обучение тех. кто будет вести сайт в дальнейшем.
Боитесь, что не справитесь сами, обращайтесь.

Не очень давно в лендинге пытался поженить Анимате+Wоw.js с fullpage.js (как я понимаю, разновидность one scroll page).
От Wоw.js пришлось отказаться практически сразу из-за явных конфликтов, которые и на скролл-скрипт стали влиять. Анимат удалось заставить "работать" только в таком виде: при начальной загрузке страницы проигрываются анимации со второго-третьего экранов, а уже потом прорисовывается первая страница.
Решить проблему не сумел.(((

От недели (если сроки горят и заказчик готов заплатить +40-50% за срочность) до двух недель. В одиночку, при условии, что в ТЗ нет какой-либо экзотики, и основные затраты времени не лягут на переговоры, т.е., когда заказчик созрел и готов к работе.

Если правильно понял вопрос, то удивлять нечему: что заказывали, то и получили. Контейнер на 100% процентов вьюпорта - он так и показался, а за содержимое он не ответчик.
Либо контейнеру высоту авто, либо итему с переполнением оверфлоу: хидден или авто. И будет счастье.
Это как требовать от кармана, чтобы в него ведро фиников поместилось.

Ну вот к примеру, недавно делал под OpenCard:
overtune.ru от 320 пикс до бесконечности

Простая логика: Насколько больше можно реализовать на =>1440px, нежели на 320?
Следовательно, наворачиваем всё, что задумали на десктопе, а потом с помощью медиа прописываем поведение на более малых величинах.
Поверьте, что кол-во кода стилей при таком подходе будет существенно отличаться от того, когда идут от противного.
В прпинципе, достаточно примерно такого:
media screen and (min-width: 320px) and (max-width: 479px) {}
media screen and (min-width: 480px) and (max-width: 639px) {}
media screen and (min-width: 640px) and (max-width: 767px) {}
media screen and (min-width: 768px) and (max-width: 779px) {}
media screen and (min-width: 800px) and (max-width: 1023px) {}
media screen and (min-width: 1200px) and (max-width: 1681px) {}

но я часто добавлю ещё несколько значений, для которых существуют общие значения.

И лучше на этапе разработки подключать отдельный файл стилей для медиа

Проще и надёжнее всего сделать это средствами flexbox + поиграться свойствами text-overflow.
Хотя я совсем не уверен, что решение с обрезанием текстов будет правильным. Ну, к примеру, какой толк от меню будет, если юзер на экране увидит: {icon} Список... + {checkbox} показы... + В нача...?
К тому же, если следовать логике, то в селекте сортировки также нужна иконка, иначе он не воспринимается самостоятельным пунктом меню.
В качестве здоровой критики позволю себе сделать замечание: в вашей вёрстке нарушено одно из базовых правил построения интерфейса - отсутствие группировки в меню согласно весу и предназначению пунктов.
Т.е. у вас есть три пункта, которые действительно необходимы для сравнения (Список, фильтр, Сортировка). Абсолютно непонятно каким образом к этой группе примкнул Делёж ссылками, да и наличие в строке меню ссылки на статью тоже не бесспорен и даже выключка вправо дела не спасает.

Ну для этого существует 100500 фреймворков и практически для каждого шаблоны. Самый, наверное, распространённый - Bootstrap.
Пробовал разные, но, в конце концов, вернулся к тому, что создание с нуля мне ближе и контролируемость процесса несоизмеримо выше + отсутствие ненужного барахла

Ну а почему нет-то?
Даже если просто рисовать картинки в фотошопе, то принципы вёрстки (хотя бы в общих чертах) знать нужно.

Danneo.com

Простая теория: картинка имеет по 400 пикселей по ширине и высоте. Браузер забирает эту картинку и впихивает в бокс 200х200, тупо выкидывая половину пикселей при рендере. Отсюда потеря деталей, лестницы, муар.
При увеличении картина обратная - браузер добавляет отсутствующее кол-во пикселей с усреднённым цветом., что непременно приводит к мылу.

В Фотошопе можно смягчить ухудшение качества если ресайзить не сразу в 100%, а в несколько шагов, процентов по 15.
Программы-ресайзеры используют различные алгоритмы изменения размеров, что позволяет уменьшить деградации картинок (а они будут в любом случае).