Typo3 Fluid template cannot find css files using uri.resource - typo3

Question

I followed this tutorial to create a Typo3 website using a Fluid template. However, I cannot get the CSS included in the template. In the tag the following css is included:
<link rel="stylesheet" href="css/bootstrap.css">
I rewrote this in the template to:
<link rel="stylesheet" href="{f:uri.resource(path:'css/bootstrap.css')}">
But the css is not included. The path to the template is:
fileadmin/templates/layouts/main.html
The path to the CSS file is:
fileadmin/templates/css/bootstrap.css
Where should I put the CSS files? And how should I include this css in the Fluid template?

Answer 1

Please keep in mind that pduerseler's way of doing it is better if you're using a plugin on many pages.
As for your problem, the uri.resource ViewHelper assumes that your resources are in the Resources/Public directory of your extension. So:
<link rel="stylesheet" href="{f:uri.resource(path:'css/bootstrap.css')}">
points to
typo3conf/ext/yourExt/Resources/Public/css/bootstrap.css
It is not possible to point to a file in fileadmin with the resource ViewHelper, see https://git.typo3.org/Packages/TYPO3.CMS.git/blob/HEAD:/typo3/sysext/fluid/Classes/ViewHelpers/Uri/ResourceViewHelper.php.
Current best practise for a TYPO3 page template is to have the template of a TYPO3 Website in an own extension, see e.g. https://github.com/georgringer/modernpackage

Answer 2

As a rule of thumb, you put JS and CSS files into your typoscript.
Example:
page = PAGE
page {
includeCSS {
myfile = path/to/my/file.css
}
includeJS {
myfile = path/to/my/file.js
}
}
This brings some benefits; You can organize your js and css in multiple files, and have TYPO3 concatenate and compress them by setting
config {
concatenateJs = 1
concatenateCss = 1
compressJs = 1
compressCss = 1
}
See more here: http://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html