Standard Templating Kit (STK)
What is the STK
Magnolia's Standard Templating Kit (STK) includes a collection of templates and features, which simplify and speed up the development of your custom project, and avoid the need to start from scratch. The STK is best described as a template construction framework that provides a best practice, out-of-the-box solution.
The STK includes:
- a large list of reusable paragraphs;
- a mechanism to assemble page templates by way of definition, rather than coding;
- a mechanism that allows for the provision of custom paragraphs, without affecting or even touching the page templates that use them;
- a set of use-case driven page templates which can be used in their present form, modified or replaced by your own templates;
- a clear and clean separation of html (template), client-functionality (jquery), content (magnolia/jcr), business logic (java) and design (css);
- explicit support for multiple site configurations (EE only);
- a demonstration site that shows most of the functionality in a working environment; and
- a features site where each feature is presented individually.
- Out-of-the-box solution: The use-case driven page templates, shipped as part of the STK, provide a quick start to building your website. All the essential features, such as customary web pages and numerous paragraphs are in the bundle. All you have to do is to adapt the well-structured CSS.
- Use-case based template: The templates and paragraphs are all based on use cases. The dedicated page templates include Home, Section, Search, News, Events, Contact Form, Article and many more. Numerous ready-to-go-live paragraphs are also available. The range includes content paragraphs, teasers, stages, promos, event lists and more.
- Configurable Layout and Style: The look and feel of the web site is controlled mainly by a single CSS file. Since the HTML structure is designed to be styled by CSS, the look and feel of the site can be changed without ever touching the templates. As the CSS is configured in the site configuration, creating a custom CSS for your site is a simple process.
- 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. Thanks to the new templating features, customization is effortless. In addition, many aspects can be configured in the template or site definitions, without having to write a single line of code. For example, you can define both the paragraphs that are available for individual page templates and their positioning.
What the STK is not
When first coming to terms with Magnolia's functionality, the Templating Samples module is a good starting point. The STK is fairly advanced and combines things on a relatively high level. It does not replace samples and we recommend that you first learn the basic workings of Magnolia before moving on to the STK.
The STK should not be confused with a WYSIWYG editor, like Dreamweaver. It does not provide a user interface to configure the CSS or template structure. In the STK, the developer styles the site, by directly editing the CSS, configuring template definitions or customizing template scripts. While it is possible for non-Java developers to use the STK to build fully functional sites, some Java knowledge is necessary to set up the system.
Features Overview
The following two videos provide a good introduction to and overview of Magnolia's features in general and STK, and are definitely worth watching:
Magnolia 4.0 screencast (13 minutes). This video introduces STK in general and demonstrates the basics;The STK bundle contains two demonstration sites, which show the templates and paragraphs, and can be viewed online:
The Demo Project site uses the templates and paragraphs to build a website and demonstrates how the templates and paragraphs function on a real site. The Demo Features site demonstrates the templates, paragraphs and features individually. We highly recommend that you explore both sites.- login as
superuserusing the passwordsuperuser
The following a brief summary of the use of each sub-menu:
| Sub-menu | Description |
|---|---|
| Themes | Each theme combines style-related configurations and the CSS file references for the theme. The theme is referenced in the site definition |
| 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 |
| Template Definitions | This is a convenient shortcut to the STK template definitions. |
| Paragraph Definitions | This is a convenient shortcut to the STK paragraph definitions. |
| Dialog Definitions | This is a convenient shortcut to the STK dialogs definitions. |
| Templates | This workspace contains copies of the FreeMarker template scripts, which can be edited and activated directly in the workspace. ^1)^ |
| Resources | This workspace contains the resource files. These include the javascripts and CSS files, which can be edited directly in the workspace. ^1)^ |
^1)^ Note that it is not necessary to store the resources (javascripts and CSS files) and the templates in these workspaces.
Licensing
The STK is provided in terms of the GNU General Public License (GPL).
Architectural Overview
The STK brings additional functionality and some conformity to Magnolia. Magnolia itself is extremely versatile and many different approaches can be used to integrate it with various other systems. Without the STK Magnolia is exceedingly powerful, but not optimal for building websites rapidly. The STK components help to streamline things and the well-defined HTML structure facilitates plug-ins of new features and the styling of existing templates and paragraphs. The STK is designed to be extended in many respects and this should become apparent in the later sections.
The following diagram provides an overview of the STK.
The following are some of the features that are in production, but are yet to be introduced:
| Component | Description |
|---|---|
| STKTemplate | A sub-class of the Template class, used to configure the STK template structure |
| STKRenderer | A sub-class of the FreeMarker renderer class, which mainly adds the multi-site support |
| STKUtil | A utility available in the template scripts to enable the STK functionalities. |