Все страницы сайта

Программистам

настраиваем deploy на master, сборка запускается по gulp (я пока не удалял из гита build, если деплой не настоен будет то она нужна, значит делается проект на локаклке и пушится каждый раз)

Программист подключается к файлам только в папке build, в src ведется разработка, если надо создать отедльный файл стилей или скриптов, только предположим длля одного какого нибудь модуля. в scr/js или в src/scss в корне, создаем файл стилей или скриптов подключаем стили из нужных нам модулей запускаем gulp (или я могу так же в build при сборке бросать все js и css модулей)

если надо дописать какие то стили или скрипты, пишем все в шаблоне сайта template_styles , script.js, здесь код не добавляем (но этот момент нужно обсудить с програмистом, если ему будет удобно самому запускать проект то может и здесь править)

Структруа проекта

-buid ( файлы проекта после компиляции, здесь ничего не правим )
-bower_components ( библиотеки используемые в проекте, здесь ничего не правим )
-src ( здесь собирается весь проект )
- -fonts ( все шрифты используемые в проекте)
- -images (все картинки используемые в проекте)
- -js (скрипты)
  - -lib ( библиотеки js )
  - -partials ( части js кода)
    - -base.js ( код js применяемым ко всем страницам)
  - -scripts.min.js (стили как общие для всего сайта, так и отдельно для новых разделов, пока формируем отдельно для каждого нового раздела где присутстуют новые блоки)
- -scss (стили )
  - -helpers
    - -functions.scss ( модификаторые и function для миксинов )
    - -mixin.scss (миксины на весь проект )
    - -variables.scss (переменные на весь проект)
  - -libs библиотеки
  - -partials (части кода, в основном применяемы для всего сайта )
    - -base.scss (стили для всего сайта )
    - -buttons.scss ( стили кнопок всего проекта )
    - -forms.scss ( формы элементы форм )
    - -fonts.scss (подключение шрифтов)
    - -modifiers.scss (модификаторы и хуки, глобальные на весь проект, подходят для любого класса)
    - -styles.scss (стили конкретного раздела например)
- -sprite-svg (svg для спрайтов, svg должны быть выполнены или через stroke или через fill, цвет однотонный для всей иконки. в спрайты помещаем только те иконки которые используются на всем проекте или почти на всем, в шапке, футуре, и т.д. не забиваем sprite лишними иконками)
- -svg (svg используемые в проекте, подключаем через include)
- -templates Шаблоны и страницы всего проекта
  - -extends (Наследныемые)
  - -helpers (Вспомогательные элементы )
  - -components (блоки модули из которые строятся страницы)
    - -имя блока (блока )
  - -страницы проекта ( собираем из компонентов )

Для всех каруселей и слайдеров и на сайте используем плагин slick-carousel, пока он есть в старых скриптах и стилях я пока не подключаю их в новые файлы и стили

Модальные окна на сайте работают через плагин fancybox fancybox для изображений и просто Popup.

Модификаторы и хуки

Иконки в спрайтах

Иконки в коде

Кнопки

btn default btn border

Элементы форм

Поля которые должны иметь валидацию имеют класс js-required, кнопка по которой происходит валидация класс js-submit
is-validate класс добавляется .form_group и само проверяемое поле input, textarea
is-error класс добавляется .form_group и само проверяемое поле input, textarea

Примеры попапа

Задать вопрос
Попап с благодарностью
Попап с благодарностью 2
Попап подтверждение присутствия

Время учиться!