Сделать верстку макета

Использовать препроцессор SASS. Вынести палитру цветов и наборы шрифтов в переменные. Использовать & для вложенности селектора при эффекте ховера. Для однотипным элементов, по желанию и возможности, используйте миксины, шаблоны и т.п.

Gulp Starter Kit ·

Базовая Gulp-сборка для вёрстки.

• Собирает и оптимизирует html, sass, js, изображения и шрифты
• Использует gulp-rigger для работы с html-chunks
• Включает файлы настроек различных линтеров
• Все ошибки логируются в консоль
• Добавляет вендорные префиксы
• Совмещает и оптимизирует медиазапросы
• Есть режим разработки и сборки в продакшн
• Автоматический деплой на GitHub Pages

Developing

Prerequisites

Для корректной работы SASS-компилятора и других инструментов, необходимо один раз глобально поставить дополнительные пакеты, выполнив в терминале следующие команды. Пользователям MacOS ничего делать не нужно.

Пользователям Windows.

npm install --global windows-build-tools

Пользователям Linux.

sudo apt-get install gcc g++ make

Setting up Dev

Для быстрого старта необходимо склонировать репозиторий.

git clone https://github.com/luxplanjay/gulp-starter-kit.git

Переименовать папку сборки по имени вашего проекта.

mv gulp-starter-kit имя_проекта

Затем перейти в папку проекта.

cd имя_проекта

Находясь в папке проекта удалить папку .git связанную с репозиторием сборки выполнив следующую команду.

npx rimraf .git

Установить все зависимости.

npm install

И запустить режим разработки.

npm start

Во вкладке браузера перейти по адресу http://localhost:1234.

Building

Для того чтобы создать оптимизированные файлы для хостинга, необходимо выполнить следующую команду. В корне проекта появится папка build со всеми оптимизированными ресурсами.

npm run build

Deploying / Publishing

Сборка может автоматически деплоить билд на GitHub Pages удаленного (remote) репозитория. Для этого необходимо в файле package.json отредактировать поле homepage, заменив имя пользователя и репозитория на свои.

"homepage": "https://имя_пользователя.github.io/имя_репозитория"

После чего в терминале выполнить следующую команду.

npm run deploy

Если нет ошибок в коде и свойство homepage указано верно, запустится сборка проекта в продакшен, после чего содержимое папки build будет помещено в ветку gh-pages на удаленном (remote) репозитории. Через какое-то время живую страницу можно будет посмотреть по адресу указанному в отредактированном свойстве homepage.

Configuration

• Все файлы стилей должны лежать в папке src/sass и импортироваться в src/sass/main.scss
• Изображения добавляйте в папку src/images
• Локальные шрифты идут в папку src/fonts

Пример изображения в HTML, после того как файл picture.png был добавлен в папку src/images.

<img src="./images/picture.png" />

Пример изображения в CSS, после того как файл picture.png был добавлен в папку src/images.

.my-class {
  background-image: url('../images/picture.png');
}