Страница сверстана при помощи Gulp с использованием препроцессора SASS и шаблонизатора PUG.
Работа включает в себя:
- В названиях классов HTML-элементов использована методология БЭМ
- Адаптивная верстка для любых устройств от 320 до 3840
- Верстка pixel perfect на всех макетах
- Блоки сверстаны с учетом использования большого количества текста (переполняемость)
- Плавные эффекты при наведении
- Использование CSS Grid Layout
- Минификация верстки, стилей и Js
- Использование WebP в качестве формата для изображений
- "Ленивая" загрузка изображений (aka Lazy loading)
- Использование SVG спрайтов
В этом репозитории размещены исходные файлы, а так же конфигурационный файл Gulp и файл package.json.
Инструкция по развертыванию на локальном компьютере:
- Установить GIT
- В командной строке склонировать репозиторий командой:
git clone https://github.com/MegaBulkOrg/grid-layout-on-gulp.git
- Перейти в папку склонированного проекта и установить все нужные компоненты командой
npm i
- Собрать проект командой
npm run prod
- Перейти в папку
dist
и открыть в браузере файлindex.html
Верстка сделана полностью мною