SilverStripe Templates

Technical info

SilverStripe templates files use the .ss extension. They contain regular HTML combined with a templating language to render dynamic data provided by the CMS.

More information about the templating language:

Structure

Template files are located at themes/unibz/templates. By convention templates are named in upper-camel-case e.g. AtomActionLink.

The unibz design is based on Atomic Design principles. At its core Atomic Design means that small reusable parts are used to build more complex (reusable) structures, therefore creating a cohesive visual system by always reusing the same elements.

The unibz template structure marries Atomic Design with the structure required by SilverStripe to make the templates work.

The SilverStripe parts:

  • The Page.ss template at the root of the templates folder is the main skeleton for all pages it contains the <doctype>, <html>, <head> and <body> tags among other elements that are repeated on every page. The respective page layouts will be rendered inside the $Layout variable.
  • The Layout folder contains all page-type (php class that extends from Page) layouts. Page-types are defined in the project code folder (unibz/code/pages). Layouts need to have the same name as the page-type they render.
  • The Includes Folder contains HTML snippets that can be included inside any other template using the <% include MyFileName %> template tag. The filenames are defined by the template author.

The Atomic Design parts:

  • Templates inside the Atoms and Molecules folders are equal to regular Includes templates. The filenames are defined by the template author, respectively including Atom and Molecule at the beginning of the filename.
  • Most templates inside the Organism folder are named after a corresponding php class that extends from Organism. There are also some organism templates created for structural reasons. All can be used like Includes. The filenames have to include Organism at the beginning.

Other concepts

  • The templates/Layout/Page.ss template will render all pages of the type Page, but is also the fallback template for page types that don’t have a defined template. (It’s really confusing that the main skeleton and this template have the same name… its a SilverStripe thing).
  • The templates/Layout/Security.ss template is used to render all login/logout Screens.