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

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

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

Після правок у css (папка sources), слід згенерувати кінцевий файл стилів (final.min.css).

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

Після видалення або зміни версії файл збереться автоматично за допомогою методу (він вже вшитий і налаштований у шаблоні):

\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" (вписано другим параметром), створить мініфікований файл "$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.css" (це буде тригером до перестворення стилів і 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> class="")

Приклад використання в коді (якщо все зроблено правильно, то одразу виведе вашу іконку):

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

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