Сегодня мы разберем наш стартовый шаблон , что где лежит и для чего. Для того чтобы запустить шаблон у себя локально открываем файл README.md(либо README-RUS.md) и выполняем необходимые пункты.
└──assets
└── fonts/
Шрифты проекта
└── i/
Изображения проекта
└── icons/
Иконки проекта. С иконок которые находятся в этой папке мы варим спрайт, который находится в следующей папке sprite
└── js/
Весь js проекта, код мы пишем в файле main.js
└── all/
Сюда кладем все плагины, для того чтобы подключить какой-то плагин достаточно его добавить в эту папку, после этого все ее содержимое конкатенируется в один файл
└── pug/
└── blocks/
Здесь мы храним разные блоки которые потом инклюдим на страницы
└── templates/
_global_mixins.pug - здесь идет подключение стилей, скриптов, также в этом файле находятся глобальные миксины которые используются от проекта к проекту, например для пагинации, меню и т.д
_project_mixins.pug - здесь пишем миксины для текущего проекта
_project_var.pug - здесь пишем переменные для текущего проекта
_layout.pug - является сборщиком pug файлов + определяет структуру страниц
index.pug - index страница
└── sass/
└── blocks/
Хранятся стили для разных блоков
└── helpers/
_buttons_extends.scss - хранятся экстенды для всех кнопок на проекте
_extends.scss - набор экстендов которые используются от проекта к проекту
_helpers_all.scss - хранит в себе подключение всех scss файлов из папки helpers
_mixin.scss - набор миксинов которые используются от проекта к проекту
_project_extends.scss - экстенды для текущего проекта
_variables.scss - хранятся все переменные, как глобальные так и которые нужны на текущем проекте
└── plugins/
Стили для плагинов
└── templates/
Шаблон для спрайтов
_base.scss - здесь описываются базовые стили, для html, body и для каких-то глобальных блоков
_family.scss - миксины которые помогают управлять стилями для :nth-child элементов
_fonts.scss - здесь подключаем шрифты
_footer.scss - стили для футера
_forms.scss - стили для форм
_header.scss - стили для хедера
_includes.scss - файл сборщик, собирает все зависимости в один файл
_main.scss - здесь основные стили
_reset.scss - сброс стилей
_icons.scss - стили иконок которые генерируются после создание спрайта
_main_global.scss - файл в который попадает весь scss код
└──helpers
Здесь хранятся готовые куски кода определенных компонентов
└──plugins
Папка содержит плагины которые мы часто используем при разработке