A quick demonstration about how easy it is to use one of the many CSS frameworks available to designers.

By Joss Sanglier

One of the key benefits of ProcessWire to the developer and designer is that it is design agnostic; ProcessWire does not dictate the layout of any website, at its heart it simply stores and manages the data.

A joke I often make, albeit rather lamely, is about the famous ProcessWire Templating System – it doesn’t exist.

Although it is not only possible but very easy to design the layout (the templates) for your new ProcessWire site in an old version of Netscape Composer, FrontPage 97, Go Live or Dreamweaver, the chances are fairly high that you will be more likely to use one of the many and various CSS Frameworks available on the good old Interweb.

Because of the way it is structured, ProcessWire is perfect for using all these frameworks more or less out of the box, as it were, complete with any SASS or LESS files that are kicking around. In this very short tutorial I am just going to talk through the process of adding a framework, where to put it, what references to use and so on. A couple of us have created profiles that include frameworks, but to be honest, it is as easy to do it yourself!

I am not going to talk about how to structure your templates here or how to use the framework as that is down to your design needs; you will be able to use the framework's own documentation without having to somehow "convert" it to an obscure templating logic used by ProcessWire - as I said, it hasn't got one. So, before your framework shows up, you will have to carry on designing something or adding some ProcessWire title or body field or something!

Step 1 – Install ProcessWire

Done that? Good. Let’s move on!

Step 2 – Go to the templates Directory

Everything you need to mess with is in the /site/ directory in your ProcessWire installation and for our specific needs, in the /site/templates/ directory.

For the sake of this tutorial, it is easier to think of the templates directory as the root of your site, though for everything else about ProcessWire, that is wildly inaccurate. Keeps you on your toes, however.

If you are looking at the default installation of ProcessWire, the templates directory will have a handful of template files in it (anything with a .php end on it, probably) and three directories – scripts, styles and errors.  It will also have a head.inc file and a foot.inc file. Forget all of those.

Next: Next steps »


  1. Introduction
  2. Next steps
  3. Useful notes