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

Используемые технологии для сборки проекта

• npm - пакетный менеджер NodeJS
• gulp - сборщик проекта
• sass - препроцессор css

Используемые команды

Установка пакетов npm

$ npm install

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

$ npm start

Финальная сборка проекта (build)

$ npm run build

Старт библиотеки компонентов

$ npm run lib

Общая структура проекта

• src/ - ресурсы рабочего проекта
• dev/ - папка рабочей сборки проекта (без слияния файлов, без минификации, без обработки графики и т.п.)
• build/ - папка финальной сборки проекта
• design/ - папка для файлов макетов дизайна
• library/ - папка библиотеки компонентов
• gulpfile.js - файл заданий gulp
• package.json и package-lock.json - файлы npm-менеджера
• .editorconfig - файл общих настроек для редактора
• .babelrc - файл конфигурации babel
• .eslintrc.js - файл линтера js
• .eslintignore - файл линтера js для записи игнорируемых файлов и каталогов
• .stylelintrc - файл линтера css
• .gitignore - файл git для записи игнорируемых каталогов

Структура каталога src/

Папка components/

В папке components/ находятся все компоненты проекта.

• папка core/ содержит в себе все компоненты глобального (структурного) типа (header, footer, sidebar и т.п.)
• папка features/ содержит в себе все переиспользуемые компоненты проекта (logo, news, article, social-links, social-shares и т.п.)

Каждый компонент находится в папке соответствующей его имени, например logo/,nav/, nav-aside/, article/, news/ и т.п. Внутри папки компонента размещаются файлы с расширениями .html, .scss, .js. Имена этих файлов соотвествуют названию компонента

Папка pages/

В папке pages/ находятся все html-страницы проекта.

• папка include/ содержит в себе файлы с конфигурацией head для html -страниц и файлы с подключаемыми скриптами
• папка library/ содержит в себе html-страницы библиотеки компонентов

Папка assets/

В папке assets/ находятся все ресурсные файлы проекта (картинки, видео, pdf-файлы и т.п.)

• папка audio/ содержит в себе все аудио-файлы проекта
• папка video/ содержит в себе все видео-файлы проекта
• папка img/ содержит в себе все картинки проекта
  • папка sprite/ содержит в себе картинки для создания спрайтов
    • папка png/ содержит в себе картинки для создания png-спрайтов
    • папка svg/ содержит в себе картинки для создания svg-спрайтов
  • папка control/ содержит в себе картинки элементов управления ui-kit компонентов
• папка doc/ содержит в себе все документы проекта

Папка fonts/

В папке fonts/ находятся все подключаемые шрифты проекта

Папка styles/

В папке styles/ находятся все стилевые файлы проекта и стилевые файлы плагинов.

• папка common/ содержит в себе все общие стилевые файлы проекта (_base.scss, _normalize.scss, _fonts.scss, _layout.scss и т.д), которые подключаются в файл _common.scss
• папка dependencies/ содержит в себе все функции, миксины, и переменные проекта, которые подключаются в файл _dependencies.scss
• папка helpers/ содержит в себе вспомогательные стилевые файлы проекта
• папка ua-kit/ содержит в себе partial-файлы ui-kit компонентов (_buttons.scss, _links.scss, _tables.scss и т.д)
• папка vendors/ содержит в себе стилевые файлы плагинов
• файл style.scss подключает в себя общие стилевые файлы проекта
• файл ui-kit.scss подключает в себя стилевые файлы ui-kit компонентов
• файл components.scss подключает в себя стилевые файлы компонентов
• файл vendors.scss подключает в себя стилевые файлы плагинов

Папка js/

В папке js/ находятся все файлы скриптов проекта и файлы скриптов плагинов.

• папка ua-kit/ содержит в себе файлы скриптов ui-kit компонентов
• папка vendors/ содержит в себе файлы скриптов плагинов
• файл common.js содержит скрипты общие для всего проекта
• файл ui-kit.js подключает в себя скрипты ui-kit компонентов
• файл components.js подключает в себя скрипты компонентов
• файл vendors.js подключает в себя скрипты сторонних модулей (плагинов)

Структура каталога design/

• папка makets/ содержит в себе все дизайн-макеты проекта
• папка temp/ содержит в себе временные рабочие графические элементы