Standard Templating Kit

What is the STK?

Magnolia Standard Templating Kit (STK) includes a collection of templates and features that simplify and speed up the development of your custom project. Using the STK avoids the need to start from scratch. A vast range of functionality is provided out-of-the-box which can be adapted for your custom project. The STK is a template construction framework built on best practice solutions and up-to-date capabilities.

The STK includes:

• Numerous reusable components.
• Use-case driven page templates. These can be used "as is", modified or replaced with your own templates.
• Two demo sitesthat include fully functional mobile variations:
  • The first shows functionality in a working environment.
  • The second presents each feature individually.
• Mechanisms:
  • To assemble page templates by definition, rather than coding.
  • For the addition of custom components, without touching the page templates that use them.
  • To define variations of a site.
• Clear and clean separation of HTML (template), client-functionality (JavaScript), content (Magnolia/JCR), business logic (Java) and design (CSS).
• Site definitions. Multiple in EE, single in CE.

Why develop with the STK?

There are many advantages to developing your custom project using the STK:

• Out-of-the-box solution: The page templates provide a quick start to building your project. All essential features are included in the bundle. There are page templates for all commonly used Web pages and components ranging from standard text blocks to the latest advanced technology. All you have to do is to adapt the well-structured toolkit to suit.
• Use-case driven templates: The templates and components are all based on use cases. The page templates include Home, Section, Search, News, Events, Contact Form, Article and more. Numerous ready-to-go-live components are also available. The range includes content components, teasers, stages, promos, event lists and more.
• Configurable Layout and Style: The look and feel of the Web site is controlled mostly by a single CSS file. Additional style sheets are included to adapt to a user's viewport, creating a fluid, flexible grid. Since the HTML structure is designed to be styled by CSS, the look and feel of the site can be changed without touching the templates.
• Accessibility: The generated HTML is state-of-the-art and guarantees accessibility. For example, even invisible navigation messages for vision-impaired users are included.
• Extensibility: As the template and the model are cleanly separated, extending the STK is a simple process. You can modify the templates and/or extend the model.

Download tech brief Developing with and without the STK

Live demo sites

The STK includes two demo sites that can be accessed online:

• demo-project shows how templates work in realistic site context. This site has working examples of article, news, event and many other page templates as well as components such as video, teaser and stage: author instance | public instance
• demo-features shows the same templates grouped categorically: content templates, special templates, aggregation components, areas, sections and modules: author instance | public instance

On the author instance login as superuser using the password superuser. It's easier to understand the STK if you test the concepts yourself.

Using the STK

The STK is administered in AdminCentral in Magnolia. The Templating Kit menu provides access to all elements. Here's a brief description of the content and function of each menu item:

• Themes define the look and feel and JavaScript functionality of a site.
• Site Definitions: Each site, irrespective of its hierarchy in the website workspace, is assigned a site definition. The site definition contains information such as the as available templates, language, navigation configuration and more. Multiple sites is an EE feature. In the CE there is a single definition and the menu item is named Site Configuration.
• Channels are a core Magnolia feature that facilitate the delivery of content in a variety of forms and formats.
• Template Definitions define the individual STK page, area and component templates.
• Dialog Definitions define the STK dialogs that allow for content entry on Web pages.
• Template scripts contain copies of the FreeMarker template scripts that can be edited and activated directly in the work area.
• Resources module contain resource files, including CSS sheets, JavaScripts and template images that can be edited directly in the work area.

Architectural Overview

The STK is built on top of standard core Magnolia functionality that is extremely powerful and flexible in itself. The STK is optimal for building websites rapidly. The templates and components help to streamline things and the well-defined HTML structure facilitates plug-ins of new features and styling of existing templates and components.

The following diagram shows the relationship between core functionality and the STK.

Learning the STK

Here are the links to the STK documentation:

• Site definition
• Template prototype
• Template definitions
• Dialog definitions
• Template scripts
• Themes
• Resources
• Multisite
• STK areas
• STK components
• CSS concepts
• Inheritable components
• STK best practices