Working in a template with Css, Js and svg/png sprites

Working with CSS files

The template uses one minified style file "/templates/your template/_css/final.min.css". The styles in the template are collected and formed from the folder "/templates/your template/_css/sources", changes should be made in the source files from the sources folder.

After editing the css (in the sources folder), you should generate the final style file (final.min.css). 

To generate a new one - change the version in the template in main.tpl (variable $ver) or delete the current "final.min" and the system will create a new one from the original modified data.

After deleting or changing the version, the file will be collected automatically using the method (it is already embedded and configured in the template):

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

There is also a custom "_css/custom.css". This is the final file and you can also make edits to it, but first you need to include it in main.tpl. It can be used as a regular one, or minified.

To minify and compress the file, use the following construction (already written in main.tpl, you just need to uncomment it):

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

If compression is used, the source file with the name will be taken "custom" (written as the second parameter) will create a minified file "custom_$ver" and return a new name of the included minified file. The original "custom" is not deleted, it remains as a donor. A new generation is done in case of deletion of "custom_$ver" or a version change. In this case, the previous minified file will be deleted.

Working with JS files

The site uses the collected minified files "/templates/your template/_js/final.min.js" and "/templates/your template/_js/vendor.min.js".

final.min.js - contains custom scripts collected from the source files of the sources folder.
vendor.min.js - included libraries (jQuery, select2 etc.), collected from the components folder.

The scripts in the template are collected and formed from the folder:

final.min.js - _js/sources, make changes in the source files.
vendor.min.js - _js/components, make changes in the source files.

To generate new js files - change the version in the template in main.tpl (variable $ver) or delete the current final.min and vendor.min.

After deleting or changing the version, the file will be collected automatically using the method (already registered in main.tpl):

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


There is also a custom "_css/custom.js". This is the final file and you can also make edits to it, but first you need to include it in main.tpl. You can use either a regular or minified one.

To minify and compress the file, you should use the construction (already written in main.tpl, you just need to uncomment it):

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

If compression is used, then the source file named "custom" (entered as the second parameter) will be taken, a minified file "custom_$ver" will be created and the new name of the included minified file will be returned file. The original "custom" is not deleted, it remains as a donor. A new generation is done in case of deletion of "custom_$ver" or version change. In this case, the previous minified file will be deleted.

Working with SVG and PNG sprites

PNG

When creating a sprite, CSS for it is automatically created, which is placed in "_css/final.min".

• The "_img/sources/png" folder should contain only png images, from which the sprite is formed.
• To generate a new sprite.png file, change the version in the template in main.tpl (variable $ver) 
  or delete the current "_css/final.min" (this will be a trigger for recreating the styles and png sprite).
• PNG file names must contain only Latin (English), since these names are used to generate classes for use.
• Generated styles with classes automatically go to "_css/final.min"
• If the file was called "united-states.png", then the class for use will be .sprite-icon__united-states
• File "_img/sprite.css" is not used, it is created for clarity of the script operation,
  to make it easier to find with which class the link to the sprite was formed.

Example of use in the code (if everything is done correctly, it will immediately display your icon):

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

SVG

• The folder "_img/sources/svg" should contain only svg images, from which the sprite.
• To generate a new sprite.svg file - change the version in the template in main.tpl (variable $ver) 
  or delete the current "_img/sprite.svg" (!!! NOT final.min, there is no typo here !!!).
• SVG file names must contain only Latin (English) characters, since the anchor for use is formed from these names.
• If the file was called "phone.svg", then its anchor will be "#svg-icon__phone"
• Note. Some svg icons may not create a sprite as expected (due to their structure).
  In this case, connect the icon outside the sprite or reformat it to remove (<?xml>, <style>, <title>, <desc>, <metadata>, class="")

Example of use in code (if everything is done correctly, it will immediately output your icon):

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

class="svg-icon" - your class with icon sizes.
xlink:href="#svg-icon__phone" - your icon from the sprite.