This is how I setup my templates:
First thing is create a snippet called ’templateInclude’
<?php
$theFile = isset($theFile) ? $theFile : 'temporary.html';
$theFilePath = isset($theFilePath) ? $theFilePath : $modx->config['base_path'] . "assets/templates/YOURTEMPLATE/";
if (file_exists($theFilePath . $theFile))
{
include $theFilePath . $theFile;
} else
{
echo 'File Not Available';
}
?>
Then I create a new template called ’default’ with the following code (this way you can edit the template in your favorite code editor:
[[templateInclude? &theFile=`TEMPLATENAME_default.html`]]
Then I create my css files in the /assets/css/ directory.
JS goes into assets/js/directory.
Images goes into /assets/images/ (or /assets/images/TEMPLATENAME/.
I name my css files TEMPLATENAME.css, TEMPLATENAME_base.css, TEMPLATENAME_ie6.css, etc.
and then in your template, you can call the files via:
<title>[*pagetitle*] | [(site_name)]</title>
<base href="[(site_url)]" />
<link rel="stylesheet" href="[(base_url)]assets/css/TEMPLATENAME.css" type="text/css" media="screen" />
<script src="[(base_url)]assets/js/YOURJAVASCRIPT.js" type="text/javascript"></script>
This is just the way I do it. Some people use chunks and TVs (which makes sense if have different css/js per page).