Your question consists of two questions, which both are too broad to be explained in details here, plus it seems there is a big gap of knowledge you have to cover.
1. What does happen if i call the site? In the index.php file is php code but i can't find the spot where the rest of the website gets "called" or something.
Answer:
This question is not about Purity template, it's a about How Joomla Works.
I created a new Q/A here, so read there: What is the Joomla Execution Flow, after a request reach to index.php till the final output on the browser?
2. I have no idea how the css/less is embedded and i only somehow get the process after inital loading and the tpls loading the blocks.
Answer:
About Templates and Frameworks
Purity III template is a Joomla Template built on T3 Framework by JoomlArt.
T3 Framework comes as a system plugin and provides its own "environment" and all the base functionality for all t3 powered templates. This is the case with most template frameworks. There is a base of features and pre-designed functionality, which then the templates use, extend or override.
Joomla templates are responsible for the layout and appearance of the website. Although it is not such an advanced topic, it still requires some knowledge of php, html and the Joomla API, among others.
If you read the answer for your first question about the Joomla execution flow, you will have some basic idea of the fact that at some point during the execution of Joomla, it starts putting content in a memory buffer (the Document) that is destined for the final output.
During this procedure, the various elements like the <head>, the content etc are defined and put in an data array. The various extensions including the templates interfere with this document data and add their own data.
Especially in regards to .css/.js files that you are interested, a template will use special code available from the Joomla API, to insert its assets files to the head part of the document that will be printed out to the browser.
Common Joomla templates
For example the code snipped below is used in Protostar template to add the Boostrap Framework assets, a custom template.js and a custom template.css file to the head.
$doc= JFactory::getDocument();
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/template.js');
// Add Stylesheets
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');
Usually in common or simple templates, all this code is written inside the index.php of the template. However, in more advanced templates and those that are built on a framework, things are not that straight-forward.
Purity T3 way
As said, framework templates use functionality inherited from their frameworks.
For example this how Purity III handles the <head> part and loads its assets files (css/js):
T3 Templates are creating layouts using the tpls, which in turn load specific blocks (templates/purity_iii/tpls/blocks).
If you open any of these tpls layouts .php files, e.g. blog.php you will see:
<head>
<jdoc:include type="head" />
<?php $this->loadBlock('head') ?>
<?php $this->addCss('layouts/blog') ?>
</head>
So at this point here we see:
- the template creates the
<head> element.
- it includes and render the head data from the memory of Document - read Jdoc Statements
It uses a frameworks method loadBlock(); to load a specific block - the head.php block. Following the blocks/head.php block we see:
- A bunch of code that is adding additional elements conditionally in the
<head> (metas, scripts etc).
addStyleSheet() methods that add more css files.- Another framework's method
addHead() that will continue adding conditionally more assets to the head. You can see what the addHead() method is doing at plugins/system/t3/includes/core/template.php. Search for the addHead() function definition.
It uses a frameworks method addCss(); to add special styles pertaining to that particular layout.
Much of the final behavior is controlled by settings in the Admin of the template.
Usually, a site owner/manager/designer and even developers do not need to know how everything works and how it is developed. They only need to know that is working and how to use it, each one from their own perspective.
So the documentation is the first place to look at.
For a beginner user to learn the basic of Joomla templates and templates development it's better to use simple and common templates to start. E.g. Fork the Protostar template by cloning it and then start customizing.
Again, php and other languages knowledge is essential.
