Работа в шаблоне с Css, Js и спрайтами svg/png

Работа с файлами CSS

В шаблоне используется один минифицированный файл стилей "/templates/ваш шаблон/_css/final.min.css". Стили в шаблоне собираются и формируются из папки "/templates/ваш шаблон/_css/sources", изменения делать в исходных файлах из папки sources.

После правок в css (в папки sources), следует сгенерировать конечный файл стилей (final.min.css).

Чтобы сгенерировать новый - измените версию в шаблоне в main.tpl (переменная $ver) или удалите нынешний "final.min" и система создаст новый уже с исходных изменённых данных.

После удаления или смены версии файл соберется автоматически с помощью метода (он уже вшит и настроен в шаблоне):

\libraries\FrontCollector::create()->collectSystem($TEMPLATE, 'final.min', 'css', $ver)

Так же существует пользовательский "_css/custom.css". Это конечный файл и в нём тоже можно вносить правки, но сперва его нужно подключить в main.tpl. Его можно использовать как обычный, так и минифицированный.

Для минификации и сжатия файла следует использовать конструкцию (уже прописана в main.tpl, нужно только раскомментировать):

<link rel="stylesheet" href="{$THEME}_css/{\libraries\FrontCollector::create()->compressCss($TEMPLATE, 'custom', 'css', $ver)}">

Если используется компрессия, то возьмётся исходник с названием "custom" (вписано вторым параметром), создаст минифицированный файл "custom_$ver" и вернёт новое имя подключаемого минифицированного файла. Исходный "custom" при этом не удаляется, остаётся как донор. Новая генерация делается в случае удаления "custom_$ver" или изменения версии. В этом случае предыдущий минифицированный файл удалится.

Работа с файлами JS

Сайт использует собраные минифицированные файлы "/templates/ваш шаблон/_js/final.min.js" и "/templates/ваш шаблон/_js/vendor.min.js".

final.min.js - содержит в себе пользовательские скрипты собранные из исходных файлов папки sources.
vendor.min.js - подключаемые библиотеки (jQuery, select2 итд), собранные из папки components.

Скрипты в шаблоне собираются и формируются из папки:

final.min.js - _js/sources, изменения делать в исходных файлах.
vendor.min.js - _js/components, изменения делать в исходных файлах.

Чтобы сгенерировать новые файлы js - измените версию в шаблоне в main.tpl (переменная $ver) или удалите нынешний final.min и vendor.min.

После удаления или смены версии файл соберется автоматически с помощью метода (уже прописан в main.tpl):

\libraries\FrontCollector::create()->collectSystem($TEMPLATE, 'final.min', 'js', $ver) \libraries\FrontCollector::create()->collectSystem($TEMPLATE, 'vendor.min', 'js', $ver)

Так же существует пользовательский "_css/custom.js". Это конечный файл и в нём тоже можно вносить правки, но сперва его нужно подключить в main.tpl. Можно использовать как обычный, так и минифицированный.

<script src="{$THEME}_js/{\libraries\FrontCollector::create()->compress($TEMPLATE, 'custom', 'js', $ver)}"></script>

Если используется компрессия, то возьмётся исходник с названием "custom" (вписано вторым параметром), создаст минифицированный файл "custom_$ver" и вернёт новое имя подключаемого минифицированного файла. Исходный "custom" при этом не удаляется, остаётся как донор. Новая генерация делается в случае удаления "custom_$ver" или изменения версии. В этом случае предыдущий минифицированный файл удалится.

Работа с SVG и PNG спрайтами

PNG

При создании sprite автоматически создается и CSS для него, который попадает в "_css/final.min".

Папка "_img/sources/png" должна содержать только png изображения, из них формируется спрайт.
Чтобы сгенерировать новый файл sprite.png - измените версию в шаблоне в main.tpl (переменная $ver)
или удалите нынешний "_css/final.min" (это будет триггером к пересозданию стилей и png спрайта).
Имена файлов png должны содержать только латиницу (англ), так как с этих имён формируются классы для использования.
Сформированные стили с классами автоматически попадают в "_css/final.min"
Если файл назывался "united-states.png", то класс для использования будет .sprite-icon__united-states
Файл "_img/sprite.css" не используется, создаётся для наглядности работы скрипта,
чтобы проще было найти, с каким классом сформировалась ссылка на спрайт.

Пример использования в коде (если всё сделано правильно, то сразу выведет вашу иконку):

<div class="sprite-icon__united-states"></div>

SVG

Папка "_img/sources/svg" должна содержать только svg изображения, из них формируется спрайт.
Чтобы сгенерировать новый файл sprite.svg - измените версию в шаблоне в main.tpl (переменная $ver)
или удалите нынешний "_img/sprite.svg" (!!! НЕ final.min, здесь нет опечатки !!!).
Имена файлов svg должны содержать только латиницу (англ), так как с этих имён формируются якорь для использования.
Если файл назывался "phone.svg", то его якорь будет "#svg-icon__phone"
Примечание. Некоторые svg иконки могут создавать спрайт не так как ожидается (из-за своей структуры).
В этом случае подключайте иконку вне спрайта или переформатируйте её для удаления (<?xml>, <style>, <title>, <desc>, <metadata>, class="")

Пример использования в коде (если всё сделано правильно, то сразу выведет вашу иконку):

<svg class="svg-icon"><use xlink:href="#svg-icon__phone"></use></svg>

class="svg-icon" - ваш класс с размерами иконки.
xlink:href="#svg-icon__phone" - ваша иконка из спрайта.