The Standard Templating Kit is a production-ready website framework that provides best practices and templates for common use cases. It includes ready-made functionality that can be extended for custom designs and content output. The STK adheres to best practices in CSS, semantic web and HTML, including HTML 5 video and forms support. It also provides a mobile variation which makes your STK-based sites available to mobile devices.

Features

The STK provides:

  • Page templates and components for common use cases. Use them as-is or edit for your needs.
  • Demo sites that showcase the features.
  • Definition of templates via configuration rather than coding.
  • Variations for different devices and channels.
  • Separation of duties: HTML (template), client-functionality (JavaScript), content (CMS), business logic (Java) and design (CSS).
  • Site definitions

Benefits

Advantages to developing your project with the STK:

  • Out-of-the-box solution: Page templates provide a quick start to building a project. All essential features are included in the bundle.
  • Use-case driven templates: Page types are based on common use cases such as Home, Section, News, Events and more. Components include teasers, stages, promos, lists and more.
  • Configurable layout and style: Site appearance is controlled with a single CSS file. Additional style sheets adapt to the 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 modern and accessible. For example, invisible navigation messages for vision-impaired users are included.
  • Extensibility: As the template and the model are separated, extending the STK is a simple process. You can modify the templates or extend the model.

Download: Developing with and without the STK (.pdf)

Demo sites

The STK includes two demo sites that you can study on your local computer or 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

To explore the demo site:

  1. On the author instance login as superuser using the password superuser.
  2. Open the Pages app.
  3. Select the demo-project page.
  4. Execute the Edit page action.

It's easier to understand the STK if you test the concepts yourself.

Using the STK

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

  • 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.
  • Themes define the look and feel and JavaScript functionality of a site.
  • Dialog definitions define the STK dialogs that allow for content entry on Web pages.
  • 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.
  • Template scripts contain copies of the FreeMarker template scripts that can be edited and activated directly in the work area.
  • Resources contain resource files, including CSS sheets, JavaScripts and template images. CSS and JavaScripts 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:

 

#trackbackRdf ($trackbackUtils.getContentIdentifier($page) $page.title $trackbackUtils.getPingUrl($page))
  • No labels

To comment, create an account and log in.

© Copyright 2023 Magnolia