One of the great benefits of Backdrop CMS is its capability for laying out pages in your website by use of style sheets, templates, layouts and themes. But what do these names mean and how do they work together to provide your preferred result?
I have blogged elsewhere (An approach to theming a site in Backdrop) about the approach I have used for creating the appearance I and my clients want for their site and here I will endeavour to walk through the vocabulary we use to describe the components of the Backdrop system. The development team has been having quite lengthy discussion about our use of these words and I very much doubt that we have reached the end of the road on this, or that what I write here will be the orthodox and enduring story. But hear goes, and in writing this I will be forced to clarify my own understanding.
Themes
Established Content Management Systems, notably Wordpress and Drupal, offer a wide choice of themes, some of which you pay for, others come free. A theme is what controls the overall appearance and operation of your site; the page layout, the navigation, the colours, typefaces and so on. To do this it relies on the services of the underlying core system and maybe some additional contributed modules made available for use with Backdrop.
At the moment there are two ‘get you started’ themes that come as part of Backdrop core: Seven is for the administrative pages of your site and Bartik is for the public pages. Although often thought of a basic these are in fact very powerful in their capabilities, particularly as a basis for extension and customisation, and Bartik provides a foundation for a fairly advance responsive design.
A theme is implemented as a package of files, including images, stylesheets, javascript, templates written as php code and a bit of php ‘glue’ to bind the package together and to the core system. In Backdrop a theme depends on the separate layout system to provide the pattern for pages.
The words Theme, Layout and Template have a specific meaning in Backdrop and to describe them we need to use other words such as pattern, grid and region. Think of a page as being a grid of rectangles, and think of the layout as describing the pattern of these rectangles, with there often being more than one layout used in a site. Each one of these rectangles is a named region of the layout, for example header, sidebar, main content, footer. In reality it gets more complicated than this, with some regions being subsections of bigger ones.
It is worth bearing in mind that the objective of the Backdrop system is to produce HTML output to serve to a browser, a process called rendering. The resulting rendered HTML comprises a complex structure of rectangular divisions delineated by appropriate HTML elements such as <article>, <header>, <main>, <div> and <footer>, these being nested together in a way that conforms to HTML standards.
For themes and layouts to work together there has to be a convention for naming the different parts of a page. Some use can be made of specific HTML elements such as <header> but on the whole a further layer of class names is used to identify specific <div> and other elements in the page, and so we have names like l-header, l-container, l-content and l-footer.
At present there is a growing collection of contributed themes for Backdrop being developed on a voluntary ‘open source’ basis, perhaps by converting a theme from Drupal or by copying the appearance of a well-liked Wordpress theme. There is also a well-advanced project to provide a new core theme to replace Bartik.
Layouts
Backdrop’s core at present includes four layouts (*see footnote): 1 column, 2 column, 2 column flipped and 3-3-4 column. The illustration gives a representation of their appearance as pages. Many other patterns are possible and indeed desirable depending on circumstances, and a contributed module called Radix Layouts provides a large set of options, but at present this is not fully compatible with Bartik without some customisation.
When designing a site one is creating among other things ‘nodes’ and ‘blocks’: these are the building blocks of the site. This is an over-simplification but one can think of a node as being a page that is going to appear in the site and the blocks are the building bricks that have to be placed appropriately in a layout to create that node. For example, your primary navigation menu is one of your blocks and with the layout system you specify whether it should appear in the header or in the sidebar.
A particular layout gives a predefined set of regions for your page, so if you need a sidebar the 1 column layout will not do, but Backdrop allows for you to use 1 column for some pages and 2 column for others. This is done through a system of ‘conditions’ whereby you specify the conditions required for a layout to be used and a block to appear. You might for example specify that you want a block that is your local weather forecast to appear in the sidebar in nodes 7, 12,109, or that a particular block should only appear on your front page. This layout system is very powerful and useful.
Templates
Themes and layouts require templates to make things happen, a template being a PHP program file that enables the core system to render the HTML representation of a page in the required way. Each layout provides a template file; each theme provides one main template file and some additional ones. Furthermore, a system or a contributed module is likely to provide one or more templates to meet its specific layout needs. There are many templates working together to generate a Backdrop website.
You may be relieved to know that the website designer does not have to think about the templates; these should quietly be at work in the background each time something changes on the screen. They are what make things happen.
*Changing terminology.
The use of the word layout here may be changing because it has more general and widespread use, thereby causing confusion. In future we may be calling each of the four patterns illustrated here a 'template'. I sympathise with the confusion: when I was a boy a layout referred to model trains!