Стартовый шаблон для разработки простых сайтов

Среда разработки автоматизирована с помощью Gulp

Начало работы

# Клонируем репозиторий
git clone https://github.com/klimash/start-template.git

# Переходим в папку проекта
cd start-template/

# Устанавливаем зависимости
npm i или yarn

# Запускаем dev-сервер и слежение за файлами
gulp

Структура шаблона

files/

Файлы для скачивания. Папку можно удалить, если файлов нет.

fonts/

Шрифты. Каждое начертание в одном расширении.
Переименовать файлы в такой формат FontName-Style1-Style2 (напр. Roboto-Bold-Italic.woff или Roboto-Regular.ttf).
Шрифты подключаются автоматически.

/* В CSS использовать так */
p {
    font-family: Roboto;    /* FontName */
    font-weight: 700;       /* Style1 | Light - 300, Regular - 400, Medium - 500, Bold - 700 */
    font-style: italic;     /* Style2 */
}

img/

Тут храним все изображения (.png, .jpg, .svg).
Файл banner.jpg меняем на свой, размер - 1200x535.
Это изображение используется при вставке ссылок на сайт в соцсети.

img/svg_sprite/

Сюда кладем одноцветные SVG-файлы, из которых необходимо сделать спрайт (иконки, одноцветные логотипы).
Спрайт формируется и подключается автоматически.
Для использования SVG-изображения нужно подставить имя его файла в атрибут xlink:href, в качестве id. Для тега <svg> можно указать любой класс, через этот класс будет стилизоваться SVG-изображение

<svg class="example"><use xlink:href="#имя_файла"></use></svg>

.example {
    width: 100px;
    height: 50px;
    fill: red;  /* Цвет заливки */
}

include/

Здесь храним переиспользумые части html (напр. футер). Пример подключения такого файла:

<!--=include ./include/footer.html -->

js/

Все файлы из этой папки объединяются в один и подключаются автоматически.

libs/

Здесь исполнительные CSS и JS файлы библиотек.
Все файлы подключаются автоматически.

php/

_config.php - настройки, перед продакшеном добавить в .gitignore
_functions.php - основные функции

styl/

Все файлы из этой папки объединяются в один и подключаются автоматически.
CSS-препроцессор - Stylus.

favicon.png

Фавиконка сайта, размер - 512x512. Формат любой (png, svg, ico, jpg).

Сборка в продакшен

Перед запуском сборки заполнить настройки сайта в файле config.js.
Если указали данные FTP - добавить файл в .gitignore.

# Сборка в продакшен
gulp -b
# Сборка в продакшен с отправкой сайта на сервер по FTP
gulp -b -f