Общие правила структуры

Наглядно со структурой можно ознакомиться по ссылке. Она повторяет MVP битрикса, немного расширяя её возможности.

Преимущества

• Использование SASS препроцессора

• Использование ES6

• Понятная файловая структура

• Простота использования

Основные папки

/local/gulp/ – хранит конфигурации для gulp

/local/templates/<template name>/ – папка шаблона сайта

/local/templates/<template name>/assets/js/ – папка для хранения глобальных JS скриптов шаблона

/local/templates/<template name>/assets/styles/ – папка для глобальных стилей шаблона (SCSS/CSS)

/local/templates/<template name>/assets/images/ – папка для глобальных картинок шаблона (svg в том числе)

/local/templates/<template name>/assets/fonts/ – папка для шрифтов

/local/templates/<template name>/assets/libs/ – папка для библиотек, о ней чуть позже

/local/templates/<template name>/components/ – папка для хранения шаблонов компонентов

Как работает Gulp

Gulp отслеживает изменение в файлах (выделены на схеме красным) и компилирует их в режиме реального времени, получившиеся файлы складывает рядом с исходным файлом.

Благодаря этому, мы предсказуемо можем использовать SCSS/ES6 в наших проектах и улучшать нашу продуктивность.

Не забывайте перед работой запускать gulp командой gulp dev

Установка и настройка Gulp

Работа с библиотеками

Библиотеки располагаются по адресу /local/templates/<template name>/assets/libs/ . Gulp не отслеживает изменения в этой директории.

Здесь мы храним плагины (к примеру slick, owl carousel) или исходники фреймворков (bootstrap). Эти файлы не требуют компиляции и могут подключаться импортом в SCSS-файлах или напрямую в компонентах (css, js файлы).

Дополнительно о Bootstrap

Так как этот фреймворк используется почти на каждом нашем проекте, мы пошли дальше и упростили работу с этим инструментом.

В файле main-styles.scss мы импортируем ядро и модули bootstrap.

main-styles.scss

@import "bootstrap/core";
@import "bootstrap/modules";

Не пугайтесь странной записи (для импорта нужен полный путь к папке с файлом). Так как мы знаем, что bootstrap всегда лежит в папке /local/templates/<template name>/assets/libs/bootstrap/, мы сделали для неё сокращение и можно указывать просто как bootstrap/

Модули bootstrap

Модули импортируются в файле /local/templates/<template name>/assets/libs/bootstrap/_modules.scss

Модули подключаются только в файле main-styles.scss, потому что их стили требуются на всем сайте.

В модулях мы можем выбирать только те части bootstrap, которые нам нужны для проекта. Тем самым мы очищаем проект от лишнего мусора. Пример файла _modules.scss

@import "reboot";
@import "type";
//@import "images";
//@import "code";
@import "grid";
//@import "tables";
//@import "media";
@import "forms";
@import "buttons";
@import "list-group";
//@import "nav";
//@import "modal";
//@import "breadcrumb";
@import "spinners";
@import "button-group";
@import "input-group";
//@import "transitions";
@import "utilities";

// custom
@import "nogutters";

Обратите внимание, лишние части закомментированы и не будут включены в стили проекта. Так же здесь импортируется свой модуль nogutters

Ядро bootstrap

Ядром мы назваем файл /local/templates/<template name>/assets/libs/bootstrap/_core.scss

Этот файл служит для задания параметров фреймворка (по сути копирует файл _variables.scss, только перезаписывает значения его параметров).

Ядром называется потому, что в нем так же импортируется базовый функционал фреймворка

@import "functions";
@import "variables";
@import "mixins";

Поэтому важно! Если вы хотите использовать миксины, переменные или функции bootstrap в шаблоне компонента, вам необходимо в начале вашего SCSS-файла импортировать ядро

Обратите внимание, используется сокращение bootstrap/

style.scss

@import "bootstrap/core";

Пример использования bootstrap в шаблоне компонента

style.scss

@import "bootstrap/core";

@include media-breakpoint-up(lg) {
	.catalog-sidebar {
		width: 300px;
	}
	.catalog-section {
		flex: 1;
	}
}

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

Файл /local/templates/<template name>/assets/styles/main-styles.scss должен содержать в себе только импортируемые файлы. В основном это стили или библиотеки используемые на всем сайте глобально (например bootstrap).

Если SCSS файл используется только для импорта в другой файл, его именование должно начинаться с нижнего подчеркивания. Например: _header.scss, _footer.scss. Такие файлы компилятор не рассматривает, а значит не будет плодить мусор в проекте.

Папка /local/templates/<template name>/assets/styles/elements/ предназначена для глобальных (_header.scss, _footer.scss, _globals.scss) или повторяющихся элементов (badges.scss, tabs.scss). Будьте внимательны, файл badges.scss будет скомпилирован в badges.css и этот файл можно будет подключать в компонентах.

Файл /local/templates/<template name>/assets/styles/elements/_globals.scss служит для глобальных стилей и импортируется в файле main-styles.scss

Для шаблонов компонента есть свои стили style.css в папке компонента. Поэтому все стили компонентов мы изолируем (то есть делаем стили доступными только при инициализации компонента). Используйте файл style.scss, он будет скомпилирован в style.css. Так же помните, что style.css подключается в шаблон компонента автоматически, без лишнего кода.

Правила работы со скриптами

Для шаблонов компонента скрипты так же изолируются, как и стили. Для этого есть файл script.js. Допускается использовать современные стандарты ES6, файл будет скомпилирован в script.min.js и автоматически подключится в компоненте.

Если вы используете для вашего скрипта глобальные скрипты, обязательно проверяйте их наличие, чтобы не вызывать ошибки в будущем или дублируйте их подключение в шаблоне компонента.