Web Template

Автор шаблона: Мурамщиков Игорь

Web Template - это стартовый шаблон для быстрого старта вёрстки. Шаблон включает в себя наиболее часто используемые автором инструменты и плагины, такие как:

Изображения, использующиеся в шаблоне, являются адаптивными. Для адаптивности изображений укажите класс img-responsive.

Шаблон включает в себя следующие файлы:

• .htaccess (правила кэширования для веб-сервера)
• .bowerrc (указание пути для загрузки плагинов с помощью Bower)
• README.md (краткая информация о шаблоне с ссылкой на демонстрацию)
• gulpfile.js (задачи для работы Gulp)
• package.json (версии пакетов для установки Node Modules)

По умолчанию в шаблоне созданы:

• Меню со встроенным поиском
• Прелоадер
• Кнопка возврата к началу страницы

Шаблон содержит стартовые стили оформления следующих элементов:

Кнопки

Чекбоксы

Переключатели

Слайдеры

Аккордеоны

Всплывающие подсказки

Иконки социальных сетей

Как использовать шаблон

• Для работы с шаблоном установите NodeJS.
• Загрузите Web Template со страницы GitHub.
• Установите Node Modules командой npm i.
• Запустите шаблон командой gulp.

Как взаимодействовать с шаблоном при помощи Gulp

• В начале файла gulpfile.js можно изменить желаемый css-препроцессор (Sass или Scss). По умолчанию установлен препроцессор Sass.
• gulp: запуск задачи 'default', содержащей sass|scss, js, watch и browserSync для веб-разработки.
• build: сборка проекта и обновление папки dist.
• rsync: деплой проекта на сервер из папки dist с помощью Rsync.

Правила работы с шаблоном

• Все HTML-файлы должны иметь одинаковое начальное содержимое, как в файле app/index.html.
• Комментарий Template Basic Images Start в файле app/index.html: начало стандартных пользовательских картинок (og:image для социальных сетей, favicons - иконки для различных устройств).
• Комментарий Custom Browsers Color Start в файле app/index.html: установка цвета заголовка браузера на различных устройствах.
• Комментарий Custom HTML в файле app/index.html: начало пользовательской HTML-разметки.
• Для установки новой JQuery библиотеки используйте команду "bower i имя_библиотеки" в окне команд. Библиотеки автоматически добавляются в папку app/libs. Для работы команды необходимо установить Bower (команда "npm i -g bower"). После установки пропишите путь к js файлу библиотеки в файле gulpfile.js в задачу 'scripts'.
• Для изменения цветового оформления страницы измените значение переменной accent в файле app/sass/_vars.sass | app/scss/_vars.scss.
• Для изменения анимации иконки-гамбургера для меню выберите нужный класс и измените его в файле app/index.html. Также в этом источнике можно найти подробную инструкцию по настройке плагина.
• Все пользовательские скрипты должны находиться в файле app/js/common.js и начинаться после комментария Custom JS.
• Все Sass|Scss переменные должны находиться в файле app/sass/_vars.sass | app/scss/_vars.scss.
• Все стили созданных по умолчанию элементов находятся в файле app/sass/_UI.sass | app/scss/_UI.scss. Для использования какого-либо элемента повторите разметку, описанную для него в файле app/index.html, выбрав необходимый вариант оформления.
• Все медиа-запросы Bootstrap должны находиться в файле app/sass/_media.sass | app/scss/_media.scss.
• Все CSS файлы подключаемых библиотек должны находиться в файле app/sass/_libs.sass | app/scss/_libs.scss.