Useful notes 

Images in CSS

If you are referencing an image (for instance a background) from your CSS style sheets, then assuming that your layout is as I have written above, the reference would be:

.mystyle {
  background: url(../img/bybackground.jpg) no-repeat top left;

So, pretty much as normal.

Using CDN

I commonly use CDN for things like jquery, fastclick, modernizr and so on. It is well worth considering, especially if the final site is to be hosted on a shared hosting solution. Let someone else take the weight!

Google, Cloudflare and many others offer CDN repositories of scripts. For instance:

<script src="//"></script>
<script src="//"></script>

Don’t forget to put them in the same order as you would do normally – that probably means putting JQuery first.

Adding Plugins

If you are using fun JQuery and JavaScript plugins, then you can install them in the same way as you did the framework. Just use the $config->urls->templates reference and away you go. Again, most of what you will need to know will be in the original plugin documentation – ProcessWire does not demand anything special or require anything converted. 

However, as with developing a normal static site, do make sure you are not suddenly loading or referencing multiple versions of scripts like jQuery or Mootools – it can get very messy!

Working with SASS and LESS

I am not going into setting these up (there are loads of tutorials out there in the wild), other than to note that if you are working with systems like PrePros or any SASS or LESS compiler system, I tend to just get them to scan and watch the templates directory – that seems to cover most things!

Don’t get rid of admin.php

The admin.php file in the /site/templates/ directory is required to allow you to get to the admin – deleting it could be an issue! Sorry, WILL be an issue

Final thought on structure

As I mentioned earlier, when I use a framework like Foundation, I start from scratch to create my own way of organising templates and managing the site structure. There really is no strict way of doing this and we will be putting up a tutorial showing a few example ways of working – but it will still be just the tip of a jolly little iceberg!

There you go – that is all I can think of, for the moment. Frameworks are very powerful and very useful and ProcessWire can happily work with them all without any additional work. Indeed, the only really important bit of this tutorial was the path reference. Other than that – use straight out of the box!

  1. Introduction
  2. Next steps
  3. Useful notes