viseko/warplay.cloud

Учебный проект по вёрстке лендинга облачной игровой площадки

Warplayground

Описание

Учебный проект по вёрстке лендинга облачной игровой площадки. Использованные технологии: Pug, Scss, JavaScript, Bootstrap 5.

Сценарии работы:

1. Установка зависимостей

npm i

2. Подготовка к вёрстке

• gulp/config: снимаем "!" с keys и, если нужно, проставляем в нём API-key tinyPNG
• gulp/config: снимаем "!" с ftp и, если нужно, проставляем необходимые реквизиты
• кладём необходимые шрифты в src/fonts
• для сжатия через tinyPNG нарезаем картинки в папку src/img_raw
• кладём svg-иконки в src/icons
• кладём svg-фавиконку в src/favicon
• прочие необходимые файлы кладём в files
• подготавливаем файлы для дальнейшей вёрстки: npm run prepare

3. Запуск необходимого режима сборки

• npm run dev - режим разработки
• npm run build - сборка билда для продакшена
• npm run zip - собираем проект в zip-архив
• npm run deployFTP - заливаем проект на FTP
• npm run deployGH - заливаем на Github Pages

4. Разметка (src/pages)

• контентные данные - common/data.pug
• скелет разметки, содержимое head - common/layout.pug
• хедер, футер - common/{header, footer}.pug
• миксины: common/mixins.pug
• страницы: ./*.pug
• секции страниц: sections/*.pug
• далее как душа разгуляется

5. Стилизация (src/scss)

• style.scss - основной файл, подключение стилей
• _variables.scss - задаём глобальные переменные
• _globals.scss - глобальные стили, общие для всего проекта
• _mixins.scss - набор миксинов
• blocks - для общих блоков
• sections - для секций

6. Программирование (src/js)

• app.js - основной скрипт
• modules - доп. модули