Репозиторий первого вступительного задания для Школы Разработки Интерфейсов 2017 Автор: Михаил Кононенко.
Ссылка на "картинку" - https://vbifonixor.github.io/first-task
В вёрстке использовал методологию, к которой привык (пусть она и не так жёстко формализована, но гибка и удобна). Зависимости (не подключал через npm/yarn/bower, так как их слишком мало): Normalize.css, скрипт BNS.js (body-no-scroll), который отключает скролл на body, когда включена модалка. Graceful Degradation достигается с помощью автопрефиксера, который не подключен, как отдельная зависимость (ради облегчения). Прогнал через postcss-cli.
Большая часть вёрстки на flexbox, т. к. этот инструмент намного проще в обращении, чем те же float'ы и прочие inline-block'и. О совместимости со старыми браузерами вопрос не стоял, поэтому долго раздумывать по поводу флексов не пришлось.
Шрифт, подключённый в документ - Open Sans. Он опенсорсный и выглядит намного приятнее глазу, чем большинство стандартных (которые ещё и на разных платформах отображаются по-разному).
Была идея написать модалки на css (display: block на :target), но оставался скролл всего body. Поэтому использовал библиотеку и класс, показывающий модалку вешал через js.
UPD: Добавил хак для Edge в main.js. Модалки не хотели работать из-за того, что в Edge у NodeList нет метода forEach. Исправлено вызовом Array.prototype.forEach.call() на нужных NodeList'ах. Попытался вслепую пофиксить проблемы с вёрсткой, возникающие в Safari. А также обнаружил, что postcss-cli в прошлый раз не обработал файл main.css автопрефиксером. Пофиксено.