Symbol of the TYPO3 Templating Starter Kit

Templating Starter Kit for TYPO3 v9

After the release of version TYPO3 9.5 I significantly overhauled my templating extension. This should serve you (and me as well) as a clean foundation for your Site Package, which is the official term. A Site Package includes everything that is required for the design and configuration of a website built with TYPO3.

I integrated as many best practices as possible. Of course I always keep an eye on projects like the bootstrap_package by Benjamin Kott, but also use my personal experiences. I try to keep the balance between manageable configurations and useful features. My templating extension does not require the use of any frontend framework. It is completely up to you how your templates should look like.

The result is now available as basetemplate9 on GitHub.

Among other things, I have implemented the new, simplified import syntax for Typoscript files. Some of the configurations were removed completely. The frontend languages for instance are now configured in the new backend module 'Site Configuration'. As the new TYPO3 core delivers a valuable SEO extension, some meta tags got adapted, too.

New features

BackendLayouts:

So far I only supplied a single, plain example layout. Now there are five BackendLayouts and corresponding Fluid templates for the frontend, which can be customized to your needs:

  • 1 column
  • 2 columns (50/50)
  • 2 columns (66/33)
  • 2 columns (33/66)
  • 3 columns

The multi-column layouts contain additional columns on the top and bottom to be more versatile.
All BackendLayouts are stored in individual files so that they can quickly be exchanged between projects and supplemented.
A simple stylesheet is provided for demo purposes. Of course, this is expected to be replaced by your own stylesheet.

Content rendering in Fluid templates:

I borrowed the dynamicContent function from the bootstrap_package. It enables you to render the different columns of the BackendLayouts in an easy way without having to define them as fluid variables.
It also allows to render the content of a particular page and to add one or two wraps to the content.

Page title:

I configured the <title> element based on the new SEO extension:

  • By default, the page title is composed of the title of the current page and the website name (loaded from a TypoScript constant).
  • If an alternative SEO title was specified by an editor, the appended website name is omitted. This makes it more flexible for search engine optimization.
  • Configuration also includes the popular news extension, which provides an own field for an alternative title.

Like all configurations, this behaviour is not set in stone. You can just modify it if you need a different functional principle.

When the sitetitle (or website name) in TYPO3 is no longer only defined in the sys_template, but in the site configuration as well (Issue on Forge), I'll use this rather than the custom TypoScript constant.

Further features

All Page TSconfig settings can be loaded as needed in the page properties. This way you can decide in which part of the page tree you want to provide e.g. the BackendLayouts. In case you have a TYPO3 installation with multiple websites and page trees, this will also prevent interfering with configurations from another Site Package.

The richtext editor CKEditor is preconfigured and includes the table styles from fluid_styled_content. The supplied wordcount plugin shows your editors the number of paragraphs, words and characters in the current textfield. You can include the typography parts of your stylesheet into the rte_ckeditor.css: the editor will then render the content identical to the frontend.

All labels for the backend already exist in english and german language.

Backport for TYPO3 v8

Wherever possible, I backported these changes to the existing basetemplate8. If you start a new project with TYPO3 8.7, you should use this extension as a starter kit.

Back
I'm Sebastian Klein, web developer with a focus on TYPO3 CMS. These pages want to provide you with assistance and informations about TYPO3 and web development in general.